Notification badge

Atomic count indicator for outstanding items. Aligned with J&J DS v1.2 — brand-red fill, white "negative" outline (override via outlineColor when the background is not white). Four sizes; compact is a dot with no text. Counts above max render as 999+.

Sizes

Compact (8px dot, no text) → Small (16, 12px text) → Medium (20, 14px text) → Large (24, 16px text). Each badge has a 2px white outline (1px on Large) so it stays legible against any background.

333

Show source

<NotificationBadge size="compact" />
<NotificationBadge size="sm" count={3} />
<NotificationBadge size="md" count={3} />
<NotificationBadge size="lg" count={3} />

Counts and overflow

Counts above max (default 999) render as “{max}+”. Provide an explicit label for non-numeric copy (e.g. NEW).

142999+5+NEW

Show source

<NotificationBadge size="md" count={1} />
<NotificationBadge size="md" count={42} />
<NotificationBadge size="md" count={1200} />
<NotificationBadge size="md" count={6} max={5} />
<NotificationBadge size="md" label="NEW" />

Anchored to an icon button

Wrap the trigger in a `relative` container and absolute-position the badge. Pair size with the icon: compact for an unread indicator; sm/md when a count is meaningful.

128

Show source

<div className="relative inline-flex">
  <Button variant="ghost" size="iconMd" aria-label="Notifications">
    <Icon icon={Bell} size="md" />
  </Button>
  <NotificationBadge
    size="sm"
    count={5}
    className="absolute -top-1 -right-1"
  />
</div>

On an Avatar

Bottom-right corner placement matches the Figma anchor. Use sm + count for entities/users, compact for a presence dot.

AB3

J&J9

Show source

<div className="relative inline-flex">
  <Avatar size="lg">
    <AvatarFallback>AB</AvatarFallback>
  </Avatar>
  <NotificationBadge
    size="sm"
    count={3}
    className="absolute -top-1 -right-1"
  />
</div>

Outline override for non-white backgrounds

Per DS guidance, the outline should match the surrounding background. Pass `outlineColor` to override the default white.

342

Show source

<div className="bg-jj-bg-inverse p-4 rounded-jj-md">
  <NotificationBadge
    size="md"
    count={3}
    outlineColor="var(--background-inverse)"
  />
</div>

Accessibility

By default the badge announces itself as `role=status` with an aria-label like “3 notifications”. Override via the standard `aria-label` prop, or pass `aria-hidden` if a sibling element already exposes the count.

Show source

<NotificationBadge size="sm" count={3} aria-label="3 unread messages" />
<NotificationBadge size="compact" aria-hidden />