NotificationBell
Bell trigger with an unread badge. Pair with InboxPanel inside a PopoverPanel.
Props
NotificationBell extends HTMLAttributes<HTMLButtonElement> and uses forwardRef so it can anchor a PopoverPanel.
| Prop | Type | Default | Description |
|---|---|---|---|
count | number | 0 | Number of unread notifications. |
max | number | 9 | Counts above this render as "9+". |
dot | boolean | — | Displays a dot instead of the unread count. |
Examples
No count
With count
Overflow
Dot only
Custom max
import { NotificationBell, PopoverPanel, InboxPanel } from "@solarius/onset";
<PopoverPanel
trigger={<NotificationBell count={unreadCount} />}
placement="bottom-end"
>
<InboxPanel items={notifications} onRead={markRead} onDismiss={dismiss} />
</PopoverPanel>;