Tag
Selectable chip tags for filtering, categorization, and multi-select. Each includes a check icon when selected.
Selectable Tags
Click tags to toggle selection. Selected tags show a checkmark and colored background.
Selected: AI, Design
const [selected, setSelected] = useState(new Set(["AI"]));
<Tag
label="AI"
selected={selected.has("AI")}
onToggle={() => toggle("AI")}
/>
Color Variants
<Tag label="Primary" color="primary" selected />
<Tag label="Success" color="success" selected />
<Tag label="Danger" color="danger" />
Props
| Prop | Type | Default | Description | Required |
|---|
| label | string | - | Tag display text | No |
| color | "primary" | "info" | "success" | "warning" | "danger" | "neutral" | "primary" | Color scheme | No |
| selected | boolean | false | Whether the tag is selected | No |
| onToggle | () => void | - | Callback when tag is clicked | No |
Usage Guidelines
- Use tags for multi-select filtering, topic categorization, or skill lists.
- Group related tags together and limit visible options to avoid overwhelm.
- The check icon provides visual confirmation of selection state.
- Use color variants to distinguish between tag categories.