Notification Center

A panel for displaying and managing in-app notifications.

Preview · Notification Center

Code

HTML · @primus/ui-core

<div class="card" style="max-width:320px;padding:0">
  <div style="display:flex;align-items:center;justify-content:space-between;padding:0.875rem 1rem;border-bottom:1px solid var(--border)">
    <span style="font-weight:600;font-size:0.875rem">Notifications</span>
    <span class="badge">3</span>
  </div>
  <div>
    <div style="padding:0.875rem 1rem;border-bottom:1px solid var(--border);display:flex;gap:0.75rem">
      <div style="width:8px;height:8px;border-radius:50%;background:var(--primary);margin-top:6px;flex-shrink:0"></div>
      <div><p style="margin:0;font-size:0.875rem;font-weight:500">Acme Corp subscription renewed</p><p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">2 min ago</p></div>
    </div>
    <div style="padding:0.875rem 1rem;display:flex;gap:0.75rem">
      <div style="width:8px;height:8px;border-radius:50%;background:var(--warning);margin-top:6px;flex-shrink:0"></div>
      <div><p style="margin:0;font-size:0.875rem;font-weight:500">Rate limit warning — Globex</p><p style="margin:0;font-size:0.75rem;color:var(--muted-foreground)">15 min ago</p></div>
    </div>
  </div>
</div>

React

import { PrimusNotificationCenter } from '@/components/ui/primus-notification-center';

const notifications = [
  {
    id: '1',
    title: 'Subscription renewed',
    message: 'Acme Corp subscription has been renewed.',
    type: 'success',
    timestamp: new Date().toISOString(),
    read: false,
  },
  {
    id: '2',
    title: 'Rate limit warning',
    message: 'Globex is approaching the API rate limit.',
    type: 'warning',
    timestamp: new Date().toISOString(),
    read: true,
  },
];

<PrimusNotificationCenter
  notifications={notifications}
  onMarkAllRead={() => console.log('Marked all read')}
/>

Angular

<primus-notification-center [apiUrl]="'https://api.yourdomain.com'"
  [pollInterval]="3000" theme="dark">
</primus-notification-center>

Props

Prop	Type	Default	Description
notifications	Notification[]	required	List of notifications to display
onNotificationClick	(n: Notification) => void	—	Called when a notification is clicked
onMarkAllRead	() => void	—	Called when "Mark all read" is triggered
onClearAll	() => void	—	Called when "Clear all" is triggered

TypeScript interfaces

interface Notification {
  id:        string;
  title:     string;
  message:   string;
  type:      'info' | 'success' | 'warning' | 'error';
  timestamp: string;   // ISO 8601
  read:      boolean;
  action?:   { label: string; href: string };
}

Version history

See the Changelog for version history and breaking changes.