$ rezi
Widgets

Tag

Compact label/chip widget, useful for metadata lists.

Compact label/chip widget, useful for metadata lists.

Usage

import { ui } from "@rezi-ui/core";

ui.tag("v0.1.0");
ui.tag("breaking", { variant: "warning" });

Props

PropTypeDefaultDescription
textstringrequiredTag text
variant"default" | "success" | "warning" | "error" | "info""default"Semantic variant
removablebooleanfalseShow a remove affordance
styleTextStyle-Optional style override
keystring-Reconciliation key

Examples

1) Tag list

import { ui } from "@rezi-ui/core";

ui.row({ gap: 1 }, [ui.tag("cli"), ui.tag("tui"), ui.tag("typescript", { variant: "info" })]);

2) Removable tags

import { ui } from "@rezi-ui/core";

ui.tag("filter:open", { removable: true });
  • Badge - Status labels
  • Kbd - Keyboard shortcut chips

On this page