Anatomy

Item |
Name |
Description |
Component |
---|---|---|---|
1 |
Container |
The chip container |
- |
2 |
Icon |
Leading icon |
Icon |
3 |
Icon |
Trailing icon |
Icon |
Specification and properties
Variants
When using tags, they can be presented in two forms: outline or filled. In the context of tables, it is recommended to use outline tags to ensure they do not overwhelm the user interface.

Variant |
Description |
---|---|
Outline |
Use outline tags by default and in places where there are many tags in close to eachother. |
Filled |
Filled tags are more suitable when used seperately. |
Types
The component has two types; Semantic and Categorical.
Semantic
These tags use semantic color palettes and therefore carry the meaning those colors serve across the product.

Each color should be chosen wisely based on the meaning it conveys:
- Basic Subtle (Default) and Bold- general information, status, or state that doesn't require attention
- Success - completed status, successful outcome.
- Info - this variant uses the semantic info color, and its purpose is to communicate informational, supportive, educational, or helpful feedback.
- Warning - pending status that requires the user's attention, action to unblock further processing.
- Danger - error status, blocked task, negative feedback,
- Primary (Accent) - new feature, new item that requires further processing,
Tag color |
Background (filled) |
Border (outlined) |
Text and icons |
---|---|---|---|
Basic Subtle |
background.alert.basic.secondary |
border.alert.basic |
text.alert.basic |
Basic Bold |
legacy-support.tag.background.basic-bold |
legacy-support.tag.border.basic-bold |
legacy-support.tag.text.basic-bold |
Red |
background.alert.danger.secondary |
border.alert.danger |
text.alert.danger |
Green |
background.alert.success.secondary |
border.alert.success |
text.alert.success |
Orange |
background.alert.warning.secondary |
border.alert.warning |
text.alert.warning |
Blue |
background.alert.info.secondary |
border.alert.info |
text.alert.info |
Primary |
legacy-support.tag.background.primary |
legacy-support.tag.border.primary |
legacy-support.tag.text.primary |
Categorical
They do not carry any semantic meaning and have purely purpose of separating information into distinct categories. Color could be swapped without causing any effect on the tag's meaning.

Spacing

Structure
All tags have a 4px corner radius and a 24px height. Width is limited to 200px length, after which the text label gets truncated.

Optional elements

Item |
Name |
Description |
---|---|---|
1 |
Icon |
Leading Icon |
2 |
Icon |
Trailing Icon |