General Guidelines

  • Badges are to be used for predefined text.
    1. 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.


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
  • Minor
  • Not Started
  • Unavailable
  • To do
Badge Small Badge Small Yellow Use for statuses that need attention but are not critical, low priority
  • Review
  • Missing
  • Busy
Badge Small Badge Small Green Use for statuses that celebrate success or indicate a positive trend
  • Complete
  • Approved
  • Added
  • Done
Badge Small Badge Small Red Use for statuses that are problematic, highly critical or that have been removed
  • Error
  • Removed
  • Inactive
Badge Small Badge Small Teal Use for statuses that are informational and not actionable
  • New


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.