Alert
Contextual feedback messages for user actions.
FeedbackTailwind CSS
Overview
Alerts provide contextual feedback messages for typical user actions with semantic variants.
When to use
- To display important information
- To show success, warning, or error messages
- When the user needs to be aware of something
Preview
Information
A new software update is available.
Success
Your changes have been saved.
Warning
Your trial expires in 3 days.
Error
There was an error processing your request.
Usage
html
<!-- Tailwind CSS pattern - copy the HTML/classes below -->Class Variations
Swap these Tailwind classes to change the pattern's appearance:
Variants
| Variation | Tailwind Classes |
|---|---|
| Info | bg-info border border-info-border text-info-foreground |
| Success | bg-success border border-success-border text-success-foreground |
| Warning | bg-warning border border-warning-border text-warning-foreground |
| Error | bg-error border border-error-border text-error-foreground |
Guidelines
No specific guidelines documented for this component yet.
Examples
Variants
Information
A new software update is available.
Success
Your changes have been saved.
Warning
Your trial expires in 3 days.
Error
There was an error processing your request.