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:
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.
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
