Anatomy
The Badge consists of two primary elements that work together to indicate attention requirements on interactive elements.
- Parent element
- Badge
Options
The Badge supports default and value-less configurations to accommodate various notification scenarios.Default
By default, show the number of alerts or notifications on the Badge so users see them without diving deeper.Without value
When the number of alerts or notifications is not available, use an empty Badge.Behavior
The Badge responds to value limits and positioning requirements while maintaining consistent visual indication.Max value
Do
Don’t
Offset
When using Badge with components like Link, overlap may not be ideal. Set offset to resolve this issue.Do
Don’t
Usage Guidelines
Alternatives
Badge vs Chip
Chips are used to categorize, label, and add context to items whereas Badges are used to indicate something requires attention, such as a notification. Additionally, Chips can be interactive while Badges are not.How to Use
Add Badge to interactive elements
Attach Badges to interactive elements, such as icon buttons, to indicate a count (e.g., the number of notifications).Without a count
Use Badges without a value to denote an unread notification or message.Do not change the color of the Badge
Don’t
Only use numbers inside of a Badge
Don’t
Content
Content within the Badge should clearly indicate the count or presence of items requiring attention through numerical values.Keyboard Interaction
Users can navigate the Badge using standard keyboard controls. For accessibility,aria-label should be defined to match the context.
With the example above, there are 2 methods:
- Adding
aria-label="Cases with 6 items to review"to the Button- This will read as “Cases with 6 items to review, button”
- Adding
aria-label="with 6 items to review"to the Badge only- This will read as “Cases, button, with 6 items to review”
Code
- Implementation
- Badge Props
Common Examples
Use relative positioning on badge parent
In order for a badge to properly position itself, the parent of theBadge component that the badge should be placed on needs to have position: relative.Adjusting badge position
When used with square or rectangular elements, the badge should position itself nicely on the corner of the element. Sometimes, some fine-tuning may be required if the element has a different shape, such as text. Use theoffset prop to supply CSS sizing values to the x and y parameters.Badges without children
If nochildren element is provided for the Badge component, only a red dot will appear.React Accessibility
Using aria-label
Do
Don’t