Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Demo

Usage

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/ui/alert-dialog"

export function AlertDialogDemo() {
  return (
    <AlertDialog>
      <AlertDialogTrigger asChild>
        <Button variant="outline">Open Alert Dialog</Button>
      </AlertDialogTrigger>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
          <AlertDialogDescription>
            This action cannot be undone. This will permanently delete your account
            and remove your data from our servers.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>Continue</AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

API Reference

AlertDialog

The root component that manages the dialog state.

PropsNone

AlertDialogTrigger

The element that triggers the dialog to open.

PropsasChild

AlertDialogContent

The content container for the dialog.

PropsStandard dialog props

AlertDialogHeader

Contains the title and description of the dialog.

PropsNone

AlertDialogTitle

The title of the dialog.

PropsasChild

AlertDialogDescription

The description of the dialog.

PropsasChild

AlertDialogFooter

Contains the action buttons for the dialog.

PropsNone

AlertDialogAction

The primary action button.

PropsasChild

AlertDialogCancel

The cancel/dismiss action button.

PropsasChild

Accessibility

Keyboard Navigation

  • • Tab: Move focus between interactive elements
  • • Enter/Space: Activate focused element
  • • Escape: Close dialog

Screen Reader Support

  • • Proper ARIA attributes for dialog role
  • • Focus management and restoration
  • • Descriptive labels and content
HUD · Page · Tree
All systems operational
HUD · Page · Tree