Notification Center

Notification bell, list, and item display

SaaSNotifications

Overview

NotificationCenter provides a dropdown panel triggered by a notification bell icon with unread count badge. It displays a scrollable list of notifications with variant-based styling (info, success, warning, destructive), read/unread states, and actions for marking as read and deleting. Supports loading and error states.

Usage

import { NotificationCenter } from '@leanicon/web-builder-library/saas'

;<NotificationCenter
  notifications={[
    {
      id: '1',
      title: 'Deployment succeeded',
      description: 'v2.4.1 deployed.',
      variant: 'success',
      isRead: false,
      timestamp: new Date(),
      category: 'CI/CD',
    },
    {
      id: '2',
      title: 'Storage warning',
      description: '90% of quota used.',
      variant: 'warning',
      isRead: true,
      timestamp: new Date(),
      category: 'System',
    },
  ]}
  isOpen={true}
  onOpenChange={(open) => setOpen(open)}
  onNotificationClick={(n) => router.push(n.actionUrl)}
  onMarkAsRead={(id) => markRead(id)}
  onMarkAllAsRead={() => markAllRead()}
  onDelete={(id) => deleteNotification(id)}
  permissions={{ canDeleteNotifications: true, canMarkAsRead: true }}
/>

Variants

Default

Empty

Loading

With Error

Props

Name	Type	Default	Required	Description
`notifications`	`Notification<TMetadata>[]`	—	Yes	List of notifications to display
`isOpen`	`boolean`	—	Yes	Whether the panel is open
`onOpenChange`	`(open: boolean) => void`	—	Yes	Callback to toggle panel
`onNotificationClick`	`((notification: Notification<TMetadata>) => void)`	—	No	Callback when a notification is clicked
`onMarkAsRead`	`((id: string) => void)`	—	No	Callback to mark a notification as read
`onMarkAllAsRead`	`(() => void)`	—	No	Callback to mark all notifications as read
`onDelete`	`((id: string) => void)`	—	No	Callback to delete a notification
`isLoading`	`boolean`	`false`	No	Loading state
`error`	`string`	—	No	Error message to display
`permissions`	`NotificationCenterPermissions`	—	No	Permission flags
`trigger`	`ReactNode`	—	No	Custom trigger element (defaults to NotificationBell)
`portalContainer`	`HTMLElement \| null`	—	No	Element to mount the Radix Popover portal into. Defaults to `document.body`. Use this to scope the popover inside a parent container (e.g. a docs preview frame or a modal with its own portal root) instead of letting it render at the document root.
`className`	`string`	—	No	Additional CSS class names