UI Component LabData display
Badge
A small marker on another element, such as an unread count on a notification button.
Demo
How to recognize it
A small round or pill-shaped label, usually red, in the top-right corner of an icon or button, holding a number or just a dot.
Variations
- Dot
- A small dot with no number, showing only that there is something new.
Behavior
- Updates when the count changes and disappears at zero; in this demo, opening the notifications clears it.
- Large numbers are shortened, such as “99+”.
- The badge itself is hidden from screen readers; the count is put into the name of the button it belongs to, such as “Notifications, 3 unread”.
Keyboard
| Key | Action |
|---|---|
| — | None for the badge. The button it sits on uses Enter / Space. |
Similar components
- Tag: A badge is attached to another element to show a count or status; a tag stands on its own as a label for content.
Sources
- MUI: Badge (Last checked: )