Badge
A badge is a visual indicator for numeric values such as tallies and scores.
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 tally that changes while the page is open and that someone will want to glance at rather than read.
When not to use
- A status or a category. That is a lozenge, which carries a word rather than a number.
- A label on an object. That is a tag.
- A number that is the content rather than an annotation of it. Write that as text, where it can be read and copied.
- A count nobody will act on. A badge draws the eye, so an idle number spends attention for nothing.
Guidance
Do
150
Cap a count that can run away. Past a point the exact number stops meaning anything and only the width changes.
Don't
150387
Do not let a badge grow without a ceiling. It pushes whatever sits beside it and nobody reads six digits at this size.
Intensity
What each of this component's grounds spends, measured 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, 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.
- Numbers only, or a number with a symbol such as a plus. A badge is too small for a word.
- Do not write zero. If there is nothing to count, leave the badge out.
- The thing being counted is named by what the badge sits beside, so do not repeat it.