Components

Tags

Tags are components that indicate a taxonomy type. They can be found in different variants, offering a different interaction type, based on the use-case.

Display tag(s)

Display tags only indicate the taxonomy term, users cannot interact with them, as they are used only for display purposes.

Do's

  • use short, distinct and indicative labels, representative for the taxonomy term

Don'ts

  • don't use abstract or elaborate terms, unless they are contextual to content presented on the page

When to use

  • when tags can offer complementary information associated to the page's content

When not to use

  • do not use when you need to link to another page
  • do not use for search filters that can be removed

Link tag(s)

Link tags provide users with further navigation, related to the context in which they are used.

Do's

  • use short, distinct and indicative links, representative for the content you are linking to

Don'ts

  • do not use unless there is an internal page where further related information is found

When to use

  • for navigation, when the tags link to pages relevant to the content presented on the page

When not to use

  • do not use when the tags are only for display purposes
  • do not use for search filters that can be removed

Removable tag(s)

Removable tags are used as an indicator for performed searches. When they are removed (via the close button - icon), the taxonomy term used as a filter will be removed as well.

Do's

  • use short, distinct and indicative labels, representative for the content you are linking to
  • make sure the tag matches the filter option used in the search query

When to use

  • use where search queries can be viewed through the tags, and removed as needed

When not to use

  • do not use when the tags are only for display purposes
  • do not use when you need to link to another page