Content & Data
Tag
Tag is a compact classification label for categories, filters, or user-applied values — distinct from read-only Badge status metadata.
Single component
betaReact AvailableFigma AvailableDocs Partial
- React last updated
- 2026-07-13
- Documentation last updated
- 2026-06-01
- Accessibility target
- WCAG 2.2 AA (target)
- Version
- 0.5.0-beta
Known open questions
- Selectable or filter-chip Tag behavior is not confirmed in Figma — only removable label is implemented.
- Chip is not a separate Figma component — Tag is the canonical name.
Live preview
Classification labels — distinct from read-only Badge status metadata.
Standard / leading icon / removable
DocumentationDesign SystemsFilters
Tag vs Badge
Category Tag vs status Badge
Category: BetaBeta
Tag represents an assigned category or filter value. Badge communicates compact read-only status — it is not removable.
Purpose
A removable, user-generated or user-applied label — distinct from Badge, which is a non-removable system status indicator.
Anatomy
Tag = label text + optional leading icon + optional remove button.
Variants and states
default · removable
When to use
User-applied categorization the user can remove.
When not to use
A non-removable system status — use Badge.
Accessibility
Remove icon needs aria-label like "Remove [tag name]"; removing should move focus sensibly afterward.
Common mistakes
Using Tag for a non-removable status indicator.
Properties
Label (text). Show remove (boolean).
What is the difference between Tag and Badge?
Badge communicates compact read-only status or counts. Tag represents an assigned category or filter value and may include a separate remove control.
Is Tag interactive?
Default Tag is a non-interactive span. Only the optional remove button is interactive — the label itself is not a button.
How should a removable Tag be labelled?
The remove button uses an accessible name such as “Remove Design Systems”. Decorative icons use aria-hidden.
Tokens used
semantic/surface/elevatedsemantic/icon/mutedradius/full
Component API
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Tag label text. |
| removable | boolean | false | Shows a separate remove button. |
| onRemove | () => void | — | Called when remove is activated. |
| removeLabel | string | — | Override remove button accessible name. |
| leadingIcon | ReactNode | — | Optional leading icon (decorative). |
React example
Copy React example
import { Tag } from "@/components/ui/Tag";
export function Example() {
return (
<Tag removable onRemove={() => undefined}>
Design Systems
</Tag>
);
}