Components
/
Alert
Alert
Displays a callout for user attention.
Success! Your changes have been saved
This is an alert with icon, title and description.
This Alert has a title and an icon. No description.
Unable to process your payment.
Please verify your billing information and try again.
Installation
npx shadcn@latest add https://ui.saturation.io/r/alert.jsonUsage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
export function AlertDemo() {
return (
<Alert>
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the CLI.
</AlertDescription>
</Alert>
)
}Examples
Default
Heads up!
You can add components and dependencies to your app using the CLI.
Destructive
Error
Your session has expired. Please log in again.
With List
Unable to process your payment.
Please verify your billing information and try again.
- Check your card details
- Ensure sufficient funds
- Verify billing address
With Avatar
CN
User has replied on the uploaded image.
12 unread messages. Tap to see.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "destructive" | "default" | The visual style of the alert |
Deploy your Saturation UI app
Build beautiful, saturated interfaces with our component library.
Deploy to Vercel for the best performance and developer experience.