Alert
Contextual feedback messages for status updates, warnings, and error states. Supports five severity variants.
Installation
$ npx shadcn@latest add alertPreview
Heads up
You can add components to your project.
Variants
Default
This is a default alert.
Success
Your changes have been saved.
Warning
Your session is expiring soon.
Error
Something went wrong.
Info
A new software update is available.
Usage (React/TSX)
import { Alert, AlertTitle, AlertDescription } from "@/components/ui/alert"
export default function StatusMessages() {
return (
<div className="space-y-4">
<Alert variant="success">
<AlertTitle>Compliance Passed</AlertTitle>
<AlertDescription>All checks completed successfully.</AlertDescription>
</Alert>
<Alert variant="destructive">
<AlertTitle>Sync Failed</AlertTitle>
<AlertDescription>Unable to reach the server.</AlertDescription>
</Alert>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| variant | "default" | "success" | "warning" | "destructive" | "info" | "default" | The visual style of the alert. |
| className | string | β | Additional CSS classes to apply. |
| children | ReactNode | β | Content inside the alert. |