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)
Introduction
Display tags only indicate the taxonomy term, users cannot interact with them, as they are used only for display purposes.
Anatomy
- mandatory
- optional
| Elements | Mandatory | Description |
|---|---|---|
| label | yes | label of the component |
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 - use Link tag(s) instead
- do not use for search filters that can be removed - use Removable tag(s) instead
Link tag(s)
Introduction
Link tags provide users with further navigation, related to the context in which they are used.
Anatomy
- mandatory
- optional
| Elements | Mandatory | Description |
|---|---|---|
| link | yes | link to internal page or source |
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 - use Display tag(s) instead
- do not use for search filters that can be removed - use Removable tag(s) instead
Removable tag(s)
Introduction
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.
Anatomy
- mandatory
- optional
| Elements | Mandatory | Description |
|---|---|---|
| label | yes | label of the component |
| icon | no | affordance or action indicator for removing the tag |
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 on list/pool pages, where search queries can be seen through the tags, and removed accordingly
When not to use
- do not use when the tags are only for display purposes - use Display tag(s) instead
- do not use when you need to link to another page - use Link tag(s) instead