Alert
View on shadcn/uiDisplays a callout for user attention.
Important update
Your session will expire in 5 minutes due to inactivity. Please save your work to avoid losing any changes.
System error detected
Critical issues were encountered 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://dev.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" |
Changelog
- 6 July 2026: darkened border on "default" variant for better contrast
- 23 June 2026: lightened alert borders
- 3 March 2026: updated the svg colour