display contract
Tag
User-applied label for filtering/categorisation. Removable; differs from Badge (system-applied).
Variants
- default
- static
- colored
Sizes
- sm
- md
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.