Inline callout banner with semantic variants.
import { Alert, AlertTitle, AlertDescription } from "@cooud-ui/ui";
npx cooud-ui add alert
Generated from the component's exported types.
Extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof alertVariants>
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "info" | "success" | "warning" | "destructive" | "default" | — |
On this page
An inline callout with an icon, title, and description.
<Alert><Terminal aria-hidden="true" /><AlertTitle>Heads up!</AlertTitle><AlertDescription>You can add components to your app using the CLI.</AlertDescription></Alert>
Semantic variants tint the surface, border, and icon for each intent.
<div className="flex flex-col gap-4"><Alert variant="info"><Info aria-hidden="true" /><AlertTitle>New version available</AlertTitle><AlertDescription>A new release is ready to install.</AlertDescription></Alert><Alert variant="success"><CircleCheck aria-hidden="true" /><AlertTitle>Payment received</AlertTitle><AlertDescription>Your subscription is now active.</AlertDescription></Alert><Alert variant="warning"><TriangleAlert aria-hidden="true" /><AlertTitle>Storage almost full</AlertTitle><AlertDescription>You've used 92% of your quota.</AlertDescription></Alert><Alert variant="destructive"><CircleAlert aria-hidden="true" /><AlertTitle>Unable to save changes</AlertTitle><AlertDescription>Check your connection and try again.</AlertDescription></Alert></div>
Drop the icon and description for a compact, single-line callout.
<Alert variant="info"><AlertTitle>Your trial ends in 3 days.</AlertTitle></Alert>