/// Feedback
Notification
A standalone tone-ruled notification card with an optional icon, loading state, action, and close button.
import { Notification } from "@protocore/pds";Basics
A tone, a mono UPPERCASE title, and sans body copy as children. The tone paints a 2px left rule and tints the leading icon.
Tones and icons
Each status tone sets the left rule. Add a leading icon to reinforce it — danger and warning are announced assertively, so the icon backs up an already-urgent message.
Loading, action, and close
Set loading to show a spinner in the icon slot for an in-flight task, pass an action for the one thing to do about it, and onClose (or withCloseButton) for a dismiss control.
When to use it
Notification is a *persistent* notification card you place in the layout — a feed item, an inbox row, an in-panel status card. It is the durable sibling of the Toast, which slides in, auto-dismisses, and disappears. If the message should stack in a corner and time out, use a Toast; if it lives in the page until the user deals with it, use a Notification.
It differs from a Banner (full-width, page- or section-level) by being a self-contained card you can render in a list, and from a Callout (a note in the reading flow) by being a status object with an icon, action, and dismiss.
Usage
Do
- Use it for durable, in-layout notifications the user resolves or dismisses.
- Give it a single, clear `action` when there's something to do.
- Use `loading` for an in-flight task, then swap to a tone on completion.
- Reserve `danger`/`warning` for urgent items; they announce assertively.
Don't
- For fleeting action confirmations, use a Toast.
- For a full-width page notice, use a Banner.
- Lead with one primary action, not several.
- Reserve urgent tones for urgent items, not routine information.
Accessibility
| Keys | Action |
|---|---|
| Tab | Reaches the action control, then the close (×) button, when present. |
| Enter / Space | Activates the focused action or close button. |
- The root is `role="status"` (polite) for `neutral`/`info`/`success`, and `role="alert"` (assertive) for `warning`/`danger`, matching the urgency of the tone.
- The title (mono UPPERCASE) and body (sans) carry the message; the tone rule and icon are reinforcement, never the sole signal.
- The leading `icon` and the loading spinner are decorative and `aria-hidden`.
- The dismiss control is the shared [CloseButton](/utilities/close-button) with an accessible label (`closeLabel`, default "Close").
Notification props
| Prop | Type | Default | Description |
|---|---|---|---|
action | ReactNode | — | Trailing action slot (e.g. a Button). |
children | ReactNode | — | Body copy (also accepted via `children`). |
className | string | — | |
closeLabel | string | Close | Accessible label for the close button. |
icon | ReactNode | — | Leading icon. Ignored while `loading`. |
loading | boolean | false | Show a spinner in the icon slot (e.g. an in-flight action). |
onClose | (() => void) | — | Called when the close button is activated; its presence also shows the button. |
style | CSSProperties | — | |
title | ReactNode | — | Mono UPPERCASE headline line. |
tone | enum | neutral | Status tone; drives the tint left rule and icon color. |
withCloseButton | boolean | false | Show a × close button. |