Alert
Displays a brief, important message in a way that attracts the user's attention without interrupting the user's task.
Features
- Semantic HTML
- Accessible labeling
- Headless
- Action slot
- Dismissible
- Close button
- Cancel action
Installation
npm install @ariaui/alert
Examples
Each example below is its own playground with a snippet derived from the same JSX. Compose Root, optional leading media or icons, Title, Description, and Action when you need inline controls.
Success
Positive feedback with an icon beside Title and Description. Root exposes role="alert" for immediate screen reader announcements.
No preview output yet.
Warning
Use for non-blocking issues the user should notice without treating as a hard failure.
No preview output yet.
Error
Use for failures or blocking problems. Pair clear copy with recovery steps when possible.
No preview output yet.
With actions
Wrap secondary controls in Alert.Action (role="group") so they stay associated with the alert message.
No preview output yet.
Dismissible
Use the dismissible prop to allow users to close the alert. The Close component provides a dismiss button that removes the alert from the DOM.
No preview output yet.
Anatomy
import * as Alert from "@ariaui/alert";
export default function Example() {
return (
<Alert.Root>
<Alert.Title />
<Alert.Description />
<Alert.Action />
<Alert.Cancel />
<Alert.Close />
</Alert.Root>
);
}
API Reference
Root
Container for the alert. Renders a div with role="alert". Automatically generates and links IDs for Title and Description.
| Prop | Type | Default |
|---|---|---|
open | boolean | — |
defaultOpen | boolean | true |
onOpenChange | (open: boolean) => void | — |
dismissible | boolean | false |
| Attribute | Values |
|---|---|
| role | "alert" |
| aria-labelledby | Auto-generated ID referencing the Title element |
| aria-describedby | Auto-generated ID referencing the Description element |
| [data-dismissible] | Present when dismissible is true |
Title
Bold heading for the alert. Its id is auto-generated and linked via aria-labelledby on Root.
| Attribute | Values |
|---|---|
| id | Auto-generated (referenced by Root) |
Description
Body text of the alert. Its id is auto-generated and linked via aria-describedby on Root.
| Attribute | Values |
|---|---|
| id | Auto-generated (referenced by Root) |
Action
Container for action controls like buttons.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
| Attribute | Values |
|---|---|
| data-alert-action | Present on the action container (auto) |
Close
Dismiss button that closes the alert. Calls onOpenChange(false) when clicked.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
| Attribute | Values |
|---|---|
| data-alert-close | Present on the close button (auto) |
Cancel
Cancel action button within an Action group. Closes the alert without performing the action.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | false |
| Attribute | Values |
|---|---|
| data-alert-cancel | Present on the cancel button (auto) |
Accessibility
The Alert component implements the WAI-ARIA Alert pattern. The root container renders with role="alert", causing screen readers to announce the message immediately. The Title and Description are automatically linked via aria-labelledby and aria-describedby on the root.
Interruptive nature
Alerts are intended to attract attention without interrupting the user's task. Use role="alert" only for important and usually time-sensitive information. For messages that require user action before continuing, use the Alert Dialog component.