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.

FYI

Maintenance window scheduled for 2026-04-25.
Show 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.
Show source
<Notification kind="global" status="info" title="Global banner">…</Notification>

Toast (kind="toast")

Floating notification with shadow + dark surface. Used for transient confirmations.

Toast notification

Appears over content. Auto-dismissable in practice.
Show 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
Show source
<Notification kind="snackbar" status="info"
  actions={<Button variant="link">Action</Button>}
  onDismiss={…}
>Snackbar message</Notification>

With actions and dismiss

Show source
<Notification status="warning" title="…" actions={<Button>Renew</Button>} onDismiss={…}>…</Notification>