Alert
Highlights a short, important message inline
Category: display · WCAG 2.2-AA · notification, message, feedback
Variants
- default
- info
- success
- warning
- destructive
Props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'info' | 'success' | 'warning' | 'destructive' | default | Selects the visual style variant. |
title | string | — | Title text for the component. |
icon | ReactNode | — | Icon element rendered in the component. |
dismissible | boolean | false | When true, shows a control to dismiss the component. |
onDismiss | () => void | — | Called when the component is dismissed. |
action | { label: string; onClick: () => void } | — | Primary action shown in the component. |
Design tokens
--cascivo-color-info--cascivo-color-success--cascivo-color-warning--cascivo-color-destructive--cascivo-color-border--cascivo-radius-md
When to use
- Surfacing a persistent, contextual message inline within a view (warning, error, info, success)
- Communicating status that should stay visible until read or resolved
- Offering an inline recovery action tied to the message (action prop)
When not to use
- Transient confirmation that should auto-dismiss — use Toast
- Blocking the user for a decision — use Modal or AlertDialog
How to build an accessible Alert in React →
Examples
Info
<Alert variant="info" title="Heads up">Your trial ends soon.</Alert>Dismissible
<Alert variant="success" dismissible title="Saved">Changes saved.</Alert>Actionable
<Alert variant="warning" title="Update available" action={{ label: 'Update now', onClick: update }}>A new version is ready.</Alert>Related components
- Toast — Toast auto-dismisses and floats; Alert persists inline in the layout
- AlertDialog — Use AlertDialog when the message must block and demand a choice