Example
Props
Tone
Use the tone property to indicate the intent of the badge.
Patterns
Numeric badges
Values that exceed hundreds should be abbreviated, using the Numeral component, to avoid cluttering the interface.
Complex children
Icons and text inside badges will inherit the correct gap, size, tone, and weight.
Accessibility
Badges that convey information with icons or color may need to provide supplemental text. This text is read out by assistive technologies like screen readers so that users with vision issues can access the meaning of the badge in context.
Aria attributes
The aria-label and aria-labelledby attributes will override the element’s text content.
Visually hidden
Use the visuallyHidden prop on the Text component to provide additional information to assistive technologies, without overriding the other badge content.
Best practices
Use badges to highlight an item’s status for quick recognition. Badges should contain short easy-to-scan text.
Usage
Badges are most effective when:
- Consistent tonal patterns are employed throughout the interface, so users can quickly identify their intent.
- Clearly positioned, to identify the object they’re informing or labelling. Proximity is key.
- Used sparingly within an interface. Overuse dilutes their importance.
Labelling
Badge labels should:
- Use sentence case.
- Use a single word to describe the status of an object.
- Rarely use two words, only when describing a complex state, e.g. “Partially complete”.