# Notification bell
> Pixel notification bell that swings with a lagging clapper and pops its badge on new items; clicking it clears the badge in a spray of pixels.
- Element: `<px-bell>`
- React: `import { PxBell } from "@/components/lumesec/px-bell"`
- Collection: Pixel Lab (https://elements.lumesec.ai/components/pixel-lab)
- Registry item: https://elements.lumesec.ai/r/px-bell.json
- Page: https://elements.lumesec.ai/components/pixel-lab/bell



Live preview: https://elements.lumesec.ai/view/px-bell

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-bell.js"></script>

<px-bell count="2"></px-bell>
```

## Playground

Change a prop and the component updates. Props marked live animate to the new value; the others rebuild the element.

## Installation

```bash
npx shadcn@latest add @lumesec/px-bell
```

First time with the @lumesec registry? Register it once, or install by URL:

```bash
npx shadcn@latest registry add @lumesec=https://elements.lumesec.ai/r/{name}.json
npx shadcn@latest add https://elements.lumesec.ai/r/px-bell.json
```

## Usage

React:

```tsx
import { PxBell } from "@/components/lumesec/px-bell";

export function Example() {
  return (
    <PxBell count={2} />
  );
}
```

HTML:

```html
<script type="module" src="https://elements.lumesec.ai/cdn/px-bell.js"></script>

<px-bell count="2"></px-bell>
```

## Behaviour

A new notification swings the bell on its pivot with a lagging clapper, sends sound waves out both sides and pops the badge. Clicking the bell clears it in a spray of pixels.

## API reference

### Attributes

| Attribute | React prop | Type     | Default | Description                                        |
| --------- | ---------- | -------- | ------- | -------------------------------------------------- |
| `count`   | `count`    | `number` | `2`     | Starting unread count. Read once on first connect. |

### Events

Events bubble and cross the shadow boundary unless the description says otherwise.

| Event    | React prop | Detail               | Description                                                          |
| -------- | ---------- | -------------------- | -------------------------------------------------------------------- |
| `notify` | `onNotify` | `{ unread: number }` | Fires on each new notification with the new unread count.            |
| `read`   | `onRead`   | `{}`                 | Fires when the bell is clicked while there are unread notifications. |

### Methods

Call them on the element, for example through a React ref.

| Method       | Description                                                                             |
| ------------ | --------------------------------------------------------------------------------------- |
| `notify()`   | Adds one unread notification, rings the bell and fires `notify`.                        |
| `clearAll()` | Marks everything as read and fires `read`. Does nothing when the count is already zero. |

## Accessibility

* The bell is a native button with `aria-label="Notifications. Click to mark all as read."`; the label does not include the count.
* The "N unread" / "All caught up" text is an `aria-live="polite"` region.
* "Notify" is a native button.
* Reduced motion: the bell and clapper do not swing and the clearing sparks are skipped; the sound waves and badge pop still play.

## Theming

The element reads your shadcn theme tokens through its shadow root, so light and dark follow your theme. The accent comes from `--lumesec`. See [Theming](/docs/theming).

This component reads `--foreground` and `--lumesec`.

To restyle only LumeSec elements, set the matching `--ui-*` overrides: `--ui-accent` and `--ui-fg`.

## Notes

* The badge count is drawn in the monospace font and shows `9+` above nine. The bell canvas is a fixed 180 by 116px.