Alert
Inline feedback — communicates a status, error, or notice in the flow of the page.
<Alert> <AlertIcon /> <AlertTitle>Unable to connect to the server. Please try again.</AlertTitle> <AlertAction>Retry</AlertAction></Alert>Usage
Alert renders inline feedback in the flow of the page — under a form, at the top of a panel, or near the content it refers to. For floating notifications use Toaster / toast instead.
import { Alert, AlertAction, AlertIcon, AlertTitle } from "@reva/ui";
<Alert>
<AlertIcon />
<AlertTitle>Incorrect login details.</AlertTitle>
</Alert>;Composition
Use the following composition to build an Alert :
Alert
├─ AlertIcon
├─ AlertTitle
└─ AlertAction (optional)AlertAction (and the dismiss button when dismissible) flow to the trailing edge.
Examples
Status
Pass the status prop to change the color and default icon. Alert supports destructive, warning, caution, constructive, info, and neutral statuses.
<Alert status="destructive"> <AlertIcon /> <AlertTitle>Unable to connect to the server.</AlertTitle> <AlertAction>Retry</AlertAction></Alert><Alert status="warning"> <AlertIcon /> <AlertTitle>Your subscription expires in 3 days.</AlertTitle> <AlertAction>Renew</AlertAction></Alert><Alert status="caution"> <AlertIcon /> <AlertTitle>Two pending invitations need a response.</AlertTitle> <AlertAction>Review</AlertAction></Alert><Alert status="constructive"> <AlertIcon /> <AlertTitle>Your changes have been saved.</AlertTitle> <AlertAction>View</AlertAction></Alert><Alert status="info"> <AlertIcon /> <AlertTitle>A new version is available.</AlertTitle> <AlertAction>Reload</AlertAction></Alert><Alert status="neutral"> <AlertIcon /> <AlertTitle>This workspace is read-only.</AlertTitle> <AlertAction>Manage</AlertAction></Alert>Basic
The minimal Alert — icon and title.
<Alert> <AlertIcon /> <AlertTitle>Incorrect login details.</AlertTitle></Alert>With action
Add AlertAction for a control like retry or undo.
<Alert status="warning"> <AlertIcon /> <AlertTitle>Connection unstable. Data may be stale.</AlertTitle> <AlertAction>Reconnect</AlertAction></Alert>Dismissible
Set dismissible to add a dismiss button. Pass onDismiss to handle the close.
<Alert status="constructive" dismissible> <AlertIcon /> <AlertTitle>Your changes have been saved.</AlertTitle></Alert>Dismissible with action
AlertAction and dismiss render side by side.
<Alert status="info" dismissible> <AlertIcon /> <AlertTitle>A new version is available.</AlertTitle> <AlertAction>Reload</AlertAction></Alert>Long message
Long titles wrap naturally — the alert grows to fit.
<Alert dismissible> <AlertIcon /> <AlertTitle> We couldn't reach the server to save your changes. Check your connection and try again — your edits are still here, nothing has been lost. </AlertTitle> <AlertAction>Retry</AlertAction></Alert>Custom icon
Pass any icon as AlertIcon children to override the default.
<Alert> <AlertIcon> <XCircle /> </AlertIcon> <AlertTitle>Your session has expired. Please sign in again.</AlertTitle></Alert>Accessibility
Alert defaults to role="alert" for assertive announcements. For softer statuses (info, constructive, caution, neutral), use role="status" so updates are announced politely.
The dismiss button has aria-label="Dismiss alert" built in. The exit animation respects prefers-reduced-motion.
Props
| Component | Prop | Type | Default | Description |
|---|---|---|---|---|
Alert | status | "neutral" | "info" | "constructive" | "caution" | "warning" | "destructive" | "destructive" | Sets the color and default icon. |
Alert | dismissible | boolean | false | Renders a dismiss button. |
Alert | onDismiss | () => void | — | Called when the alert is dismissed. |
Alert | asChild | boolean | false | Polymorphic root via Radix Slot. Honoured only when dismissible={false}. |
Alert | role | AriaRole | "alert" | Use "status" for polite announcements. |
AlertIcon | children | ReactNode | per-status glyph | Pass any icon to override the default. |
AlertAction | asChild | boolean | false | Polymorphic via Radix Slot — e.g. wrap a Next.js Link. |