# Notification Bell

> A React notification bell with an iOS-style unread badge that rolls its digits on new alerts.

- Type: React component (Feedback)
- Access: Free (the source is open to everyone)
- Version: 1.0.1
- Install: `npx wingo-ui@latest add notification-bell`
- Docs: https://wingo-ui.com/components/notification-bell

## Interaction

Press plus to add a notification, minus to clear one. The bell swings when one lands, its clapper lagging behind, and the count rolls to the new number digit by digit. Add a few fast and it swings harder. Past the max the badge reads 99+, and it shrinks away at zero.

## Installation

```bash
npx wingo-ui@latest add notification-bell
```

The CLI adds the files, their dependencies and a version record for updates.

With shadcn: `npx shadcn@latest add https://wingo-ui.com/r/notification-bell.json`

Files:

- `components/ui/notification-bell.tsx`

npm dependencies: `npm i motion @radix-ui/react-slot`

Wingo UI dependencies (installed automatically):

- [Motion presets](https://wingo-ui.com/components/motion) ([Markdown](https://wingo-ui.com/components/motion.md))
- [UIProvider](https://wingo-ui.com/components/ui-config) ([Markdown](https://wingo-ui.com/components/ui-config.md))

## Usage

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

export function Demo() {
  return <NotificationBell count={8} />
}

// or wrap it in your own menu trigger (shadcn dropdown-menu):
// <DropdownMenuTrigger asChild>
//   <NotificationBell count={unread} />
// </DropdownMenuTrigger>
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `count?` | `number` | `0` | Unread total on the badge. The badge is hidden at 0, and fractional or negative values are floored to it. |
| `max?` | `number` | `99` | Highest number shown. Anything above it displays as the max followed by a plus. |
| `variant?` | `"count" \| "dot"` | `"count"` | Whether the badge shows the number or a plain dot. The dot appears and leaves on the same counts. |
| `size?` | `number` | `48` | Diameter of the button in pixels. The bell, badge, and digits are all fractions of it. Below 44px the button keeps a 44px hit area on touch screens. |
| `color?` | `"red" \| "orange" \| "green" \| "blue" \| "violet" \| string` | `"red"` | Badge color: a name from the Apple system palette (each swaps to its dark mode variant with the theme) or any CSS color. |
| `badgeTextColor?` | `string` | `"#ffffff"` | Any CSS color for the digits in the badge. |
| `surfaceColor?` | `string` | `""` | Any CSS color for the round button. Empty uses #F4F4F9 light, #262626 dark. |
| `iconColor?` | `string` | `""` | Any CSS color for the bell glyph. Empty uses #868593 light, #9B9AA7 dark. |
| `ringStrength?` | `number` | `1` | How hard the bell swings when the count goes up: 0 keeps it still, 1 is the original swing, 2 twice the kick. |
| `label?` | `string` | `"Notifications"` | What screen readers hear with no unread notifications; also the button's name. |
| `unreadLabel?` | `string` | `"Notifications, {count} unread"` | What screen readers hear with unread notifications; {count} fills in, e.g. "{count} unread notifications". |
| `asChild?` | `boolean` | `false` | Uses your own child as the trigger instead of the built-in button, so the badge can sit on an avatar or a nav item. Your element should be round for the badge to line up, and the bell swing only runs on the built-in button. |
| `children?` | `ReactNode` |  | The custom trigger when asChild is set. Ignored otherwise. |
| `className?` | `string` |  | Extra classes merged onto the root element; other button props are spread onto it too. Sizing is set inline from the size prop, so a width or height class here will not take effect. |

## Parts

### NotificationBellColor (type)

The named badge colors: "red" | "orange" | "green" | "blue" | "violet". color also takes any CSS color.

## Examples

- **App header**: Between search and the avatar at 40px; opening it marks everything read and the badge shrinks away.
- **Messages arriving**: Each new message swings the bell and rolls the count; clearing them hides the badge.
- **Dot, colors and overflow**: variant dot hides the number; color takes a system name or any CSS color; past max the badge reads 99+.

## See also

- [Notification Center](https://wingo-ui.com/components/notification-center) ([Markdown](https://wingo-ui.com/components/notification-center.md))
- [Badge](https://wingo-ui.com/components/badge) ([Markdown](https://wingo-ui.com/components/badge.md))
- [Animated Counter](https://wingo-ui.com/components/animated-counter) ([Markdown](https://wingo-ui.com/components/animated-counter.md))
- [Topbar](https://wingo-ui.com/components/topbar) ([Markdown](https://wingo-ui.com/components/topbar.md))
- [Toast](https://wingo-ui.com/components/toast) ([Markdown](https://wingo-ui.com/components/toast.md))

---

Canonical: https://wingo-ui.com/components/notification-bell
More components: https://wingo-ui.com/components · Index for agents: https://wingo-ui.com/llms.txt