Skip to main content


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

Badges Example


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 two types of badges: default 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.

Badges Default

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.

Badges Number Examples

Badges In Other Elements

Badges can be inserted into other elements.

Badges In Other Elements

What's changed
Date Version Notes Contributors
01/16/2023 1.0.0 New component added. D. Bedick, E. Bohn, N. Cadsawan, E. Gunther, I. Perez, J. A. Provin Silva, L. Saenz, C. Starbird, R. Stillwell, S. Kaukonen, N. Byati