Alert
Alert banners for displaying informational, success, warning, and error messages. Each variant uses distinct color coding for quick visual identification.
Variants
Preview
Information
System update available.
Success
Mission completed successfully.
Warning
Security clearance expiring.
Error
Connection lost to headquarters.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "info" | "success" | "warning" | "destructive" | "default" | Visual style variant of the alert. |
| title | string | - | Bold title displayed at the top of the alert. |
| icon | ReactNode | - | Optional icon displayed on the left side of the alert. |
| className | string | - | Additional CSS classes. |
Accessibility
- Renders with
role="alert"for screen reader announcements - The
destructivevariant usesaria-live="assertive"for immediate announcement - Other variants use
aria-live="polite"for non-intrusive announcements - Supports
refforwarding for DOM access - Passes through all standard HTML attributes including
aria-*androle