Badge communicates system-generated counts to make the user aware of new items or items that need attention.
Badge reports system-generated numerical information to users using a small indicator that can be attached to an element or float next to an element.
- Container: Holds the label.
- Label: Presents the system-generated numerical information.
Open the component in Figma.
- When reporting item counts.
- For reporting items that are new to the user or need attention.
- To display the status of an object, use the Status component.
- To organize or categorize system-generated metadata, use the Tag component.
Use for the majority of badge use cases. The standard badge.
Use to call attention to the badge, especially if the component includes brand color. For example, primary buttons. There’s also an inverted version of this variant built into the component to use when inverse contrast is needed.
Used only for the highest priority critical items that require a user’s attention, use sparingly and avoid repeating too often within the same flow (when everything’s important, nothing is important)
Badges are always placed to the right of an element, whether attached or floating. When internationalized for RTL languages, this reverses to the left.
The badge hides automatically when <badgeContent> is zero. You can override this with the <showZero> prop.
When a badge is used to indicate an item that needs attention, like an unread notification, the badge is hidden after it has been selected.
The default state indicates that there are counts, but the parent item of the badge isn’t selected.
The active state indicates the parent item of the badge is selected.
Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.
Content is system generated. Designers do not need to create content.
- A label must be included.
- Systematically, limited to three digits.
- If the number exceeds three digits, then the label automatically includes a +. For example, 999+.
Provide a description with <aria-label>. Numerical badges will have their label number read.
- If relevant, include badge announcements by selecting corresponding navigation destinations.