Tag
Tag component is used to categorize content.
When to use
- Use the tag component to indicate the status of something, such as an item on a task list or an account status.
- Use tags to label, categorize, or organise items using keywords that describe them.
Guidelines
- Only use tags to indicate the status of something, so tags should not be used as a link or within links.
- Use adjectives rather than a verb within tags, so it is clear the user does not have to click on the tag.
- Consider reducing the number of tags used. The more added, the harder it is for users to remember them. So, start with the smallest number of statuses that might work, then add more if the user research shows there’s a need for them.
- Use it when have the data that helps categorize and organise things.
- Do not use tags for numerical counts. Use a badge instead.
Basic
The tag's default form is present with text, and class=tag is utilized.
New
<span class="tag bg-primary" role="img" aria-label="Primary Tag">New</span>
Severity
In addition to the default color, the severity of the tag determines its color. Possible values include success, information, warning, and danger.
Primary
Success
Warning
Danger
<span class="tag bg-primary" role="img" aria-label="Primary Tag">Primary</span>
<span class="tag bg-success" role="img" aria-label="Success Tag">Success</span>
<span class="tag bg-warning" role="img" aria-label="Warning Tag">Warning</span>
<span class="tag bg-danger" role="img" aria-label="Danger Tag">Danger</span>
Icon
A font icon next to the value can be displayed with the i tag.
Primary
Success
Warning
Danger
<span class="tag bg-primary mb-2 mb-md-0" role="img" aria-label="Primary Tag">
<i class="ds ds-user me-2"></i>Primary </span>
<span class="tag bg-success mb-2 mb-md-0" role="img" aria-label="Success Tag">
<i class="ds ds-checkmark me-2"></i>Success </span>
<span class="tag bg-warning mb-2 mb-md-0" role="img" aria-label="Warning Tag">
<i class="ds ds-exclamation-triangle me-2"></i>Warning </span>
<span class="tag bg-danger mb-2 mb-md-0" role="img" aria-label="Danger Tag">
<i class="ds ds-close me-2"></i>Danger </span>
Accessibility
- Do not rely solely on color to provide information.
- The text in the tag should clearly communicate its purpose. Colour should only be an additional visual aid.
- If using the same tag in more than one place, ensure that colour and content are consistent.