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 are used to display product or service properties with no related page or category, they are not interactive elements.
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 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 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
|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.