Tag
Compact React tag for categories and keywords, in the SDGA tone set, three sizes, with icons and a dismissible mode. RTL ready.
Tag labels content. Pick a tone (the *-subtle fills are the SDGA set), add icons, or make it removable with dismissible.
When to use
Use Tag to label content with a category, keyword, or short attribute such as "Draft" or "Riyadh". Use StatusTag when the label communicates state with a colored dot, and Chip when the user toggles it.
Make a tag dismissible only when removing it changes something, such as an applied filter.
Examples
Props
Props declared by Tag. Native attributes of the underlying element pass through.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "secondary" | "outline" | "destructive" | "destructive-subtle" | "default" | "success" | "warning" | "info" | "primary-subtle" | "secondary-subtle" | "success-subtle" | "warning-subtle" | "info-subtle" | "on-color" | ||
size | "sm" | "md" | "lg" | ||
shape | "pill" | "squared" | ||
iconOnly | boolean | ||
outlined | boolean | ||
asChild | boolean | Render as the single child element instead of a <span> (see Button). | |
startIcon | react.ReactNode | Icon rendered before the tag text. Sized to the tag font (0.875em). | |
endIcon | react.ReactNode | Icon rendered after the tag text. Sized to the tag font (0.875em). | |
dismissible | boolean | Render a trailing close button - turns the tag into the DGA "tag/chip"
pattern. Uncontrolled by default: the tag hides itself when the close
button is clicked. Pass open to control visibility yourself.
Not combinable with asChild - the consumer's slotted element (usually an
<a>) would end up with an interactive <button> inside it, which is
invalid HTML. In that combo the close button is suppressed and a dev
warning is logged. | |
open | boolean | Controlled visibility. When provided, onDismiss becomes the only signal. | |
onDismiss | () => void | Fires when the close button is clicked, in both controlled and uncontrolled mode. | |
closeLabel | string | Accessible label on the close button. Defaults to "Dismiss". Override for i18n. |
Accessibility
Tag is text, so it is read as part of the content. Icons are aria-hidden; the label must carry the meaning.
The dismiss button has an accessible name that includes the tag text, and the tone colors meet contrast requirements in light and dark mode.