Status
When using badges to display status use established colors:
Green for positive (e.g. confirmed, created, completed, approved, online)
Orange for notice (e.g. on hold, paused, planning)
Blue for informative (e.g. to do, active, updated)
Red for negative (e.g. failed, denied)
Grey for neutral (e.g. archived, removed, deleted, offline)
Categories
Badges can be used to display categories for data sets with up to 5 categories.
Consider if similar categories are implemented elsewhere in the UI and if there’s an opportunity to be consistent.
Only use the red badge if necessary since it can appear to be indicating an issue.
Properties
Grey badges can be used to display properties, meta data, and other information that may be helpful to elevate above regular text.
New and Beta Features
The black badge is exclusively used to indicate new features.
The orange badge is used to indicate beta features.
1. Be Concise
Keep badge text short. Ideally, use 1 to 2 words. A shorter badge is faster to read and reduces visual clutter.
2. Don’t Overuse Badges
If everything is important, nothing is. Consider what information is most helpful to draw attention to with badges and what is more suited for regular text.
3. Use Colored Badges Sparingly
Aim to use colored badges for a single set of information on a page. If more badges are needed, use grey badges to preserve the importance of colored badges and prevent overloading the page with a distracting amount of color.
4. Don’t Use Badges As Headers
Badges should not be used as headers. Use the appropriate sized typography class to establish hierarchy instead.
5. Don’t Use Badges for Immediate Feedback
Badges are not for communicating immediate feedback or lengthy messages. Use an inline error, message card, or flash instead.
6. Placement
Badges should be vertically centered with associated elements. Maintain —-core-2 (8px) of space between badges and associated elements.
Related Pages
Accessibility
Color contrast ratio for our Badge components meets AA standards, based on Web Content Accessibility Guidelines (WCAG) guidelines.
Benefits: People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.¹
Additional Reading
“Web Content Accessibility Guidelines (WCAG) 2.0.” W3C, www.w3.org/TR/WCAG20/.