Alert
Contextual feedback messages for user actions and system status.
Variants
Info, success, warning, and error alert styles.
Information
Your recipe has been saved as a draft.
Success
Recipe published successfully!
Warning
Some ingredients may not be available in your region.
Error
Failed to upload recipe image. Please try again.
Dismissible
Alert that can be dismissed by the user.
Tip
You can add up to 20 ingredients per recipe.
Without Title
Alerts with body text only, no title.
This is an informational message.
Operation completed.
Please review before submitting.
Something went wrong.
Sizes
Three sizes for different density contexts.
Compact — ideal for inline context.
Saved
Standard medium size alert.
Attention
More padding for prominent messages.
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "info" | "success" | "warning" | "error" | "info" | The visual style of the alert. |
size | "sm" | "md" | "lg" | "md" | Controls padding and icon size. |
title | string | — | Optional title displayed above the alert body. |
dismissible | boolean | false | Whether the alert can be dismissed. |
onDismiss | () => void | — | Callback fired when the dismiss button is clicked. |
icon | ReactNode | — | Override the default variant icon. |
visible | boolean | true | Controls visibility with AnimatePresence exit animation. |
children | ReactNode | — | The alert body content. |
Related Components
Best Practices
✅ Do
- Use appropriate variants (success/warning/error/info)
- Keep messages concise
- Provide actionable guidance in error alerts
- Place alerts near the relevant context
❌ Don't
- Use alerts for permanent content
- Stack more than 3 alerts
- Use error variant for warnings
- Dismiss important alerts automatically
Accessibility
| Feature | Support |
|---|---|
| role="alert" | Applied for important messages |
| aria-live="polite" / "assertive" | Controls announcement priority for screen readers |
| Screen reader announcement | Alert content is announced when it appears |
| Not auto-dismissed for errors | Error alerts persist until user action |