Alert
Inline feedback for persistent status messages. Supports all status variants, dismissible behavior, icon-only mode, and filled or subtle appearance (subtle uses a thin colored border with a thick left accent).
Status Variants (Filled)
Tip
You can drag columns to reorder them.
Saved
Your profile has been updated successfully.
Warning
Your session will expire in 5 minutes.
Error
Failed to save changes. Please try again.
Subtle Appearance
Info
Same spacing and icons, transparent background with a thin colored border and thick left accent.
Error
Connection failed. Check your network settings.
No Title
Your changes were saved.
This action cannot be undone.
Dismissible
New feature
We've added dark mode support. Try it from the settings menu.
Scheduled maintenance
The system will be offline Saturday 2am–4am EST.
Icon Only
Info
Saved
Warning
Error
Usage
Use Alerts for persistent, inline feedback that stays visible until the user dismisses it or the condition changes.
Alerts share the same status colors and icons as Toasts. Use filled (default) for prominent messages and subtle for a transparent background with a thin colored border and thick left accent.
Use iconOnly for minimal inline status. For temporary feedback, use Toast instead. For confirmations or critical decisions, use Alert Dialog.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| status | "info" | "success" | "warning" | "danger" | "info" | Status color and icon |
| appearance | "filled" | "subtle" | "filled" | Filled background or subtle (thin colored border + thick left) |
| title | ReactNode | — | Bold title text |
| dismissible | boolean | false | Renders a close button |
| onDismiss | () => void | — | Callback when dismissed |
| iconOnly | boolean | false | Compact inline mode with icon and short text |