docs / core / notification-badge

NotificationBadge

a small count or dot pinned to the corner of whatever it wraps: an icon, a button, an avatar. it vanishes at zero, so silence stays silent.

intensity · recedesrsc · server

provenance

shaped from sisu-plus

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

wraps an icon-only Button, an avatar, a nav itemdot mode for presence, count mode for unreadnot a status Badge. it counts, it does not labelnever on a bare icon with no accessible name of its own

a11y

the dot is aria-hidden · the wrapper never steals the child's role or namejest-axe
live demo · try it out
3
customize
countthe number shown
3
maxcap before N+
9
dotbare presence dot, no number
toneindicator colour
showZerostay visible at 0
usagecopy
import { Button } from "@usva-ui/react/primitives/button";
import { NotificationBadge } from "@usva-ui/react/primitives/notification-badge";

<NotificationBadge count={3}>
  <Button variant="outline" iconOnly aria-label="Notifications">
    <BellIcon />
  </Button>
</NotificationBadge>

props

proptypedefaultnotes
countnumber0the count to show. hidden at 0 unless showZero.
maxnumber9cap before showing "N+".
dotbooleanfalsea bare presence dot instead of a number.
tone"accent" | "accent-alt" | "danger" | "warning""danger"indicator color.
showZerobooleanfalsekeep the badge visible at 0.

get it

bun add @usva-ui/reactcopy
usagecopy
import { Button } from "@usva-ui/react/primitives/button";
import { NotificationBadge } from "@usva-ui/react/primitives/notification-badge";

<NotificationBadge count={42} max={9}>
  <Button variant="outline" iconOnly aria-label="Notifications">
    <BellIcon />
  </Button>
</NotificationBadge>