NotificationCenter

Bell-trigger dropdown listing notifications with unread count and mark-all actions.

NotificationCenter is a bell button that shows an unread-count badge and opens a floating panel listing your notifications (each needs an id and title, plus optional description, timestamp, unread, and onClick). It wires up mark-as-read, mark-all, clear, and see-all via the matching callbacks, sorts by timestamp, and shows an emptyState when there's nothing left. Drive the list from your own state and respond to the callbacks.

Example

Preview

import { NotificationCenter } from '@officina/ui';

<NotificationCenter
  notifications={[
    { id: '1', title: 'New comment', timestamp: new Date(), unread: true },
    { id: '2', title: 'Build passed', timestamp: new Date() },
  ]}
  onMarkRead={(id) => markRead(id)}
  onMarkAllRead={markAllRead}
  onSeeAll={() => navigate('/notifications')}
/>;

API

Prop	Type	Default	Description
notifications*	Notification[]	—	Notifications to display, newest first.
emptyState	ReactNode	—	Content rendered when there are no notifications.
label	string	Notifications	Accessible label for the panel/trigger.
maxVisible	number	8	Maximum number of items shown before scrolling.
onClear	() => void	—	Called when the clear-all action is pressed.
onMarkAllRead	() => void	—	Called when "mark all as read" is pressed.
onMarkRead	(id: string) => void	—	Called with an id when a single item is marked read.
onSeeAll	() => void	—	Called when the "see all" footer link is pressed.

Example

API

On this page