Badges

Badges contain numeric values and indicate a running tally, such as the number of unread messages in a room. Use badges to label page items with a small amount of information that draws attention to new, updated or removed content. Badges are normally placed before or after the label of the thing they're quantifying, and contain only numbers or a "+" sign to indicate a quantity greater than the displayed number.

  • Use badges in conjunction with a single item so that there is no ambiguity around which item is indicated.
  • Use tooltips on badges when they're useful to clarify meaning or enhance user understanding – for example to indicate units.
  • Badges are for counts, so they should only contain integer numbers.
  • Don't display status information in a badge; use a lozenge instead.
  • Don't use badges to visually label UI objects; use tags instead.
Type Color Style
Primary Blue 1 11 99+
Default Grey 1 11 99+

Behavior and style

For the most important information, such as the number of direct mentions or the number of people following a JIRA issue, choose a primary blue badge. For info that is more complimentary, like unread messages that a user isn't mentioned in, or build results, go for a subtle default badge. For large numbers, consider setting a maximum value and maximum number of displayed digits. For example, the maximum value is set to 200 and the maximum number of displayed digits could be 2, would result in a value of 99+ in your badge.

An example of reduced table width