Display

NotificationBell

Bell button with an unread badge that opens a notification center, designed for app shell headers.

<script>
  import { NotificationBell } from "@codeatlasdev/ui";
</script>

<NotificationBell notifications={items} onRead={markRead} onReadAll={markAll} onClear={clear} />

The unread count is derived from notifications where read is falsy. The component is controlled: update your list in onRead, onReadAll and onClear. Every visible string can be replaced through labels. The panel is a popover layer anchored below the bell, aligned to its end edge, and closes on Escape or an outside press.

#132

Default

With notifications and with an empty list.

Reference #132 · Pick in the gallery

Code

<script lang="ts">
  import { NotificationBell, Flex } from '@codeatlasdev/ui';

  const items = [
    { id: '1', title: 'Deploy succeeded', body: 'prod-api-v2.4 is live', time: '2m ago', read: false },
    { id: '2', title: 'New comment', body: 'Ana replied on PR #142', time: '18m ago', read: false },
    { id: '3', title: 'Budget alert', body: '80% of monthly quota used', time: '1h ago', read: true },
  ];
</script>

<Flex gap="6" align="center">
  <NotificationBell notifications={items} />
  <NotificationBell notifications={[]} />
</Flex>

#131

Controlled

Mark items as read, mark all as read and clear the list.

Reference #131 · Pick in the gallery

Code

<script lang="ts">
  import { NotificationBell } from '@codeatlasdev/ui';

  let items = $state([
    { id: '1', title: 'Deploy succeeded', body: 'prod-api-v2.4 is live', time: '2m ago', read: false, variant: 'success' as const },
    { id: '2', title: 'New comment', body: 'Ana replied on PR #142', time: '18m ago', read: false },
    { id: '3', title: 'Budget alert', body: '80% of monthly quota used', time: '1h ago', read: true, variant: 'warning' as const },
  ]);
</script>

<NotificationBell
  notifications={items}
  onRead={(id) => (items = items.map((n) => (n.id === id ? { ...n, read: true } : n)))}
  onReadAll={() => (items = items.map((n) => ({ ...n, read: true })))}
  onClear={() => (items = [])}
/>

Props

Prop	Type	Default	Description
`notifications`	`NotificationItem[]`	`[]`	Items shown in the panel: `{ id, title, body?, time?, read?, variant? }`. `variant` is `'default' \| 'info' \| 'success' \| 'warning' \| 'error'`.
`onRead`	`(id: string) => void`	`undefined`	Called when an unread item is clicked. Items already read do not call it.
`onReadAll`	`() => void`	`undefined`	Called by the mark all as read action.
`onClear`	`() => void`	`undefined`	Called by the clear action.
`labels`	`{ title?, markAll?, clear?, empty? }`	`{}`	String overrides for i18n.
`class`	`string`	`''`	Extra class names.
`children`	`Snippet`	`undefined`	Custom trigger content.