Notification
NotificationBell
Button that shows an unread count badge and toggles the notification slide-over on click.
Notification
The Notification category provides a two-component notification system. XANotificationBell is the header trigger; XANotificationSlideover is the panel. Both components connect to the shared useXNotifications composable, so state (open/closed, read/unread counts, notification list) is automatically synchronized.
Components
<XANotificationBell />
A button that displays the configured bell icon. When there are unread notifications, a red badge with the unread count overlays the top-right corner (capped at 99+). Clicking calls notifications.toggle() from useXNotifications.
<!-- In your header -->
<XANotificationBell
icon="i-lucide-bell"
size="sm"
color="neutral"
variant="ghost"
:show-badge="true"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
icon | String | 'i-lucide-bell' | Icon name for the button |
color | String | 'neutral' | Button color |
variant | String | 'ghost' | Button variant |
size | String | 'sm' | Button size |
showBadge | Boolean | true | Show the unread count badge |
AI Context
component: XANotificationBell
package: "@xenterprises/nuxt-x-app"
category: Notification
use-when: >
Add XANotificationBell to the application header. It connects automatically
to useXNotifications — no additional wiring needed. Pair with
XANotificationSlideover at the layout root.