Badge communicates system-generated counts to make the user aware of new items or items that need attention.
Overview
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.
Anatomy
- Container: Holds the label.
- Label: Presents the system-generated numerical information.
Demo
Open the component in Figma.
When to use
- When reporting item counts.
- For reporting items that are new to the user or need attention.
When not to use
- To display the status of an object, use the Status component.
- To organize or categorize system-generated metadata, use the Tag component.
Similar components
Variants
Default
Use for the majority of badge use cases. The standard badge.
Attention
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.
Danger
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)
Behaviors
Placement
Badges are always placed to the right of an element, whether attached or floating. When internationalized for RTL languages, this reverses to the left.
Visibility
The badge hides automatically when <badgeContent> is zero. You can override this with the <showZero> prop.
Dismissal
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.
States
Default
The default state indicates that there are counts, but the parent item of the badge isn’t selected.
Active
The active state indicates the parent item of the badge is selected.
Accessibility
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.
Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone.
Content guidelines
Content is system generated. Designers do not need to create content.
Label
- 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+.
Content accessibility
Provide a description with <aria-label>. Numerical badges will have their label number read.
- If relevant, include badge announcements by selecting corresponding navigation destinations.
Figma: Badge