AI Components / Notifications
Notifications
Notification inbox with date-bucketed grouping (Today / Yesterday / This week / Earlier), left-accent unread style, pulse on new arrivals, positive empty state, and SVG dismiss icons.
ai-productionv0.5.0
Playground
Examples
Inbox with all date buckets
<ai-notification-center style="max-width:420px;"></ai-notification-center>Empty inbox
<ai-notification-center style="max-width:420px;"></ai-notification-center>Import
import { AiNotificationCenter } from '@cognivo/components';// Or tree-shake: import '@cognivo/components/ai-notification-center';Per-component imports ship only that component (~8 kB gzip).
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
notifications | {id, title, message, type, timestamp, read?}[] | — | Notification list (timestamp = ms epoch or ISO string) |
max-visible | number | 50 | Max items rendered at once |
rounded | "none" | "sm" | "md" | "lg" | "full" | "lg" | Card border-radius variant |
Events
| Event | Detail | Description |
|---|---|---|
ai-notification-click | {id, notification} | Notification clicked |
ai-notification-dismiss | {id} | × clicked on a notification |
ai-notification-read-all | {} | "Mark all read" clicked |