Tag
A tag labels items so people can recognise and find them quickly.
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.
- An action. The only action a tag has is removing its value. Use a button for anything else.
- Navigation between sections. Use tabs or links.
Guidance
Do
DesignResearchAccessibility
Put a set of tags in a group. The group handles spacing and wrapping, so the set stays readable at any width.
Don't
DesignResearchAccessibility
Do not colour tags one by one. People read red and green as bad and good, so colours picked for variety send a message you did not intend.
Intensity
How much attention each of this component's grounds uses, scored 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. Demanded is declared, and its use is limited. So neither of those two depends on the component alone. 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.
- Give each remove button a label that says what it removes. Remove on its own is the same on every tag in the group.