Alerts
Contextual feedback messages for typical user actions with 5 color variants.
Alert Variants
Alerts come in five semantic variants: primary (info), success, warning, danger, and secondary.
Alert Variants
Info: This is a primary/info alert message.
Success! Your changes have been saved.
Warning: Please review your information.
Error: Something went wrong. Please try again.
Note: This is a secondary alert message.
Alert with Icon
Add icons to alerts for better visual communication.
Alerts with Icons
✓Success! Your profile has been updated.
✕Error! Failed to upload file.
Alert with Actions
Include action buttons or links within alerts.
Alert with Button
New update available!Version 2.0 is ready to install.
Dismissible Alerts
Add a close button to allow users to dismiss alerts.
Dismissible Alert
Warning: Your session will expire in 5 minutes.
Usage Guidelines
When to Use
- ✓ Show success confirmations
- ✓ Display error messages
- ✓ Warn users about important information
- ✓ Provide contextual help
When NOT to Use
- ✕ For form validation (use inline errors)
- ✕ For critical system failures (use modals)
- ✕ For permanent information (use cards)
- ✕ For multiple stacked messages (use toast)
Accessibility
Best Practices:- Use
role="alert" for important messages - Use
aria-live="polite" for non-critical alerts - Ensure sufficient color contrast (all variants meet WCAG AA)
- Don't rely solely on color to convey meaning
- Make close buttons keyboard accessible
