Badges
General Guidelines
-
Badges are to be used for predefined text.
- Keep in mind that Badges increase the amount of visual noise, particularly when combined with other visual labelling elements, so use them in moderation.
- Badges are not actionable items.
- Badges can be accompanied with tooltip text to add clarity to descriptors that may not be clear.
Comparison
| Outline | Solid | Color | Description | Uses |
|---|---|---|---|---|
| Badge Small | Badge Small | White w/ Grey | Use to call attention to content that is non-specific and not actionable |
|
| Badge Small | Badge Small | Yellow | Use for statuses that need attention but are not critical, low priority |
|
| Badge Small | Badge Small | Green | Use for statuses that celebrate success or indicate a positive trend |
|
| Badge Small | Badge Small | Red | Use for statuses that are problematic, highly critical or that have been removed |
|
| Badge Small | Badge Small | Teal | Use for statuses that are informational and not actionable |
|
Style
Solid Badges
Use Solid Badges when you want to have visual prominence in the page and to highlight statuses that need immediate attention. Be careful not to overuse solid badges as they may conflict with primary actions in the page. It is recommended to use them only on interfaces with minimal design elements.
Outline Badges
Use Outline Badges when the information does not require a lot of prominence. They can be used more frequently as they won’t conflict with other elements in the page. This makes them suitable for interfaces that contain a lot of design elements.