Alert
Feedback
AI
Alert banners for important messages, notifications, and feedback. Includes support for AI-generated insights with gradient styling.
Preview
Interactive alert examples
AI Insight
Based on your usage patterns, you prefer denser layouts during morning hours. Auto-adjustment is enabled.
Success
Your changes have been saved successfully.
Error
There was an error processing your request. Please try again.
Variants
All available alert styles
Default
A neutral alert for general information.
AI Insight
Gradient background for AI-generated content with Lightbulb icon.
Information
Blue-styled alert for informational messages.
Success
Green-styled alert for successful operations.
Warning
Amber-styled alert for warnings. Uses assertive aria-live.
Error
Red-styled alert for errors. Uses assertive aria-live.
AI Insights & Tips
Use the AI variant for contextual hints, smart suggestions, and inline help
AI Suggestion
This component adapts to user preferences automatically. Consider enabling auto-save for a smoother workflow.
Press Cmd+K to open the command palette for quick navigation.
Pro Tip
You can drag and drop items to reorder them in the list.
Without Title
Simple alerts with description only
You have 3 unread messages in your inbox.
File uploaded successfully.
Dismissible Alerts
Alerts with close button
New Update Available
Version 2.0 is now available. Click here to update.
Your trial expires in 3 days. Upgrade now to continue using premium features.
Props
Alert component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'default' | 'ai' | 'info' | 'success' | 'warning' | 'error' | 'default' | Visual style variant for the alert |
icon | React.ComponentType | — | Custom icon component to override the default variant icon |
onClose | () => void | — | Callback when the close button is clicked. If provided, shows a dismiss button. |
aria-live | 'polite' | 'assertive' | 'off' | Based on variant | Controls how screen readers announce the alert. Defaults to 'assertive' for error/warning, 'polite' for others. |
className | string | — | Additional CSS classes for custom styling |
Usage
Import and implementation example
import { Alert, AlertTitle, AlertDescription } from '@/components/ui/alert'
export default function Example() {
return (
<Alert variant="success">
<AlertTitle>Success</AlertTitle>
<AlertDescription>
Your changes have been saved.
</AlertDescription>
</Alert>
)
}Features
Built-in functionality
- 6 variants: AI, default, info, success, warning, and error styles
- AI variant: Gradient background with Lightbulb icon for AI-generated content
- Icon support: Default semantic icons per variant, or provide custom icons
- Dismissible: Optional close button with onClose callback
- Flexible content: Use with AlertTitle, AlertDescription, or both
- Dark mode: Full dark mode support with proper color contrast
- Screen reader support: Uses aria-live with intelligent defaults based on variant
Accessibility
ARIA support and keyboard navigation
ARIA Attributes
role="alert"aria-live (polite/assertive)aria-atomic="true"aria-label (on close button)Keyboard Navigation
| Key | Action |
|---|---|
| Tab | Move focus to the dismiss button |
| Enter / Space | Dismiss the alert (when focused on close button) |
Notes
- Error and warning variants use aria-live="assertive" by default for immediate announcement
- Info and success variants use aria-live="polite" to avoid interrupting the user
- The close button is labeled "Dismiss alert" for screen readers
- Decorative icons are hidden from screen readers with aria-hidden="true"