Category Tag

This tag is used to represent categories that customers define themselves, such as region or internal concept labels. Since there's no fixed entity to anchor to, colour becomes the primary identity signal, chosen from a curated swatch set or a custom hex value.

Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.

When to use

  • To represent a category, region, or grouping that customers define themselves
  • To display customer-defined labels that users can scan, filter, or remove

When not to use

  • To represent a system entity such as a Space, Project, or Tenant (use Tag with an Avatar or Icon instead)
  • To communicate system-generated state or status (use Badge or Status Badge instead)
  • To link to a resource or page (use Link instead)
  • To signify a missing or unset value (use text instead)
  • To display several tags together in a constrained space (use Tag Group instead)

Best Practises

Do

Do show the dismiss button only when the user can genuinely remove the category from the object.

Don't

Don't use the dismiss button to clear a filter or navigate. Dismiss removes the category from the object it's attached to.