Alert Badge
Last Updated: September 2026Alert badges are visual cues that draw the users attention to some element on the screen. Alerts are always tied to a parent element.
Source CodeAnatomy
link- 1Dot
- 2Count
Variants
linkHighlight
Accent fill for informational attention (new items, unread).
Urgent
Danger fill for time-sensitive or high-priority counts.
With count
Pass count as a number or string. Omit it for a plain dot.
Floating on children
Wrap a control; show toggles visibility without unmounting children.
Usage Guidelines
linkWhen to use
- •To show unread counts on notification or inbox controls.
- •To highlight new or urgent items without interrupting workflow.
- •As a status pip on icons, nav items, or compact actions.
When not to use
- •For full messages with title and body — use AlertNotification, Banner, or Toast.
- •As the only way to convey critical clinical status — pair with clear text.
- •For decorative emphasis that is not actionable.
Attach badges to a clear control and keep counts short.
Don't rely on a badge alone for critical status — add a label or alert.
Use urgent for high-priority queues; highlight for general unread.
Don't show long strings in count — prefer numbers or a short cap like 9+.
Behaviors
linkStandalone vs anchored
- •Without children, AlertBadge renders the badge alone.
- •With children, the badge is absolutely positioned over the anchor.
Visibility
- •show defaults to true when children are present.
- •Set show={false} to hide the badge without removing the wrapped control.
Content Guidelines
linkCounts
- •Prefer integers for unread or pending work.
- •Cap large values (e.g. 9+) so the pill stays compact.
Placement
- •Anchor to interactive controls users already understand.
- •Avoid stacking multiple badges on one control.
Accessibility
linkText & Labels
- •Badges are visual only (pointer-events-none) — convey meaning in the control label or aria-label.
- •Include the count in accessible text when it changes meaning (e.g. 'Notifications, 3 unread').
ARIA attributes
- •Do not rely on the badge for aria-live announcements; update the host control's accessible name.
Keyboard Support
- •Badge itself is not focusable — focus stays on the wrapped control.
WCAG Compliance Standards
FAQs
linkWhen should I use a dot vs a count?
Use a dot for presence (something new). Use count when the exact number of items matters.
Can I use AlertBadge without wrapping a child?
Yes — omit children and it renders as a standalone badge or count pill.
How do I hide the badge temporarily?
Pass show={false} while keeping children mounted.