AlertDialog

A modal confirmation surface for irreversible or destructive actions.

Preview#

Anatomy#

Use AlertDialog for destructive confirmation, irreversible changes, and typed-delete flows. Use Dialog for editable forms and non-destructive modal content.

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogBody,
  AlertDialogCancel,
  AlertDialogClose,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "raft-ui";

<AlertDialog>
  <AlertDialogTrigger />
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle />
      <AlertDialogClose />
    </AlertDialogHeader>
    <AlertDialogBody>
      <AlertDialogDescription />
    </AlertDialogBody>
    <AlertDialogFooter>
      <AlertDialogCancel />
      <AlertDialogAction />
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Usage#

Typed delete#

Confirm action#

API#WIP

AlertDialog#

...props
Base UI Dialog.Root.Props
Owns modal state for destructive or irreversible confirmation flows.

AlertDialogTrigger#

...props
Base UI Dialog.Trigger.Props
Opens the alert dialog. Compose a Button through render.

AlertDialogPortal#

container
HTMLElement | RefObject | null
Custom portal container for framed previews or contained overlays.
...props
Base UI Dialog.Portal.Props
Portals the alert dialog to the body or a custom container.

AlertDialogContent#

overlay
false | AlertDialogOverlayProps
Pass false for framed previews; otherwise renders the themed backdrop.
...props
Base UI Dialog.Popup.Props
Portaled centered alertdialog surface. Use className for one-off width changes.

AlertDialogOverlay#

...props
Base UI Dialog.Backdrop.Props
Backdrop behind the alert dialog while it is open.

AlertDialogHeader#

...props
ComponentPropsWithRef<"div">
Top region for the alert title and description.

AlertDialogBody#

...props
ComponentPropsWithRef<"div">
Main content area between header and actions.

AlertDialogTitle#

...props
Base UI Dialog.Title.Props
Accessible alert heading.

AlertDialogDescription#

...props
Base UI Dialog.Description.Props
Accessible supporting copy for the alert.

AlertDialogClose#

variant
Button variant
Button styling for the close control.
size
Button size
Button size for the close control.
...props
Base UI Dialog.Close.Props
Closes the alert dialog. Compose your own visual affordance with render/className.

AlertDialogAction#

...props
ButtonProps
The confirming action button.

AlertDialogCancel#

variantdefault: outline
Button variant
Button styling for the cancelling close action.
sizedefault: sm
Button size
Button size for the cancelling close action.
...props
Base UI Dialog.Close.Props
The cancelling close action.