NotificationCenter

Dropdown notification panel with grouped notifications, read/unread state, and dismiss actions. Self-contained with trigger button and badge.

Installation
# Install @opencosmos/ui to use NotificationCenter
pnpm add @opencosmos/ui
Preview
Loading preview...
Customize
— Message shown when there are no notifications
— Maximum height of the notification list in pixels
Usage
Import
import { NotificationCenter } from '@opencosmos/ui';
Example
<NotificationCenter>
  Content
</NotificationCenter>
Eject
Copy this component into your project for full customization

API Reference

PropTypeDefaultDescription
emptyMessagetext"No notifications"Message shown when there are no notifications
maxHeighttext"400"Maximum height of the notification list in pixels

Accessibility

  • Trigger announces unread count to screen readers
  • Panel uses role="dialog" with aria-label
  • Notification list uses role="list" and role="listitem"
  • Dismiss/read buttons have descriptive aria-labels
  • Closes on Escape key

Examples

With Notifications
Empty

Code Examples

Basic Usage

Notification center with bell trigger and unread badge

import { NotificationCenter } from '@opencosmos/ui'

const notifications = [
  { id: '1', title: 'New message', timestamp: new Date(), read: false },
  { id: '2', title: 'Build completed', timestamp: new Date(), read: true },
]

<NotificationCenter
  notifications={notifications}
  onMarkRead={(id) => markAsRead(id)}
  onMarkAllRead={() => markAllRead()}
  onDismiss={(id) => dismiss(id)}
/>

With Actions

Notifications with inline action buttons

import { NotificationCenter } from '@opencosmos/ui'

<NotificationCenter
  notifications={[
    {
      id: '1',
      title: 'PR #42 approved',
      description: 'Your pull request was approved by @reviewer',
      timestamp: new Date(),
      action: { label: 'View PR', onClick: () => navigate('/pr/42') },
    },
  ]}
  onMarkRead={handleMarkRead}
  onDismiss={handleDismiss}
/>