Logobaseui-cn

Alert Dialog

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

overlayinteractive
Loading preview...

Installation

npx baseui-cn add alert-dialog

Usage

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogAction,
  AlertDialogCancel,
} from "@/components/ui/alert-dialog"
<AlertDialog>
  <AlertDialogTrigger>Delete account</AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction variant="destructive">Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Note: AlertDialog cannot be dismissed by clicking the backdrop. Use for destructive or irreversible actions only. Use Dialog for non-critical interactions.

Examples

Basic

A standard confirmation dialog.

Loading preview...

Destructive

A destructive confirmation with a warning tone.

Loading preview...

API

AlertDialogContent

PropTypeDefaultDescription
size"default" | "sm""default"Max-width of the dialog panel

AlertDialogCancel

Renders a Button. All Button props are accepted.

PropTypeDefaultDescription
variant"default" | "destructive" | "ghost" | "link" | "outline" | "secondary" | "warning""outline"Visual style variant
size"xs" | "sm" | "default" | "md" | "lg" | "xl" | "icon""default"Button size

API Reference

See the Base UI AlertDialog documentation for the full API reference, including all props, data attributes, and CSS classes.