Alert
Displays a callout for user attention.
Payment successful
Your payment of $29.99 has been processed. A receipt has been sent to your email address.
New feature available
We've added dark mode support. You can enable it in your account settings.
Installation
Usage
<Alert>
<Icons.Info />
<Alert.Title> {"Heads up!"->React.string} </Alert.Title>
<Alert.Description>
{"You can add components and dependencies to your app using the cli."->React.string}
</Alert.Description>
</Alert>Examples
Basic
A basic alert with an icon, title and description.
Account updated successfully
Your profile information has been saved. Changes will be reflected immediately.
Destructive
Use variant=Destructive to create a destructive alert.
Payment failed
Your payment could not be processed. Please check your payment method and try again.
Action
Use Alert.Action to add a button or other action element to the alert.
Dark mode is now available
Enable it under your profile settings to get started.
Custom Colors
You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.
Your subscription will expire in 3 days.
Renew now to avoid service interruption or upgrade to a paid plan to continue using the service.
API Reference
Alert
The Alert component displays a callout for user attention.
AlertTitle
The AlertTitle component displays the title of the alert.
AlertDescription
The AlertDescription component displays the description or content of the alert.
AlertAction
The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.