State the meaning of the badge
One colored dot is not enough to explain the status to everyone.
Badge Design system
Add quantity or status without encroaching on the main content.
Checklist contents
Review progress
01
Structure and meaning
Compare information and presentation in context of use.
02
Interaction and usability
Try the operation, change the status and continue working.
Progress is saved automatically in this browser.
GUIDANCE
How to review
EXAMPLES
Usage examples
State the meaning of the badge
The “Notifications” button has the access name “3 unread notifications”.
Variants and use cases
Numeric counter
Explain what the counter counts and define how to display large numbers.
Test 0, 1 and 120. When hiding or abbreviating a number, preserve an accessible name that conveys the full value.
Example Display 99+ while keeping the accessible name '120 unread notifications'.
Combine color with a number or label.
Update indicator
Use a dot when you only need to indicate a change, without implying a specific count.
Check that people can distinguish an update indicator from an online status indicator.
Example The dot on the Profile tab includes the label 'Information needs review'.
Combine color with a number or label.