Tag
A tag labels UI objects for quick recognition and navigation.
When to use
- Labels on an object, such as the topics on an article or the skills on a profile.
- The current filters on a list, where each one can be taken off.
- A set of values that belongs to one field, shown together in a tag group.
When not to use
- A state that changes. That is a lozenge.
- A count. That is a badge.
- A single action. A tag with a remove button removes a value, and anything else belongs on a button.
- Navigation between sections. Use tabs or links, which are built for it.
Guidance
Do
DesignResearchAccessibility
Put a set of tags in a group. It handles the spacing and the wrapping, so a long set stays readable at any width.
Don't
DesignResearchAccessibility
Do not colour tags one by one. Red and green read as bad and good, so a colour picked for variety says something you did not mean.
Intensity
What each of this component's grounds spends, measured against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| tag | accent-gray-subtler | 0.099Ambient | 0.236Marked |
| tag--blue | accent-blue-subtler | 0.095Ambient | 0.110Ambient |
| tag--green | accent-green-subtler | 0.081Ambient | 0.172Ambient |
| tag--lime | accent-lime-subtler | 0.081Ambient | 0.175Ambient |
| tag--magenta | accent-magenta-subtler | 0.096Ambient | 0.122Ambient |
| tag--orange | accent-orange-subtler | 0.076Ambient | 0.188Ambient |
| tag--purple | accent-purple-subtler | 0.091Ambient | 0.127Ambient |
| tag--red | accent-red-subtler | 0.092Ambient | 0.124Ambient |
| tag--teal | accent-teal-subtler | 0.077Ambient | 0.166Ambient |
| tag--yellow | accent-yellow-subtler | 0.077Ambient | 0.183Ambient |
Substrate, Ambient and Marked are measured. Directed depends on what else is in the region, and Demanded is declared and rationed, so neither is a property this component carries by itself. See intensity.
Content
What to write, and what to leave out.
- Name the thing. Design, not Tagged design.
- One or two words, in sentence case.
- Keep the set consistent. If one tag is a noun they should all be nouns.
- A remove button needs a label that says what goes, because Remove on its own is the same word on every tag in the group.