<NotificationBell/> component
<NotificationBell /> is the compact header trigger for unread notifications. It reads the unread count, shows the badge when needed, and opens the notification popover.
Usage
The following example shows a basic usage of <NotificationBell />.
export default function Header() { return ( <header className="flex items-center justify-end gap-3 border-b border-border px-6 py-4"> <NotificationBell /> </header> );}Behavior
The bell reads the unread count for the selected scope and toggles the popover open and closed from the same trigger.
The badge is hidden when there are no unread items, and it collapses to a dot when the unread count is small.
Scope
The scope determines which unread bucket the bell reads from. The same trigger can represent all notifications, user notifications, organization notifications, or workspace notifications.