Usage guidelines outline how the component should and shouldn’t be used in different user interface contexts.
When to use
- Providing additional metadata about an object that’s system-based
- Communicating status or health of an object (unless Status Badge can be used)
When not to use
- Showing an element count (use Counter Badge instead)
- Communicating user-generated labeling (use Tag instead)
Best practices
Do use a subtle Badge on light backgrounds for a balanced visual hierarchy. A solid Badge can overpower the surrounding content.
Do use a solid Badge on dark backgrounds where stronger contrast is necessary for visibility.
Do use a subtle Badge in complex or data-heavy interfaces, where a solid Badge would compete with the surrounding charts and metrics.
Do place Badges in the vicinity of the object they are referring to.
Do use easily understood language language, ideally up to two words.
Do use Badges with an icon within page content where there’s more screen real estate (in page headers or empty states).
Do use Badges without an icon where space is limited and/or the icon creates too much visual clutter (e.g.: main navigation and forms).
Avoid mixing multiple types of Badges. Default to displaying a single Badge at once.
Don’t place links in Badges.