Alert
A callout for displaying important information.
Preview
Installation
Usage
import {
Alert,
AlertContent,
AlertTitle,
AlertDescription,
AlertIcon,
} from "@/components/ui/alert"<Alert variant="lighter" status="information">
<AlertIcon>
<Icon />
</AlertIcon>
<AlertContent>
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components to your app using the CLI.
</AlertDescription>
</AlertContent>
</Alert>API Reference
Alert
Root container for the alert. Custom component, not a Base UI wrapper.
AlertContent
Container for alert content. Renders as a styled div.
AlertTitle
Title text for the alert. Renders as a styled div.
AlertDescription
Description text for the alert. Renders as a styled div.
AlertIcon
Container for the alert icon. Renders as a styled div.
AlertClose
Close button with built-in icon. Uses Button component internally.