Tag
Tags contain keywords for associating data sets that cross-link different information.
1. Anatomy
Aria attributes
Value | Purpose |
aria-label = “string” | Shows whether the chip is selected. |
aria-role | Status or button (depends on the variant) |
2. Configurations
2.1 Type
We have clickable, deletable, and static tags. All variants have different usage, interactivity, and behavior.
2.2 Size
Static tag supports 2 sizes: medium and small.
Clickable and deletable variants support medium size only. Static tags support both sizes.
2.3 Prefix
Prefix supports avatar or icon.
2.4 Suffix
Suffix supports icon.
Only static and clickable variants support suffix.
2.5 Color
The color usage are semantic in the tags. There are 6 colors: neutral, success, error, warning, informational, and branded.
3. States
Each variant has different states as all variants have different interactivity and behavior.
3.1 Static tags
3.2 Clickable tags
3.3 Deletable tags
4. Behavior
4.1 Clickable tag
Clicking on the tag should redirect users.
4.2 Deletable tag
Clicking on the cross icon should remove the tag itself. The rest of the rags should not be clickable.
7. Resilience and responsiveness
Tag only has content-fit. If the container becomes narrower than the tag’s width, it overflows.
8. Visual specs
The top and bottom margins have different values to maintain the visual balance.
8.1 Margin
8.2 Padding
8.3 Size
8.4 Font size
