Components
NotificationCard
Single notification row with title, icon, metadata, and unread indicator.
NotificationCard renders one notification as a self-contained <article> with
a title and optional description, leading icon (defaults to a bell),
trailing meta such as a timestamp, and actions. Set unread to add an
emphasis dot. Use it on its own or as the row inside a NotificationCenter
list.
Example
Preview
New invoice
Invoice #1024 is ready
2m ago
Deploy complete
Production build finished successfully
18m ago
import { NotificationCard } from '@officina/ui';
<NotificationCard
title="Deploy succeeded"
description="web-app shipped to production."
meta="2m ago"
unread
/>;API
| Prop | Type | Default | Description |
|---|---|---|---|
| actions | ReactNode | — | Action controls rendered in the card. |
| description | string | — | Body text. |
| icon | ReactNode | — | Leading icon or avatar. |
| meta | ReactNode | — | Trailing metadata such as a timestamp. |
| unread | boolean | — | Mark as unread (adds an emphasis indicator). |