docs / feedback / alert
Alert
1:1 with Callout — info (blue), warning (yellow), danger (red), tip (green), note (gray). Use variant.
[i] info // Heads up
Blue info — same as Callout type="info".
[!] warn // Careful
Yellow warning — same as Callout type="warning".
[*] tip // Tip
Green tip — same as Callout type="tip".
[!!] danger // Error
Red danger — same as Callout type="danger".
[#] note // Note
Gray note — default.
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
<Alert variant="info"><AlertTitle>Heads up</AlertTitle><AlertDescription>Info.</AlertDescription></Alert>
<Alert variant="warning"><AlertTitle>Careful</AlertTitle><AlertDescription>Warning.</AlertDescription></Alert>
<Alert variant="tip"><AlertTitle>Tip</AlertTitle><AlertDescription>Green tip.</AlertDescription></Alert>
<Alert variant="danger"><AlertTitle>Error</AlertTitle><AlertDescription>Danger.</AlertDescription></Alert>