Alert

A flexible and accessible alert component for displaying messages with titles, descriptions, and dynamic ARIA roles.

alert

Installation

The Alert component is ideal for displaying notifications, warnings, or error messages in an accessible and customizable way.

Add the component quickly with:

npx axionjs-ui add alert

Props

The Alert component and its subcomponents (AlertTitle and AlertDescription) offer extensive customization. Here’s a breakdown of their props:

Alert Props

Prop	Type	Default
`variant`	`"default" \| "destructive"`	`"default"`
`role`	`"alert" \| "status"`	`"status" for default, "alert" for destructive`
`aria-live`	`"polite" \| "assertive"`	`"polite" for default, "assertive" for destructive`
`className`	`string`	-
`children`	`React.ReactNode`	-

AlertTitle Props

Prop	Type	Default
`className`	`string`	-
`children`	`React.ReactNode`	-

AlertDescription Props

Prop	Type	Default
`className`	`string`	-
`children`	`React.ReactNode`	-

Features

The Alert component provides the following features:

Dynamic Variants:
- Use default for general notifications or destructive for critical errors.
Accessibility-First Design:
- Built-in ARIA roles and attributes for screen reader compatibility.
Customizable Content:
- Easily combine titles, descriptions, and icons to create meaningful alerts.
Interactive Feedback:
- Alerts dynamically announce updates with aria-live and aria-atomic attributes.
Flexible Layout:
- Supports any combination of content, including custom children.

Use Cases

The Alert component can be used in various scenarios:

Informational Messages:
- Notify users about updates, reminders, or tips.
Error Handling:
- Display errors or warnings in forms, modals, or pages.
Critical Updates:
- Announce system-critical issues with destructive alerts.
Real-Time Feedback:
- Use with APIs to display loading or success messages dynamically.

Accessibility

The Alert component adheres to best practices for accessibility:

Roles and Live Regions:
- Uses role="alert" and aria-live="assertive" for destructive alerts, ensuring immediate attention.
Atomic Announcements:
- Ensures the entire alert is read as a single unit with aria-atomic="true".
Keyboard Support:
- Fully navigable for seamless interaction in any environment.

The Alert component is a powerful, accessible, and customizable tool for managing user notifications. Its flexibility and built-in accessibility features make it an essential component for modern applications.