Tags communicate content classification in a compact, scannable form. They help users understand the category or topic associated with a piece of content, find related content. They are available in 3 variants.
Do's
- use short, distinct labels that accurately represent the taxonomy term or filter option
- ensure labels are consistent with the taxonomy used
- for removable tags, match the label exactly to the filter option the user selected
- ensure each link tag points to an internal destination page where users can find related content
Don'ts
- do not use abstract, technical, or elaborate terms
- do not mix interaction models within the same tag set - display, link, and removable tags should not appear together
- do not use a link tag unless a valid internal destination exists
When to use
- use the Link variant when tags serve a navigational purpose, connecting the current page to other pages that share the same taxonomy term
- use the Removable variant when users can view and modify their active search or listing query. This variant makes the current filter state visible and gives users the ability to remove individual items
When not to use
- do not use a tag variant that implies an interaction the tag does not support
- do not use tags to replace structured navigation, filtering components, or category headings - tags complement content classification, they are not a substitute for dedicated interface patterns
- do not use tags when the taxonomy is absent, inconsistent, or not meaningful to the target audience