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#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Root.Props	—	Owns modal state for destructive or irreversible confirmation flows.

AlertDialogTrigger#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Trigger.Props	—	Opens the alert dialog. Compose a Button through render.

AlertDialogPortal#

Prop	Type	Default	Description
`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#

Prop	Type	Default	Description
`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#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Backdrop.Props	—	Backdrop behind the alert dialog while it is open.

AlertDialogHeader#

Prop	Type	Default	Description
`...props`	ComponentPropsWithRef<"div">	—	Top region for the alert title and description.

AlertDialogBody#

Prop	Type	Default	Description
`...props`	ComponentPropsWithRef<"div">	—	Main content area between header and actions.

Prop	Type	Default	Description
`...props`	ComponentPropsWithRef<"div">	—	Bottom region for cancel and confirm actions.

AlertDialogTitle#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Title.Props	—	Accessible alert heading.

AlertDialogDescription#

Prop	Type	Default	Description
`...props`	Base UI Dialog.Description.Props	—	Accessible supporting copy for the alert.

AlertDialogClose#

Prop	Type	Default	Description
`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#

Prop	Type	Default	Description
`...props`	ButtonProps	—	The confirming action button.

AlertDialogCancel#

Prop	Type	Default	Description
`variant`	Button variant	outline	Button styling for the cancelling close action.
`size`	Button size	sm	Button size for the cancelling close action.
`...props`	Base UI Dialog.Close.Props	—	The cancelling close action.