Badge
A badge shows a number, such as a count or a score.
When to use
- A count that belongs to something else on screen, such as unread items beside an inbox or results beside a filter.
- A count that changes while the page is open and that people check at a glance.
When not to use
- A status or a category. Use a lozenge, which shows a word instead of a number.
- A label on an object. Use a tag.
- A number that is the content itself. Write it as text so people can read and copy it.
- A count nobody will act on. A badge draws attention, so use one only when the number matters.
Guidance
Do
150
Set a max on a count that can grow large. Past a certain point the exact number is no longer useful.
Don't
150387
Do not let a badge grow without a limit. It pushes nearby content aside, and nobody reads six digits at this size.
Intensity
How much attention each of this component's grounds uses, scored against the ladder in both themes.
| Appearance | Ground | Light | Dark |
|---|---|---|---|
| badge | accent-gray-subtler | 0.099Ambient | 0.236Marked |
| badge--added | accent-lime-subtler | 0.081Ambient | 0.175Ambient |
| badge--default | accent-gray-subtler | 0.099Ambient | 0.236Marked |
| badge--important | accent-orange-subtler | 0.076Ambient | 0.188Ambient |
| badge--primary | accent-blue-subtler | 0.095Ambient | 0.110Ambient |
| badge--primary-inverted | surface | 0.000Substrate | 0.000Substrate |
| badge--removed | accent-red-subtler | 0.092Ambient | 0.124Ambient |
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.
- Use numbers only, or a number with a symbol such as a plus. A badge is too small for words.
- Do not write zero. If there is nothing to count, leave the badge out.
- Do not say what is being counted. The element next to the badge already names it.