Notifications
Three surfaces for telling someone something: a page-level banner, a feed row, and an inline hint.
Scheduled maintenance tonight, 01:00–02:00 UTC.
Read moreYour card was declined. Update it to avoid interruption.
Which one
Announcement spans the page and interrupts — reserve it for things true of the whole app. NotificationItem is a row in a feed people choose to open. InlineHint sits next to the control it qualifies and never leaves. For transient confirmation of something the user just did, use a Toast instead; for a persistent state of the page itself, an Alert.
Notification rows
Passing description is what switches a simple row into the actionable card — there's no separate variant prop to keep in sync with it.
New lead assigned to you
Invoice paid
Review requested
Amara asked you to review “Q3 forecast”.
Inline hints
Changes apply to every member of this workspace.
Lowering the seat count removes the newest members first.
Announcement props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | string | The announcement text. | |
| variant | 'neutral' | 'urgent' | 'neutral' | Urgent drops the link — an urgent banner should carry one action, not a reading detour. |
| linkLabel / linkHref | string | Trailing link. Neutral variant only. | |
| onLinkClick | () => void | Handler if you're routing client-side instead of navigating. | |
| onDismiss | () => void | The dismiss button only renders when this is set. |
NotificationItem props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | What happened. | |
| icon | ReactNode | Leading icon element. | |
| timestamp | string | Pre-formatted time. Simple row only. | |
| read | boolean | false | Unread rows get a tinted background and a dot. Simple row only. |
| description | string | Its presence is what switches the row into the actionable card layout. | |
| actionLabel / onAction | string / () => void | Primary action on the card. | |
| onDismiss | () => void | Fires from both the header × and the footer Dismiss. | |
| dismissLabel | string | Label for that footer button. |
InlineHint props
| Prop | Type | Default | Description |
|---|---|---|---|
| message | string | The hint text. | |
| variant | 'neutral' | 'warning' | 'neutral' | Warning is for a consequence worth pausing over, not decoration. |