`<NotificationPanel/>` component

<NotificationPanel /> is the full notification surface. It shows the inbox tabs, unread filter, bulk actions, and the notification list itself.

Usage

The following example shows a basic usage of <NotificationPanel />.

export default function NotificationsPage() {  return <NotificationPanel fullWidth />;}

Properties

All properties are optional unless otherwise noted.

›

scope?: NotificationListParams['scope'] | undefined;

Limits the notifications to a single scope or shows the aggregate inbox.

›

onAction?: (payload: any) => void | undefined;

Called when the panel emits an action from a notification CTA.

›

fullWidth?: boolean | undefined;

Expands the panel to fill the available width instead of using the compact popover width.

›

maxHeight?: string | undefined;

Controls the maximum panel height when you embed it in a fixed surface.

›

className?: string | undefined;

Optional class name for custom styling.

Behavior

The panel owns the inbox tabs, the unread filter, the settings menu, and the list actions. It is the full notification workspace, not just a list renderer.

It keeps the active tab and unread-only filter locally so the user can move around without losing the current view.

Tabs

The panel starts with inbox, archive, and starred tabs. The current tab controls the query used to fetch notification items.

The settings menu can toggle unread-only mode without changing the current scope.

Actions

The panel can mark notifications as read or unread, archive them, star them, and bulk-handle all unread items that match the current query.