Tag
Tag displays metadata categorizing or grouping content in an application. They are read-only and do not interfere with page interactions but use categorical colors to draw attention. Tags appear as stylized elements with text, optionally accompanied by an icon to reinforce their meaning.
| Salt package | @salt-ds/core |
|---|---|
| Available since | 1.30.0 |
Tag has two variants: primary and secondary. The primary variant is set by default. Set to secondary with variant=”secondary”.
To add a border to tag, simply pass the bordered prop to the component.
Secondary tags have the ability to theme the border, although the border is not visible by default in the Salt theme.
Use an icon inside a tag to visually reinforce its content for quick recognition. Icons should be displayed before the label.
Set a categorical color by passing a value from 1 to 20 to the category prop.
If a category outside the range is passed, the styles will default to category 1.
Don't rely on color only when using categorical colors. For more information about making tags accessible, refer to the accessibility guidelines for tags.
- Be consistent when assigning categorical colors.
- Avoid assigning two different categorical colors to the same piece of metadata.
When using more than one tag next to each other, for example in a Card, apply --salt-spacing-50 between them.