Tags
Tags are used to categorize, show filters or make selections. They display product properties.
Please check flags for other use cases.
Four Tags types for different usages
Text tags
Text tags are used to display product or service properties with no related page or category, they are not interactive elements.
Link tags
Link tags are a variation of the text tags, they have the same appearance but they are used as a link. For example to redirect user to a category page.
Selectable tags
Selectable tags are used to select (or deselect) values from a proposal of multiple keywords. They are a good alternative to radio buttons, checkboxes or toggle buttons when you need to select values outside a form.
Removable tags
Removable tags are indicators for the users, they are the result of the previously selected values and can be removed by taping.
There are two sizes for tags to create hierarchy and for a better adaptability
| Size | Height value |
|---|---|
| Small | 1.5 mu (24px) |
| Medium | 2.5 mu (40px) |
Small tags should only be used on desktop.
Spacing in tags list
Tags are mainly used in list. The spacings between each of them must be 1 mu (16px), horizontally and vertically.
Do's and Don'ts
Link and removable tags should always be used in tags lists (witch may contain only one item depending on the user interactions).
Always use one type of tag in a tag list. Each Tag type corresponds to a specific use case.
Never use links tags as action buttons. They should only point to a related category of content.