Alert
A compound alert component for surfacing inline feedback messages with an optional title, description, icon slot, and action button.
Default
New update available
Version 2.4.0 is ready to install. Restart the application to apply changes.
No Icon
Maintenance window tonight from 11 PM – 1 AM UTC.
Your plan renews on June 30
Review your usage and adjust your plan before the billing date to avoid unexpected charges.
Account suspended
Your account has been suspended due to a policy violation. Contact support to appeal.
A new privacy policy is in effect as of May 1. By continuing you agree to the updated terms.
Variants
Default
This is the default alert style. Use it for neutral, informational messages.
Destructive
Something went wrong. This action cannot be undone.
Success
Your changes have been saved successfully.
Warning
Storage is almost full. Free up space to avoid disruptions.
With Action
Read-only mode
You are viewing a shared snapshot. Changes won't be saved.
Unsaved changes
You have uncommitted edits. Save before leaving this page.
Export failed
The file could not be generated. Try again or contact support.
With Icon
Verify your email
We sent a confirmation link to user@example.com. Check your inbox.
Notifications paused
You won't receive any alerts until you re-enable notifications in settings.
Two-factor authentication enabled
Your account is now protected by an additional verification step.
API key generated
Copy and store your key now — it won't be shown again.
Backup in progress
Your files are being uploaded. This may take a few minutes.
Session locked
Re-enter your password to continue.
With Link
Cookie preferences updated
Your settings have been saved. Read our Privacy Policy to learn how we use your data.
Setup required
Before you start, review the quick-start guide and configure your environment variables.
Credentials expired
Your access token has expired. Renew your credentials to restore access.
Installation
npx shadcn@latest add @byronwade/alertProps
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "default" | Controls the color style of the alert; use "destructive" for error or warning states. |
| className | string | — | Additional CSS class names merged onto the root element. |