tag

Guidance

When to use the tag component

Using colored tags in the same way as our alert components brings a valuable sense of consistency and immediate understanding to the user interface. Because the alert colors already carry specific semantic meanings (e.g., red for error, yellow for warning, green for success), applying these same color associations to tags allows users to instantly recognize the category or status represented by the tag.

It is recommended to follow the color guidance on tags to ensure consistency. However, if a specific product use case requires a unique color-coded tag, this can be reviewed and discussed with the design system team.

To draw attention to new, important content. Tags can focus attention on important content on that might otherwise be missed.

To filter results with one or more tags.

To indicate the number of new or unread items within a container. For example, to indicate the number of unread emails within a person’s inbox.

When to consider something else

Confusion with buttons. Avoid tags if they might appear in the same area of the page as buttons.

New or updated content. To call attention to new or updated content, consider changing the background color of the object itself or experiment with changing the font weight.

When users already expect content to be updated frequently. For example, on a site dedicated to breaking news. In this case placing the new content at the top may be enough.

Accessibility

Use ARIA live regions to highlight dynamically loaded content. When tags are used to call out new content that is dynamically loaded onto a page, be sure to use ARIA live regions to alert screen readers of the change. Reference: WAI-ARIA

Avoid using all capital letters for tag labels. Using sentence case or title case improves readability for a broader range of users. Screen readers may read all-caps text as individual letters, which can hinder comprehension.

Color Contrast: Ensure sufficient color contrast between the tag’s background color and its label text to meet color contrast WCAG guidelines.

Light Backgrounds: For tags with light background colors, use black for the label text.

Dark Backgrounds: For tags with dark background colors, use white for the label text.

Note: Always verify the color contrast ratio between the background and the label text using a color contrast checker to guarantee WCAG compliance.