Tag
Tag is a compact element that represents an input, attribute, or action.
Overview
- variant
- contained · textOnly · dot
- size
- medium · small · tiny
- state
- enabled · selected
- color
- default · success · warning · error · info
- Toggles
- disabled
All options
Variant and size
The dot variant shows a colored indicator for status displays.
| size \ variant | contained | textOnly | dot |
|---|---|---|---|
| medium | Tag | Tag | Tag |
| small | Tag | Tag | Tag |
| tiny | Tag | Tag | Tag |
States
| state \ variant | contained | textOnly | dot |
|---|---|---|---|
| enabled | Tag | Tag | Tag |
| selected | Tag | Tag | Tag |
Color
Contained tags with color prop display white text in light theme for better contrast.
| color \ variant | contained | textOnly | dot |
|---|---|---|---|
| default | default | default | default |
| success | success | success | success |
| warning | warning | warning | warning |
| error | error | error | error |
| info | info | info | info |
Icon
iconName adds a leading icon to contained and textOnly tags; the dot variant shows its dot instead.
| size \ variant | contained | textOnly |
|---|---|---|
| medium | With Icon | With Icon |
| small | With Icon | With Icon |
| tiny | With Icon | With Icon |
Examples
Interactive (clickable)
Click me
Filter
Remove
With second label
Add a secondary text below the tag label for additional context (center aligned).
Premium$9.99/mo
PopularBest value
NewJust added
Accessibility
Clickable tags
A tag with onClick becomes a keyboard-reachable toggle button: it has role="button", takes Tab focus, activates with Enter or Space and reports state="selected" through aria-pressed. Tags without onClick are not focusable.
Props
| Prop | Type | Required | Description |
|---|---|---|---|
| variant | 'contained' | 'textOnly' | 'dot' | Yes | — |
| size | 'medium' | 'small' | 'tiny' | Yes | — |
| state | 'enabled' | 'selected' | No | — |
| color | 'default' | 'success' | 'warning' | 'error' | 'info' | No | — |
| label | React.ReactNode | Yes | — |
| secondLabel | string | No | — |
| iconName | IconName | No | — |
| onClick | React.MouseEventHandler<HTMLDivElement> | No | — |
| disabled | boolean | No | Only applies to a clickable tag: dims it, drops it from the tab order and ignores clicks |