Badges

What problem does this solve?

Badges provide quick visual identification for numeric values such as tallies and other quantities. They are not used for anything other than integers. For statuses, use Lozenges. To call out tags or other high-visibility attributes, use Labels.

Example

1 2 3 4 5 6 7

How and when to use

  • Badges can be used before or after the name or label of the thing they quantify (see below) but the more common pattern is after the object name
  • Use badges unambiguously – always use them singly, after a single item name
  • Tooltips can be used to enhance user understanding – to indicate units, for example
  • Badges are for counts, so should only contain numbers