Alert
View on shadcn/uiDisplays a callout for user attention with contextual information.
Important update
Your session will expire in 5 minutes due to inactivity. Please save your work to avoid losing any changes.
System error detected
We encountered critical issues while processing your request:
- Database connection timeout after 30 seconds
- Failed to validate authentication credentials
- Unable to retrieve user permissions from server
Installation
pnpm dlx shadcn@latest add https://designsystem.wfp.org/r/alert.jsonUsage
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert";<Alert>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the cli.
</AlertDescription>
</Alert>Examples
Variants
Default
Alert description here.
Information
Alert description here.
Error
Alert description here.
Warning
Alert description here.
Success
Alert description here.
API reference
Alert
Container for the alert message.
| Prop | Type |
|---|---|
variant | "default" | "destructive" |