Notification Center

A panel for displaying and managing in-app notifications.

Preview · Notification Center

Code

HTML · @primus/ui-core
React
Angular

<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>

import { PrimusNotificationCenter } from 'primus-react-ui';

<PrimusNotificationCenter apiUrl="https://api.yourdomain.com" pollInterval={3000} />

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

Props

Prop	Type	Default	Description
`apiUrl`	`string`	—	API base URL
`pollInterval`	`number`	`3000`	Polling ms

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props