Tag
A label chip with optional remove action. Use for filter chips, selected items, and categorisation labels.
When to use
- Filter chips — selected filters in a search UI.
- Selected items — tags in a multi-select or token field.
- Category labels — taxonomy labels on cards or list items.
When NOT to use
- For non-removable status indicators — use Badge instead.
- For toggle selections — use Toggle or ToggleGroup.
Import
import { Tag } from '@mihcm/ui/Tag';Basic usage
<Tag>React</Tag>Removable tags
Pass onRemove to render the X button:
<Tag onRemove={() => handleRemove('react')}>React</Tag>Or use the removable convenience prop:
<Tag removable>React</Tag>Variants
| Variant | Use when |
|---|---|
default | Neutral label, lowest emphasis. |
primary | Primary brand label. |
accent | Accent-coloured label. |
destructive | Error or removal-related tags. |
success | Positive / completed tags. |
warning | Caution tags. |
Sizes
Three sizes: sm, md (default), lg. Use lg for touch-friendly UIs.
Composition
- Pass
onRemoveto render a close button. The remove button is keyboard-accessible. - Tags render as
<span>by default — non-interactive. Removable tags get a<button>for the close icon. - Use
leadingIconfor category or type indicators alongside the label. - Keep labels to 1-3 words. Longer text belongs in a Badge or inline text.