display contract
Tag
User-applied label for filtering/categorisation. Removable; differs from Badge (system-applied).
Variants
- default
- Removable with trailing × button
- static
- Read-only tag
- colored
- Custom user color for color-coded systems
Sizes
- sm
- 24pt
- md
- 28pt
Example
<Tag onRemove={() => remove(tag)}>{tag.name}</Tag>Usage rule
Removable tags expose `aria-label="Remove ${tagName}"` on the close button.
The full Tag contract has 3 more rules, plus the do-not patterns. Get the full recipe.