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.
Use Cases
System status messages
Form validation summaries
Feature announcements
Important notices that persist
Best Practices
Do
- ✓ Use appropriate variants (info, success, warning, destructive)
- ✓ Keep alert text concise and actionable
- ✓ Include a dismiss option for non-critical alerts
Don't
- ✗ Don't use for transient messages — use Toast instead
- ✗ Don't stack too many alerts on one page
- ✗ Don't use destructive variant for non-critical information