Alert

A composable alert component for displaying contextual feedback messages. Supports default and destructive variants, optional icons, and an action slot for dismiss buttons or links.

Heads up!

You can add components to your app using the CLI.

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

export default function AlertDemo() {
  return (
    <Alert>
      <InfoIcon />
      <AlertTitle>Heads up!</AlertTitle>
      <AlertDescription>
        You can add components to your app using the CLI.
      </AlertDescription>
    </Alert>
  )
}

Anatomy

import {
  Alert,
  AlertTitle,
  AlertDescription,
  AlertAction,
} from "@/components/ui/alert"

<Alert>
  <AlertTitle>Heads up!</AlertTitle>
  <AlertDescription>
    You can add components to your app using the CLI.
  </AlertDescription>
</Alert>

Examples

Basic alert

<Alert>
  <AlertTitle>Note</AlertTitle>
  <AlertDescription>This is a default alert with a title and description.</AlertDescription>
</Alert>

With icon

Place an SVG icon as a direct child of Alert to enable the two-column grid layout.

<Alert>
  <InfoIcon />
  <AlertTitle>Information</AlertTitle>
  <AlertDescription>
    Icons are automatically placed in the first column and span both rows.
  </AlertDescription>
</Alert>

Destructive variant

Use variant="destructive" for error or warning states.

<Alert variant="destructive">
  <CircleAlertIcon />
  <AlertTitle>Error</AlertTitle>
  <AlertDescription>Something went wrong. Please try again later.</AlertDescription>
</Alert>

With action

Use AlertAction to render a dismiss button or link in the top-right corner of the alert.

<Alert>
  <AlertTitle>Update available</AlertTitle>
  <AlertDescription>A new version is available.</AlertDescription>
  <AlertAction>
    <Button variant="outline" size="sm">Update</Button>
  </AlertAction>
</Alert>

API Reference

Alert

The root wrapper. Renders a <div> with role="alert".

Prop	Type	Default	Description
`variant`	`"default" \| "destructive"`	`"default"`	The visual style of the alert.
`className`	`string`	—
`children`	`ReactNode`	—

AlertTitle

The alert heading. Rendered as a <div> with medium font weight.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

AlertDescription

The alert body text. Rendered as a <div> with muted foreground color.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

AlertAction

An absolutely positioned container in the top-right corner for action elements like buttons.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—