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