Notification Badge
Overlays a notification count or an activity dot on the corner of existing content such as an icon, icon button, link or avatar.
Default
Wrap the content you want to decorate. Unlike
Badge, which is an inline label, NotificationBadge sits on the corner of its child. A Count of zero hides the badge, so a "mark all read" action clears it without extra state.Overflow, Zero and Dot
Maximum caps the visible number — a count above it renders as 99+ while the aria-label keeps the real figure. ShowZero keeps the badge visible at zero. Dot drops the number for a plain 8px activity dot and takes precedence over Count.Positions
Use
Position to pick the corner. The badge sits 4px outside the chosen corner with a 2px ring in the background colour, so it stays readable over busy content.Custom Colour and Label
Only
Destructive, Secondary and Outline have distinct variant styles; every other BadgeVariant falls back to the primary colour. For anything else, set BadgeClass — it is applied after the variant classes. AriaLabel replaces the generated "{n} notifications" description.