Badges

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