Badges are non-interactive labels which hold small amounts of information.


Badges notify the user of a status, for example that there are new or unread messages or notifications. They typically describe or relate to another element on the page. Badges scale so that their height matches the font-size of their immediate parent element by using relative font sizing and em units.


Use when

  • In proximity to notifications or user avatars with eye-catching appeal (e.g. displaying unread messages count).
  • Use for displaying quick, easily digestible bits of information.

Don’t use when

  • Displaying long strings of text.
  • An interactive element is needed, such as a Button or Chip.


There are three types of badges: default, text, and counter badges. They are available in three sizes: small, default, and large.

Default Badges

Used when more emphasis is needed. Default badges can look like Buttons. Avoid using button colors to make sure the user can tell the difference.

Primary Secondary Tertiary Dark Success Warning Danger

Text Badges

Used to display a more subtle label. Text badges can look like text Buttons. Avoid using text button colors to make sure the user can tell the difference. Do not use a text badge for warning (yellow): it does not meet the required contrast ratios for accessibility.

Primary Secondary Dark Success Danger

Counter Badges

Used to display up to 3 characters (usually a number in a counter). Counter badges can look like Chips, when too many characters are used. Use a maximum of 3 characters or numbers.

1 2 3 4 5 6 7

Badges in other elements

Badges can be inserted into other elements.

  • List with Badge 14
  • List with Text Badge 14


  • Badges come in 3 defined heights:
    • Small: 14px
    • Default: 20px
    • Large: 28px
  • Badges should be centered vertically inside of their containing element.
  • Font weight: 700
ExampleHeightUse Case
Small Badge 14pxInside lists or other elements
Default Badge 20pxStand-alone or inside lists
Large Badge 28pxStand-alone for emphasis


  • Badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional hidden text.
  • When displaying a badge on any color other than white, make sure it meets required contrast ratios.
What's Changed
11/23/20201.0.0Warning badge text color changed to be accessible. Warning text badge removed.E. Bohn, L. Kause, N. Springer