Skip to main content


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

Badges examples


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.


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.


Badges Example

What's changed
Date Version Notes Contributors
06/01/2022 1.0.1 Updated full layout. M. Johns