Tag
Tags communicate metadata that categorizes or groups content in an application. They are read-only, do not interfere with page interactions, and use categorical colors to draw attention. Tags appear as stylized elements with text, sometimes accompanied by an icon to reinforce their meaning.
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 categorial 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 categorial colors. For more information about making tags accessible, refer to the accessibility guidelines for tags.
- Be consistent when assigning categorial colors.
- Avoid assigning two different categorial 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.
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 categorial 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 categorial colors. For more information about making tags accessible, refer to the accessibility guidelines for tags.
- Be consistent when assigning categorial colors.
- Avoid assigning two different categorial 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.
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 categorial 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 categorial colors. For more information about making tags accessible, refer to the accessibility guidelines for tags.
- Be consistent when assigning categorial colors.
- Avoid assigning two different categorial 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.