NotificationBanner
Banner vs Toast. Use NotificationBanner for persistent, page-level
messages that describe the current state (e.g. a form submission error or a maintenance
warning). Use Toast for ephemeral confirmations of a completed action (e.g. “Report
saved”).
import { NotificationBanner } from '@eekodigital/raster';
<NotificationBanner variant="info" title="Scheduled maintenance">
The system will be unavailable on Saturday 29 March between 02:00 and 04:00.
</NotificationBanner>Success
Section titled “Success”<NotificationBanner variant="success" title="Application submitted">
Your application has been received and will be reviewed within 5 working days.
</NotificationBanner>Warning
Section titled “Warning”<NotificationBanner variant="warning" title="Action required">
You have 3 reports that are past their due date.
</NotificationBanner>Danger
Section titled “Danger”<NotificationBanner variant="danger" title="Submission failed">
There was a problem saving your changes. Please try again or contact support.
</NotificationBanner>Title only
Section titled “Title only”Omit children when a short heading is sufficient.
<NotificationBanner variant="success" title="Changes saved successfully" />Body only
Section titled “Body only”Omit title for a plain message without a heading.
<NotificationBanner variant="info" aria-label="Session expiry notice">
Your session will expire in 5 minutes.
</NotificationBanner>| Prop | Type | Default | Description |
|---|---|---|---|
variant | ’info’ | ‘success’ | ‘warning’ | ‘danger' | 'info’ | Controls the colour scheme and icon. |
title | string | — | Optional bold heading displayed above the body. |
children | ReactNode | — | Optional body content below the title. |
role | ’alert’ | ‘status’ | ‘region' | 'region’ | ARIA live region role. Use |