Badges are small status descriptors for UI elements.

Badges inform users of the status of an object or of an action that's been taken. A badge consists of a small circle or pill, typically containing a number or other short set of characters, that appears in proximity to another object such as an icon or a header.

Our design system distinguishes several badge variations for specific needs, including basic, header, maximum value, and dot. See Format to learn about these badge variations.

Text badges use short single-word labels for easy scanning. Only use two words where it's necessary to describe a status or to differentiate it from other badges.

  1. All badge variations (except dot badge)
    1. Container
    2. Fill
    3. Content
  2. Dot badge
    1. Dot

This is the default format, displaying a number (A) or short text (B) on a colored background.

Use a basic badge to show a status or to indicate a quantity available or remaining.

By default, a basic badge appears offset above and to the right of the target object but it can appear in other positions – see Position for details.

A maximum value badge displays a number up to a specified maximum value, at which point the badge displays the maximum value with a plus sign suffix.

Use a maximum value badge to indicate a quantity available or remaining when it isn't useful to show the quantity's value once it exceeds a reasonable maximum value.

By default, a maximum value badge appears offset above and to the right of the target object but it can appear in other positions – see Position for details.

Dot badges, as the name suggests, display a small dot instead of a number or text.

  1. Basic dot badge
  2. Header dot badge

Use dot badges as a notification to attract the user's attention.

By default, a dot badge appears offset above and to the right of the target object but it can appear in other positions – see Position for details.

A header badge appears inline after a header title. The header badge can be combined with the dot badge to display a dot instead of a number or text next to the header.

Use a header badge to show a status or to indicate an available or remaining quantity related to the header.

Unlike the other badge variations, the position of a header badge cannot be changed.

The basic, maximum value and dot badge variations can be placed in four positions.

  1. Top right
  2. Top left
  3. Bottom right
  4. Bottom left

The default position is top right, and this position should be used unless your UI design prefers a different position.

Our components have been designed to comply with the WCAG 2.1 AA accessibility guidelines. For information about how our design system complies with color-related accessibility guidelines, see Foundations > Colors > Accessibility.

For more information about badges, see: