To help some information, labels, or errors stand out, we present them with badges. They can look a bit like buttons, but users can’t select them. They simply guide users to things they should pay attention to.

Resources

Related Guidelines

Usage

We use status badges to indicate status or items that might require the user’s attention. For example, we can use status badges to indicate:

  • An overdue or paid amount

  • An overdue or paid transaction

  • An incomplete item in a list or table

We also use status badges in warnings, confirmations, and some errors. Each has a strong meaning.

Be sure to use status badges consistently and only when we really need the users’ attention. Consistent, conservative use will help us make sure we don’t dilute the messages badges convey.

Appearance and behavior

There are three types of badges:

  • Round badges

  • Round badges with labels

  • Text badges

Round badges

We use round status badges in info messages, end-of-flow confirmations, warnings, and errors. These can be used as standalone elements without labels as long as they appear in context.

Round badges with labels

We’re no longer using the teardrop-shaped status badge. If you encounter it in your work, replace it with the round badge with label.

Text badges

Text badges notify users of line items that need attention.

Accessibility

To make sure badges are accessible, they need to meet requirements for color contrast. Round badges have a minimum 3:1 contrast ratio for non-text requirement. Text badges have a minimum 4.5:1 contrast ratio for text requirement.

Don’t

Although each status badge can be used alone as the main message, these badges should not be used together without a label in the same section to indicate the differences.

Example of not using status badge without label

For example, using success and pending badges without a label in a table to indicate the status of each line item is not accessible because the color (green vs. gray) is the only indicator of status difference. Color alone can’t be used to indicate anything. This applies to error and warning messages too.

Content guidelines for badges

Badges are one of the rare instances where we present content in all capital letters. In most other cases, we present text in sentence case.

Keep the copy as brief and simple as possible.

Examples

  • Created by
  • Last modified September 12, 2019 by
  • Was this Helpful?
  •