Tag
Also known as: Label, Pill, Badge
Resources
Properties
| Property | Values | Default |
|---|---|---|
Size Variant | 2Xs | Xs | Xs |
Has start item Boolean | true | false | true |
Start item InstanceSwap | Any icon | heart |
Label Text | string | Label |
Has end item Boolean | true | false | true |
End item InstanceSwap | Any icon | close |
When to use
When categorizing or labeling content in a way that helps users understand context.
If the user needs to interact with the tags by adding or removing them.
When displaying static or descriptive keywords to help users filter or understand the content.
If the labels need to be selected or deselected repeatedly as part of a multi-selection process. Use chip instead.
If the labels are interactive and need to represent actions like adding or removing items. Use chip instead.
Size
Dimensions of the tag are tied to the global scale tokens. This ensures that the components, especially forms, with similar size settings remain consistent across the interface. scale tokens also provides more granular control over dimensional settings.
--scale-width-<size>
--scale-height-<size>
--scale-padding-<size>
--scale-gap-<size>
--scale-radius-<size>
--scale-icon-size-<size>
--scale-text-size-<size>
--scale-text-height-<size>
Variants
Some common variants are already created and ready to use (see the table), but you have the possibility to add new variants or customize every visual aspect through tokens and token modes.
| Variant | When to use |
|---|---|
Fill | Fill variant emphasizes visibility and interaction priority. Visually, it has high contrast compared to its surroundings. |
Outline | Outline variant blends more with the surroundings, but is separated from the background with a border. |