Best practices
- Badges indicate status or convey information about a surrounding element.
- Badges can be used to draw attention to specific elements - e.g. a new product.
- Badges are read-only status indicators or labels and are not interactive.
- Always position badge so that it’s clear to understand what object it’s related to.
When not to use
- Do not overuse badges. As with buttons, too many badges on a screen disrupts the visual hierarchy and will dilute the importance of each element.
- Badges are not actionable elements and should never be used as a substitute for a button or link.
- Badges shouldn’t be used outside the context of another element.
- Don’t use badges for non-contextual information and explanations. Use the Alert component instead.
Anatomy
- Badge container
- Label
Content guidelines
- Keep it short! Strive to use single words whenever possible.
- Labels should be concise, unambiguous and clearly indicate the state of the element which the badge represents.
- Use sentence case for all labels (e.g. “New product” and “Save changes”)
- Badges labels should not be actionable like “Click here” or “Buy here”.