Alert
A callout for displaying important information.
Heads up!
You can add components to your app using the CLI.
Installation
pnpm dlx shadcn@latest add @columbus/alertUsage
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { InfoIcon } from "lucide-react";
<Alert>
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the CLI.
</AlertDescription>
</Alert>;An icon placed first gets its own column, and the title and description line up next to it. The icon is optional.
Variants
New version available
Reload the page to update.
Changes saved
Your profile is up to date.
Trial ending soon
Your trial ends in three days.
Payment failed
Check your card details and try again.
Actions
Put buttons in AlertAction. On wide screens they sit on the right; on narrow
screens they wrap below the text.
Update available
Restart to install the new version.
Accessibility
Alert has role="alert", so screen readers announce it as soon as it
appears. For messages that aren't urgent, like a "Saved" confirmation, pass
role="status" so the announcement waits until the user is idle.
API reference
Alert, AlertTitle, AlertDescription, and AlertAction render a <div>
and accept every native <div> attribute.
Prop
Type