Alert
Feedback
Contextual messaging with severity variants, dismissal, icons, and action button integration
Status Types
Your changes have been saved successfully!
Something went wrong. Please try again.
Please review before proceeding.
This is some helpful information.
Variants
Solid variant
Subtle variant
Left accent variant
Top accent variant
Outline variant
With Titles
Payment Successful
Your payment has been processed successfully. You will receive a confirmation email shortly.
Connection Failed
Unable to connect to the server. Please check your internet connection and try again.
Closeable Alerts
This alert can be dismissed.
Important Notice
Please read the terms and conditions before continuing.
Usage Guidelines
When to Use
- Important messages
- Form validation
- System status
Accessibility
- role=alert for important messages
- Dismissible alerts have close button
Performance
- Static content
- CSS-based close animation
Common Mistakes
- Using for temporary messages (use Toast)
- Auto-dismissing important alerts
Frequently Asked Questions
Alert is inline and persistent. Toast is temporary and appears as an overlay.
Yes, Alert supports an optional close button for dismissal.
Related Components
View allBackdrop
Backdrop overlay for modals with blur effects and click-to-close functionality
Progress
Progress indicator with determinate/indeterminate modes, labels, and variant system including gradients
Result
Full-page status displays for success, error, and HTTP status codes (404, 403, 500) with action buttons
Snackbar
Material-style snackbar notifications with auto-dismiss, action buttons, and positioning