Alert

Displays a callout for user attention.

Radix UI Base UI

Payment successful

Your payment of $29.99 has been processed. A receipt has been sent to your email address.

Accordion Alert Dialog

On This Page

Installation Usage Examples Basic Destructive Action Custom Colors API Reference Alert AlertTitle AlertDescription AlertAction

Deploy your shadcn/ui app on Vercel

Trusted by OpenAI, Sonos, Adobe, and more.

Vercel provides tools and infrastructure to deploy apps and features at scale.


pnpm dlx shadcn@latest add alert

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>

Use variant="destructive" to create a destructive alert.

Use AlertAction to add a button or other action element to the alert.

You can customize the alert colors by adding custom classes such as bg-amber-50 dark:bg-amber-950 to the Alert component.

The Alert component displays a callout for user attention.

Prop	Type	Default
`variant`	`"default" \| "destructive"`	`"default"`

The AlertTitle component displays the title of the alert.

Prop	Type	Default
`className`	`string`	-

The AlertDescription component displays the description or content of the alert.

Prop	Type	Default
`className`	`string`	-

The AlertAction component displays an action element (like a button) positioned absolutely in the top-right corner of the alert.

Prop	Type	Default
`className`	`string`	-

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { CheckCircle2Icon, InfoIcon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { CheckCircle2Icon } from "lucide-react"

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertCircleIcon } from "lucide-react"

import {
  Alert,
  AlertAction,

import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
import { AlertTriangleIcon } from "lucide-react"