Default
Success: Your changes are saved.
Show the codeHide the code
Default, code
<Alert tone="success">Your changes are saved.</Alert>Alert
A message about the page or a task: colour plus icon plus a hidden word, persistent until removed. Also the Banner and Callout.
- Free core, MIT
- Version 2.0.0-rc.1
- APG pattern: Status or alert live region
Examples
These are the real React components. Use them with a mouse, touch or keyboard, and switch the theme and density for every example at once.
Tones
Information: Scheduled maintenance
Sign-in is unavailable on Sunday from 02:00 to 03:00.
Success: Invite sent to tom@northwind.co.uk.
Warning: Card expires soon
Update your card before 30 November to keep your plan.
Error: Payment failed
We could not charge your card. Check the details and try again.
Note: Prices include VAT.
Show the codeHide the code
Tones, code
<div className="flex max-w-xl flex-col gap-stack-sm">
<Alert tone="info" live="none" title="Scheduled maintenance">Sign-in is unavailable on Sunday from 02:00 to 03:00.</Alert>
<Alert tone="success" live="none">Invite sent to tom@northwind.co.uk.</Alert>
<Alert tone="warning" live="none" title="Card expires soon">Update your card before 30 November to keep your plan.</Alert>
<Alert tone="danger" live="none" title="Payment failed">We could not charge your card. Check the details and try again.</Alert>
<Alert tone="neutral" live="none">Prices include VAT.</Alert>
</div>With actions and dismiss
Information: New: export to CSV
Download any table as a spreadsheet.
Show the codeHide the code
With actions and dismiss, code
function Dismissable() {
const [open, setOpen] = useState(true);
return open ? (
<Alert tone="info" title="New: export to CSV" onDismiss={() => setOpen(false)} actions={<Button variant="outline" size="sm">Try it</Button>}>
Download any table as a spreadsheet.
</Alert>
) : <p className="text-body-md text-fg">Dismissed.</p>;
}
<div className="max-w-xl"><Dismissable /></div>Banner
Warning: You are offline
Changes will sync when you reconnect.
Show the codeHide the code
Banner, code
<Alert variant="banner" tone="warning" live="none" title="You are offline">Changes will sync when you reconnect.</Alert>Tokens
The 17 design tokens Alert reads, with the value each has in the theme and density chosen above. Change a token and the component follows, in Figma and in code.
Show all 17 tokens
| Token | Value now | CSS variable |
|---|---|---|
| color.bg.danger-subtle | … | --sd-color-bg-danger-subtle |
| color.bg.info-subtle | … | --sd-color-bg-info-subtle |
| color.bg.subtle | … | --sd-color-bg-subtle |
| color.bg.success-subtle | … | --sd-color-bg-success-subtle |
| color.bg.warning-subtle | … | --sd-color-bg-warning-subtle |
| color.border.danger | … | --sd-color-border-danger |
| color.border.default | … | --sd-color-border-default |
| color.icon.danger | … | --sd-color-icon-danger |
| color.icon.default | … | --sd-color-icon-default |
| color.icon.info | … | --sd-color-icon-info |
| color.icon.success | … | --sd-color-icon-success |
| color.icon.warning | … | --sd-color-icon-warning |
| color.text.default | … | --sd-color-text-default |
| shape.radius-control | … | --sd-shape-radius-control |
| spacing.gap.sm | … | --sd-spacing-gap-sm |
| spacing.inset.md | … | --sd-spacing-inset-md |
| spacing.stack.xs | … | --sd-spacing-stack-xs |
Install
The npm package isn’t published yet. When it is, this is the install line; until then, this page runs the same build of the package (from commit fa3abf8).
Install
npm i @superduperui/react @superduperui/tokensImport
import { Alert } from "@superduperui/react"Props
Alert also takes the props of the React Aria component it’s built on.
| Prop | Type | What it does |
|---|---|---|
tone | 'info' | 'success' | 'warning' | 'danger' | 'neutral'Default 'info' | info, success, warning, danger or neutral. Colour plus icon plus a hidden word ("Warning:"), never colour alone. |
title | string | Optional bold first line. |
childrenrequired | ReactNode | The message. |
live | 'status' | 'alert' | 'none' | How it is announced when it appears: "status" (polite, default for info and success), "alert" (assertive; danger and warning default), or "none" for a callout that is on the page from the start. |
actions | ReactNode | Actions under the message (Buttons or Links). |
onDismiss | () => void | Show a 44px dismiss button; called when pressed. Alerts never dismiss themselves (2.2.4). |
variant | 'inline' | 'banner'Default 'inline' | banner: full width with no rounded corners, for the top of a page. Default inline. |
className | string |
When to use it
Use it for
- Form-level errors (focus it on submit)
- Page notices and banners
- Callouts in docs and settings (live="none")
Use something else for
- Short confirmations after an action: use Toast
- Field errors: use the field errorMessage
Accessibility
Screen readers announce "Error: Payment failed. We could not charge your card." (alert).
WCAG 2.2 AAA criteria the component meets in Comfortable density: 1.4.6, 1.4.9, 2.1.3, 2.3.2, 2.4.13, 2.5.5, 2.5.6.
Compact density meets AA (2.5.8, 24px targets), not AAA.
What your product still has to do
- Move focus to a danger alert after a failed submit
- Use live="none" for callouts present on load
Shared patterns it ships with: 2.2.4 (never auto-dismisses); 3.3.1 (danger alerts can take focus).
This release’s test results
| axe-core (WCAG A, AA, AAA and best practice) | 100 runs across every story, theme, density and width: 0 violations |
|---|---|
| Rendered text contrast | 245 text runs: 0 below 7:1, lowest 14.35:1 |
| Target size | 4 targets: 0 under 44px in Comfortable |
| Focus appearance (2.4.13) | 36 focus stops in 3 browser engines: all pass |
| Keyboard script | Chromium 3 of 3, Firefox 3 of 3, WebKit 3 of 3 |
Manual passes with VoiceOver and NVDA haven’t been done yet.
Keyboard
Each step is scripted and run in Chromium, Firefox and WebKit.
| Key | What happens |
|---|---|
| Tab | Tab reaches the action |
| Tab | Tab reaches Dismiss |
| Enter | Enter dismisses the alert |
In Figma
The Figma component is Alert, with Tone (Info, Success, Warning, Danger, Neutral); Variant (Inline, Banner). The Figma library isn’t published yet.
Figma to code: Tone → tone (Info = "info", Success = "success", Warning = "warning", Danger = "danger", Neutral = "neutral"); Variant → variant (Inline = "inline", Banner = "banner"); Title → title when Show title; Message → children; Show dismiss → onDismiss; nested Action → actions; nested Dismiss → onDismiss.