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
Badge Types
Badges communicate small pieces of information that help users understand content at a glance. To make badge usage more consistent and meaningful, badges are grouped into two categories based on the type of information they convey: Status and Signal.
Choosing the correct badge type helps create predictable user experiences and ensures visual treatments communicate the intended meaning consistently across products.
Status Badge
Status badges communicate the current state or condition of an item. They are typically dynamic and may change over time as the underlying data changes.
Examples
- In progress
- Pending
- Completed
- Draft
- Published
- Out of stock
- Available
- Cancelled
Status badges are commonly used in dashboards, workflows, order management, inventory, and any interface where users need to understand the lifecycle or availability of something.
Signal Badge
Signal badges communicate attributes, characteristics, or classifications that help users recognise or understand content. Unlike status badges, they generally do not represent a changing state.
Examples
- New
- Article
- Video
- Podcast
- Service
- Featured
- Recommended
- Professional
Signal badges are commonly used to categorise content, highlight attributes, or improve scannability within collections.
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”.