Badge
A non-interactive status or count indicator component
Related WCAG criteria — click to view details
Code example
Common baseline
Applies to all design systemsAccessible name on the host element
Provide an aria-label on the element that owns the badge (icon button, avatar). The numeric badge alone does not convey meaning.
Include units in the count
Use phrases like "3 unread notifications" instead of bare numbers so the label has meaningful context.
Do not rely on color alone
Never use color alone to distinguish success / error / warning states. Always pair color with text or an accessible name (WCAG 1.4.1).
Mark decorative badges aria-hidden
Dot badges that are purely visual should use aria-hidden="true" while the meaning is carried by the parent element.
Use a live region for dynamic badges
When the count updates in real time, announce changes with role="status" or aria-live="polite".
Avoid duplicate announcements
Do not expose the badge text to assistive tech when the parent label already contains the same information.
Do not convey status with color only
Colored dots without a visible text label are unreadable for color-blind users.
Additional checks
Add aria-label on the parent element
MUI does not reliably announce badgeContent. Put the full meaning on the wrapping IconButton or button via aria-label.
variant="dot" needs non-color cues
Dot badges carry no text, so repeat the state in the parent aria-label.
Decide whether to show zero
badgeContent={0} is hidden by default. Opt in with showZero when 0 should still be visible.
Code sample
Implementation notes
- –MUI Badge badgeContent is visual-only; always provide the full context via aria-label on the parent IconButton / button.
- –The max prop automatically renders overflow indicators like "99+".
- –For variant="dot", color alone carries the state. Provide an aria-label with the meaning so screen reader users are not left guessing.
- –badgeContent={0} is hidden by default. Use showZero if zero must still be displayed.