Tag
Compact chip for labeling, categorizing, or filtering content
Category: display · WCAG 2.2-AA · chip, label, filter, category
Variants
- default
- info
- success
- warning
- error
Sizes
- sm
- md
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'error' | default | Severity tone. Accepts the catalog-wide `Tone` vocabulary (`neutral | info | success | warning | danger`) plus Tag's historical spellings (`default` → neutral, `error`/`destructive` → danger). |
size | 'sm' | 'md' | md | Visual size of the component (e.g. 'sm', 'md', 'lg'). |
onDismiss | () => void | — | When provided, renders a trailing remove button inside the chip |
dismissLabel | string | Remove | Accessible label for the dismiss button. |
children | ReactNode | — | Tag label |
Design tokens
--cascivo-color-bg-subtle--cascivo-color-text-subtle--cascivo-color-info--cascivo-color-info-subtle--cascivo-color-success--cascivo-color-success-subtle--cascivo-color-warning--cascivo-color-warning-subtle--cascivo-color-destructive--cascivo-color-destructive-subtle--cascivo-radius-badge--cascivo-focus-ring
When to use
- Labeling, categorizing, or filtering content with a compact chip
- Representing a removable selection or active filter (onDismiss)
- Showing a set of keywords or attributes on an item
When not to use
- A static, non-interactive status label — use Badge
- A live system state with a dot — use Status
How to build an accessible Tag in React →
Examples
Default
<Tag>Design</Tag>Success
<Tag variant="success">Approved</Tag>Dismissible
Renders a trailing remove button labeled by dismissLabel
<Tag onDismiss={() => removeFilter()}>Filter: Active</Tag>