NotificationCenter
Notification panel with trigger, groups, and items
Today
Item 1
Item 2
Earlier
Item 3
Accessibility
- Ensure the trigger, popup role, and focus return behavior all describe the same interaction model.
- Provide an obvious keyboard dismissal path and avoid putting essential actions in hover-only content.
- Choose live-region urgency carefully and do not make short-lived announcements the only source of important information.
- Keep the opening control labeled, ensure focus moves predictably on open and close, and expose the popup type truthfully.
Styled quick start
Copy this entrypoint first. It includes the imports required to get the component on screen.
svelte
<script lang="ts">
import '@dryui/ui/themes/default.css';
import '@dryui/ui/themes/dark.css';
import { NotificationCenter, Button } from '@dryui/ui';
</script>
<NotificationCenter.Root bind:items={notifications} bind:open={panelOpen}>
<NotificationCenter.Trigger>
{#snippet children({ unreadCount })}
<Button>Notifications ({unreadCount})</Button>
{/snippet}
</NotificationCenter.Trigger>
<NotificationCenter.Panel>
<NotificationCenter.Group label="Today">
<NotificationCenter.Item id="1" variant="info">New deployment complete</NotificationCenter.Item>
</NotificationCenter.Group>
</NotificationCenter.Panel>
</NotificationCenter.Root>Import options
Root package
ts
import { NotificationCenter } from '@dryui/ui'Per-component subpath
ts
import { NotificationCenter } from '@dryui/ui/notification-center'API
Props, CSS variables, and the public data attributes you can target when styling.
| Prop | Type | Description | Default | Required | Bindable |
|---|---|---|---|---|---|
NotificationCenter.Root | |||||
| items | import('./context.svelte.js').NotificationItem[] | — | $bindable<NotificationItem[]>([]) | — | ✓ |
| open | boolean | Whether the overlay or disclosure is currently open. | false | — | ✓ |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
NotificationCenter.Trigger | |||||
| children | Snippet<[{ unreadCount: number }]> | Content rendered inside the component. | — | ✓ | — |
NotificationCenter.Panel | |||||
| placement | toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end | — | 'bottom-end' | — | — |
| offset | number | — | 8 | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
NotificationCenter.Item | |||||
| id | string | Unique HTML id used for labels, aria relationships, or targeted styling. | — | ✓ | — |
| read | boolean | — | false | — | — |
| timestamp | Date | — | — | — | — |
| variant | infowarningcritical | Visual style preset for the component. | — | — | — |
| action | Snippet | — | — | — | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |
NotificationCenter.Group | |||||
| label | string | Visible label text shown for the control or item. | — | ✓ | — |
| children | Snippet | Content rendered inside the component. | — | ✓ | — |