Preview Updated 2026-05-10

NotificationCenter

Notification history panel with unread count, mark-all-read, and clear controls.

Basic usage

Each notification is structured data: { id, title, description?, tone?, timestamp?, read?, actionLabel? }. Unread items show a colored dot on the left.

<CfNotificationCenter
:items="items"
@item-action="onAction"
@mark-all-read="markAllRead"
@clear-all="clearAll"
/>

<CfNotificationCenter
items={items}
onItemAction={onAction}
onMarkAllRead={markAllRead}
onClearAll={clearAll}
/>

Empty state

When items: [], emptyText is shown; replace with custom copy as needed.

<CfNotificationCenter :items="[]" empty-text="You're all caught up" />

<CfNotificationCenter items={[]} emptyText="You're all caught up" />

API

Prop	Type	Default	Description
`items`	`NotificationItem[]`	—
`open`	`boolean`	`true`	Visibility
`showMarkAllRead` / `showClearAll`	`boolean`	`true`
`emptyText`	`string`	`'No notifications'`
`maxHeight`	`number \| string`	`480`	Scroll area height

Events: item-click / item-action / mark-all-read / clear-all / close.