Notification Bell

A bell button that swings on new notifications with a rolling unread badge.

@spectrumui/notification-bell

Send a notification — the bell swings and the badge springs in with a rolling count

Installation

Usage

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

<NotificationBell count={3} onClick={() => console.log("open inbox")} />

API Reference

NotificationBell

Renders a single button element whose aria-label reflects the unread count. The bell swings automatically whenever count increases, and unread changes are announced through a polite live region.

Prop	Type	Default	Description
`count`	`number`	`0`	Number of unread notifications. Increases trigger the ring swing and badge animations
`max`	`number`	`99`	Counts above this render as "max+" (99+ by default)
`dot`	`boolean`	`false`	Show a small pinging dot instead of the numeric badge
`ringOnMount`	`boolean`	`false`	Play the ring swing once when the component mounts
`onClick`	`React.MouseEventHandler<HTMLButtonElement>`	-	Click handler for the bell button
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the button
`className`	`string`	-	Additional classes merged with the default button styles

Notification Bell

Installation

Usage

API Reference

NotificationBell

Examples

Dot mode and sizes