Tags are used to provide contextual information; find related content using keywords, labels or links. Tags are also used as keywords in search boxes, filters and category lists. In some cases, they can be added or removed by the user.
Anatomy
There are 2 variants of tags to accommodate different needs.
Link tags
| Elements | Constraint |
|---|---|
| Label | Mandatory |
| URL-link | Mandatory |
Removable tags
| Elements | Constraint |
|---|---|
| Label | Mandatory |
| Dismiss icon | Mandatory |
When to use
Link tags
- To navigate to another page/content.
- To link current content to other related content.
- To show information which helps a user make sense of the content on the page, such as filter parameters or object metadata.
- To display information that clarifies the content on the page, such as metadata.
- To showcase the specific attributes of an item.
- To display applied filters or options.
Removable tags
- To dismiss a tag from a search query, for example search filters, facets...
When not to use
Link tags
- Avoid using too many tags as they might cause a visual overload.
- Avoid using tags that are too long (more than 3 words).
- Don’t use tags that are redundant.