Alert
Displays a callout for user attention.
Loading…
import { CheckCircle2Icon, InfoIcon } from "lucide-react";import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";export default function AlertDemo() { return ( <div className="grid w-full max-w-md items-start gap-4"> <Alert> <CheckCircle2Icon /> <AlertTitle>Payment successful</AlertTitle> <AlertDescription> Your payment of $29.99 has been processed. A receipt has been sent to your email address. </AlertDescription> </Alert> <Alert> <InfoIcon /> <AlertTitle>New feature available</AlertTitle> <AlertDescription> We've added dark mode support. You can enable it in your account settings. </AlertDescription> </Alert> </div> );}Installation
npx shadcn@latest add @cortexcn/alertCopy and paste the following code into your project.
import * as React from "react";import { cva, type VariantProps } from "class-variance-authority";import { cn } from "@/lib/utils";const alertVariants = cva( "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-data-[slot=alert-action]:pr-20 has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", { variants: { variant: { default: "bg-card text-card-foreground", destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current", }, }, defaultVariants: { variant: "default", }, },);function Alert({ className, variant, ...props}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) { return ( <div data-slot="alert" role="alert" className={cn(alertVariants({ variant }), className)} {...props} /> );}function AlertTitle({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="alert-title" className={cn( "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className, )} {...props} /> );}function AlertDescription({ className, ...props}: React.ComponentProps<"div">) { return ( <div data-slot="alert-description" className={cn( "col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className, )} {...props} /> );}function AlertAction({ className, ...props }: React.ComponentProps<"div">) { return ( <div data-slot="alert-action" className={cn( "absolute top-3 right-4 flex items-center gap-2", className, )} {...props} /> );}export { Alert, AlertTitle, AlertDescription, AlertAction };Update the import paths to match your project setup.
Usage
import {
Alert,
AlertAction,
AlertDescription,
AlertTitle,
} from "@/components/ui/alert";<Alert>
<InfoIcon />
<AlertTitle>Heads up!</AlertTitle>
<AlertDescription>
You can add components and dependencies to your app using the cli.
</AlertDescription>
<AlertAction>
<Button variant="outline">Enable</Button>
</AlertAction>
</Alert>Composition
Use the following composition to build an Alert:
Alert
├── Icon
├── AlertTitle
├── AlertDescription
└── AlertActionExamples
Basic
A basic alert with an icon, title and description.
Loading…
import { CheckCircle2Icon } from "lucide-react";import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";export default function AlertBasic() { return ( <Alert className="max-w-md"> <CheckCircle2Icon /> <AlertTitle>Account updated successfully</AlertTitle> <AlertDescription> Your profile information has been saved. Changes will be reflected immediately. </AlertDescription> </Alert> );}Destructive
Use variant="destructive" to create a destructive alert.
Loading…
import { AlertCircleIcon } from "lucide-react";import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";export default function AlertDestructive() { return ( <Alert variant="destructive" className="max-w-md"> <AlertCircleIcon /> <AlertTitle>Payment failed</AlertTitle> <AlertDescription> Your payment could not be processed. Please check your payment method and try again. </AlertDescription> </Alert> );}Action
Use AlertAction to add a button or other action element to the alert.
Loading…
import { Alert, AlertAction, AlertDescription, AlertTitle,} from "@/components/ui/alert";import { Button } from "@/components/ui/button";export default function AlertActionDemo() { return ( <Alert className="max-w-md"> <AlertTitle>Dark mode is now available</AlertTitle> <AlertDescription> Enable it under your profile settings to get started. </AlertDescription> <AlertAction> <Button size="xs" variant="default"> Enable </Button> </AlertAction> </Alert> );}API Reference
Alert
The Alert component displays a callout for user attention.
| Prop | Type | Default |
|---|---|---|
variant | "default" | "destructive" | "default" |
AlertTitle
The title of the alert.
AlertDescription
The description or content of the alert.
AlertAction
An action element (like a button) positioned in the top-right corner of the alert.