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