Notification
Status messages aligned with J&J DS v1.2 (Figma 11983:149826/149797). Five statuses (info / success / warning / error / neutral) × four kinds (inline / global / toast / snackbar).
Statuses (inline)
Inline alert
Inline notifications provide contextual feedback near the relevant content.
Saved
Changes were persisted to the audit log.
Session expiring soon
Your session expires in 2 minutes.
Upload failed
The server returned a 500. Try again or contact support.
FYI
Maintenance window scheduled for 2026-04-25.
Show sourceHide source
<Notification status="info" title="Did you know?">…</Notification>Global banner (kind="global")
Page-wide banner. No rounded corners — sits flush at the top of a page or section.
Global banner
Global banner message goes here.
Global banner
Global banner message goes here.
Global banner
Global banner message goes here.
Global banner
Global banner message goes here.
Global banner
Global banner message goes here.
Show sourceHide source
<Notification kind="global" status="info" title="Global banner">…</Notification>Toast (kind="toast")
Floating notification with shadow + dark surface. Used for transient confirmations.
Show sourceHide source
<Notification kind="toast" status="info" title="Toast" onDismiss={…}>…</Notification>Snackbar (kind="snackbar")
Minimal dark bar — typically anchored to the bottom of the viewport. Pair with an inline action link + dismiss X.
Snackbar message goes here
Saved successfully
High latency detected
Upload failed — retrying
Show sourceHide source
<Notification kind="snackbar" status="info"
actions={<Button variant="link">Action</Button>}
onDismiss={…}
>Snackbar message</Notification>With actions and dismiss
Subscription ending soon
Your team subscription expires on 2026-05-01.
Show sourceHide source
<Notification status="warning" title="…" actions={<Button>Renew</Button>} onDismiss={…}>…</Notification>