Badge

A badge is a visual indicator for numeric values such as tallies and scores.
ExamplesCodeUsageChangelog

Usage

Badges are usually placed before or after the label of the thing they're quantifying, such as the number of votes for a Jira story. They should only be used to represent a number, however, some letters and special characters can be used to represent number values, such as +, -, K. For example:

Three examples of badges with custom formatting – minus 10, plus 27, and 5 K.

Accessibility

  • Use badges in conjunction with a single item or label, to avoid ambiguity around which item is being quantified.
  • Don't rely on color alone to signify whether a value is positive or negative.
  • Number values are grouped and separated differently in many countries and regions. Use your app's internationalization library, or the browser's internationalization with the user's locale set correctly so that number values show in a familiar format.

Data Center apps

For all new features, we recommend using Atlassian Design System and other Atlaskit components, (opens new window). For existing code, you can continue to use Atlassian User Interface (AUI), (opens new window).

  • For non-numeric status information, use a lozenge.
  • To visually label UI objects, use a tag.
  • Use lozenges for statuses.
  • Call out tags and high-visibility attributes with labels.
Was this page helpful?
We use this feedback to improve our documentation.
© 2026 AtlassianTrademark, (opens new window)Privacy, (opens new window)License