Components

Tags

sketch:Readyscss:Ready
vue
:Ready
freemarker
:Ready

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 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

SizeHeight value
Small1.5 mu (24px)
Medium2.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

Small tags should only be used on desktop.
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 a selectable tag alone.
Never use links tags as action buttons. They should only point to a related category of content.