Notification Feed

An inline feed for displaying a live stream of events.

Preview · Notification Feed

Code

HTML · @primus/ui-core
React
Angular

<div class="vstack" style="max-width:360px">
  <div class="hstack">
    <span style="font-size:0.75rem;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;color:var(--muted-foreground)">Live Feed</span>
    <span class="badge success" style="margin-inline-start:auto">● Live</span>
  </div>
  <div role="alert" data-variant="info" style="font-size:0.8rem">New tenant Acme Corp created — Enterprise plan</div>
  <div role="alert" data-variant="warning" style="font-size:0.8rem">Globex Inc approaching storage limit (87%)</div>
  <div role="alert" data-variant="success" style="font-size:0.8rem">Payment $12,000 processed for Initech</div>
</div>

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

<NotificationFeed apiUrl="https://api.yourdomain.com" userId="user-123" pollInterval={3000} />

<primus-notification-feed [apiUrl]="'https://api.yourdomain.com'"
  [userId]="currentUserId" [pollInterval]="3000">
</primus-notification-feed>

Props

Prop	Type	Default	Description
`apiUrl`	`string`	—	API base URL
`userId`	`string`	—	User ID

Version history

See the Changelog for version history and breaking changes.

Code​

Props​

Code

Props