Alert
Display important messages and notifications. Supports multiple variants with icons and full RTL support.
Preview
Heads up!
You can add components to your app using the cli.
Installation
Usage
Examples
Default
Heads up!
You can add components to your app using the cli.
tsx
Destructive
Error
Your session has expired. Please log in again.
tsx
Success
Success
Your changes have been saved successfully.
tsx
Warning
Warning
Your free trial will expire in 3 days.
tsx
Without Icon
Update Available
A new version of the application is available.
tsx
Props
| Name | Type | Default | Description |
|---|---|---|---|
variant | "default" | "destructive" | "success" | "warning" | "default" | Visual style variant of the alert |
Accessibility
ARIA Roles
The Alert component uses role="alert" to announce important messages to screen readers.
Semantic HTML
Uses semantic heading elements for titles to maintain proper document structure.
Color Independence
Icons and text provide information redundancy, not relying solely on color.
RTL Considerations
The Alert component is fully RTL-compatible using logical properties.
LTR (English)
System Update
A new system update is available.
RTL (العربية)
System Update
A new system update is available.