Tags
Tags are used to display labels or categories that can be applied to items. They help in organizing and filtering content based on specific attributes.
Loading Code Block...Full example
Section titled “Full example”Loading Code Block...Colors
Section titled “Colors”The `color` prop allows you to change the visual representation of the tag based on the intent.
brand
neutral
warning
success
info
danger
Loading Code Block...Outline
Section titled “Outline”Set the `isOutline` prop to true to display the outline variant of the tag.
brand
neutral
warning
success
info
danger
Loading Code Block...| Props | Default | Type | Description |
|---|---|---|---|
| text | - | string | Text to be displayed in the tag. |
| color | neutral | 'brand' | 'neutral' | 'success' | 'danger' | 'warning' | 'info' | Color of the tag. |
| isOutline | false | boolean | If set, the tag will have an outline style. |
| icon | - | ReactNode | Pre-rendered icon element placed before the text (e.g. `icon={<Settings width={14} height={14} />}`). |
| children | - | ReactNode | Rendered after `text`. Use to append close buttons, secondary badges, or other inline content. |
Accessibility
Section titled “Accessibility”- Tags are rendered with semantic contrast colors to ensure text is legible against varied internal backgrounds.
- If Tags are used purely as indicators (and not interactive elements), they do not receive keyboard focus to prevent cluttering the tab order.
- Ensure any SVG icons embedded inside tags have their
aria-hiddenattribute set to true if they are purely decorative, or supply an alternative text description if they convey unique status.