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