Loading…

Notification Bell

beta

A round bell button with an unread badge: the bell swings when notifications land — harder when several land at once — and the count rolls.

Feedback
1 file
3 npm packages
Accessibility notes
Animates with motion

Playground

Installation

The CLI installs notification-badge as well, because this component imports it. Or copy everything in by hand.

$pnpm dlx @dowel-ui/cli add notification-bell

npm packages installed: class-variance-authority, motion, radix-ui.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { NotificationBell } from "@/components/ui/notification-bell";

Examples

Every example the tests run, live and operable, side by side.

Default
Playground
Dot
Overflow
Sizes
Tones
On An Avatar

API

Generated from the component's own types, so a prop cannot appear here without existing.

<NotificationBell>

Prop	Type	Default
`appearance`	`"soft" \| "ghost" \| "outline"`	`"soft"`
`count` Unread total. Hidden at 0; fractional or negative values are floored to it.	`number`	`0`
`label` The built-in bell's accessible name. Default: "Notifications, 3 unread". With `asChild`, the badge's text, read after your element's own name instead (default ", 3 unread").	`string \| ((count: number) => string)`	—
`live` Announce the settled count politely when it changes. Off by default.	`boolean`	`false`
`max` Highest number shown; above it the badge reads "99+".	`number`	`99`
`size` Diameter in pixels. The bell, the badge and its digits are all fractions of it.	`number`	`40`
`tone` Badge colour, from the semantic palette.	`NotificationBadgeProps["tone"]`	`"destructive"`
`variant` The badge's shape. A dot appears and leaves on the same counts as the number.	`"count" \| "dot"`	`"count"`
`asChild` Put the badge on your own element (an avatar, a nav item) instead of the bell.	`boolean`	`false`

Plus every attribute of <button>.

Accessibility

The built-in bell is a button named "Notifications, 3 unread" (overridable with `label`, or a function of the count), so the count is part of its name; the bell glyph and the badge's digits are aria-hidden. With asChild your element keeps its own name and the badge adds ", 3 unread" after it. Changes are silent by default (ADR 0004); `live` adds a polite status region that announces the settled name once the count stops changing, not once per arrival. Colour is never the only signal — the number, or the dot's presence, is. The swing is skipped under reduced motion, and the badge's pop and shrink snap.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

appearance

"soft" | "ghost" | "outline"

"soft"

count

Unread total. Hidden at 0; fractional or negative values are floored to it.

number

0

label

The built-in bell's accessible name. Default: "Notifications, 3 unread". With asChild, the badge's text, read after your element's own name instead (default ", 3 unread").

string | ((count: number) => string)

—

live

Announce the settled count politely when it changes. Off by default.

boolean

false

max

Highest number shown; above it the badge reads "99+".

number

99

size

Diameter in pixels. The bell, the badge and its digits are all fractions of it.

number

40

tone

Badge colour, from the semantic palette.

NotificationBadgeProps["tone"]

"destructive"

variant

The badge's shape. A dot appears and leaves on the same counts as the number.

"count" | "dot"

"count"

asChild

Put the badge on your own element (an avatar, a nav item) instead of the bell.

boolean

false