Notification

React full-width notification banner for system messages at the top of a page: semantic types, a bold lead, actions, and a dismiss button. RTL ready.

Open in Storybook ↗

Notification is the page-level banner for system messages. Set the type, add a bold lead, and pass onClose to make it dismissible.

When to use

Use Notification for messages that concern the whole page or service: planned downtime, a policy change, or an account issue that blocks progress. Place it above the page content, once, and keep the lead to a few words.

For a message tied to one section, use InlineAlert. For confirmations that fade, use NotificationToast.

Examples

Basic

Important:

Scheduled maintenance will take some services offline tonight from 1–3 AM.

Semantic types

Update:

A new version of the portal is available.

Done:

Your data export has finished and is ready to download.

Heads up:

Your subscription renews in 3 days.

Action needed:

Update your contact details to keep receiving service alerts.

With actions

Important:

Your service licence expires at the end of this month.

Learn more

Arabic (RTL)

تنبيه:

يرجى تحديث بياناتك للاستمرار في تلقّي إشعارات الخدمة.

Props

Props declared by Notification. Native attributes of the underlying element pass through.

Prop	Type	Description
`type`	`"neutral" \| "success" \| "warning" \| "info" \| "critical"`
`children`required	`react.ReactNode`	The message body - always present per SDGA (the one required content).
`lead`	`react.ReactNode`	Bold lead-in shown before the message, e.g. `"Important:"`.
`icon`	`react.ReactNode`	Featured leading icon. Pass `false` to hide it; defaults to the type's glyph.
`actions`	`react.ReactNode`	Trailing action row - compose `<Link tone="neutral">` and/or `<Button variant="black" size="md">` (the exact SDGA action variants).
`onClose`	`() => void`	Provide to render the trailing ✕ and make the banner dismissible.
`open`	`boolean`	Controlled visibility. Pair with `onClose` to own the state yourself.
`closeLabel`	`string`	Localized close-button label. Defaults to `"Dismiss"`.
`live`	`"polite" \| "assertive"`	Wire the banner into the a11y tree as a live region. `polite` (role=status) announces gracefully; `assertive` (role=alert) interrupts. Omit for static banners.

Accessibility

The banner uses role="alert" for error and warning types and role="status" for the rest, so screen readers announce it on arrival. Actions are real buttons or links and the dismiss control has an accessible name.

Keep the banner in the document flow so keyboard users encounter it before the content it affects.