Alert

Inline message block for status, warnings and destructive confirmations. Soft surface, semantic color, no layout shift.

Preview

Live preview

Scheduled maintenance

The service restarts at 02:00 UTC.

Deployed

Build 4192 is live in production.

Payment failed

Update your card to keep the workspace active.

Usage

Examples

Status with an icon

New version available

Refresh the page to update.

<Alert variant="info" icon={<InfoIcon />}>
  <AlertTitle>New version available</AlertTitle>
  <AlertDescription>Refresh the page to update.</AlertDescription>
</Alert>

Compact, icon-only message

3 rows could not be imported.

<Alert size="sm" variant="warning">
  3 rows could not be imported.
</Alert>

Announced after an action

Could not save

Check your connection and try again.

const [failed, setFailed] = useState(false)
// ...
{failed && (
  <Alert role="alert" variant="destructive">
    <AlertTitle>Could not save</AlertTitle>
    <AlertDescription>Check your connection and try again.</AlertDescription>
  </Alert>
)}

Dismissible notice

Invitation pending

alex@acme.com has not accepted yet.

const [open, setOpen] = useState(true)
// ...
{open && (
  <Alert variant="info" onDismiss={() => setOpen(false)}>
    <AlertTitle>Invitation pending</AlertTitle>
    <AlertDescription>alex@acme.com has not accepted yet.</AlertDescription>
  </Alert>
)}

Reference

Props

Prop	Type	Default	Description
variant	"default" \| "brand" \| "info" \| "success" \| "warning" \| "destructive"	"default"	Status color of the block. Each variant pairs a soft surface with its text color.
size	"sm" \| "md" \| "lg"	"md"	Padding and type scale of the block.
icon	ReactNode	—	Leading visual. Rendered inside an aria-hidden wrapper.
role	string	—	Set role="alert" for messages that appear after an action so screen readers announce them.
onDismiss	() => void	—	Renders a close button in the trailing edge. Omit it for alerts that must stay until handled.
dismissLabel	string	"Dismiss"	Accessible name of the dismiss button.
className	string	—	Merged last, so you can override any variant class.

Accessibility

Static alerts render no implicit role, so a page full of them is not read out on load.
Add role="alert" (live region) only when the message appears in response to an action.
The icon wrapper is aria-hidden, so assistive tech reads only the title and description.
The dismiss button is a real <button> with aria-label ("Dismiss" by default) — keep dismissLabel short and specific.
Only wire onDismiss when dismissal is safe; a destructive-confirmation alert should have no close button.
Every variant pairs its soft surface with a foreground that meets WCAG AA (checked by scripts/check-contrast.ts).
Use AlertTitle as a heading (renders h5) so screen readers can navigate the message.