Skip to main content

Badges

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

Badges examples

Overview

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.

Usage

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.

Example

Badges Example

What's changed
Date Version Notes Contributors
06/01/2022 1.0.1 Updated full layout. M. Johns
Last updated July 18, 2023.