Alert Dialog

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

API Reference

Preview

Installation

Usage

import {
  AlertDialog,
  AlertDialogTrigger,
  AlertDialogClose,
  AlertDialogContent,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogDescription,
  AlertDialogFooter,
} from "@/components/ui/alert-dialog"
<AlertDialog>
  <AlertDialogTrigger
    render={
      <Button>Delete Account</Button>
    }
  />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <Button>Delete Account</Button>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

API Reference

AlertDialog

Root component. Alias for AlertDialog.Root from Base UI.

See Base UI docs.

AlertDialogTrigger

Trigger button that opens the alert dialog. Alias for AlertDialog.Trigger from Base UI.

AlertDialogContent

Popup container that displays the alert dialog content.

AlertDialogHeader

Container for the alert dialog title and description. Renders as a styled div.

AlertDialogFooter

Footer section for action buttons. Renders as a styled div.

AlertDialogTitle

Title component. Alias for AlertDialog.Title from Base UI.

AlertDialogDescription

Description component. Alias for AlertDialog.Description from Base UI.

AlertDialogClose

Close button component. Alias for AlertDialog.Close from Base UI.

AlertDialogPortal

Portal component for rendering outside the DOM hierarchy. Alias for AlertDialog.Portal from Base UI.

AlertDialogOverlay

Backdrop/overlay component. Alias for AlertDialog.Backdrop from Base UI.

Examples

Without Close Button

Sign Out Confirmation