Tag

Tags are used to highlight the status of an item or make it easier to recognize certain items in data-dense content. Be wary of using multiple tags on one item, as it could cause visual noise.

Guidelines

How it works

Tags are used for web content that needs to be labeled, categorized, or organized using keywords that describe them.

Tag use

Interaction

When the user hovers over the element, a tooltip can be triggered, displaying additional information.

Tooltip

Content

Tags generally include information that is either inputted by the user or pulled from another place in the product. In the case that a tags content is inputted, keep these rules in mind:

Do

  • Always use sentence case.
  • Keep the content under 20 characters (3 words).

Do not

  • Use special characters.
  • Use punctuation.

Accessibility