Alert Dialog

from

Installation

Usage

<AlertDialog>
  <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
  <AlertDialogPortal>
    <AlertDialogBackdrop />
    <AlertDialogPopup>
      <AlertDialogHeader>
        <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
        <AlertDialogDescription>
          Alert Dialog Description
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogClose render={<button>Cancel</button>} />
        <button>Continue</button>
      </AlertDialogFooter>
    </AlertDialogPopup>
  </AlertDialogPortal>
</AlertDialog>

API Reference

The keepMounted property is not supported in the AlertDialogPortal component, as it is used for animation.

AlertDialogOverlay

Base UI API Reference - AlertDialog.Backdrop

Prop	Type	Default
`transition?`	`Transition`	`{ duration: 0.2, ease: 'easeInOut' }`
`...props?`	`HTMLMotionProps<"div">`	-

The render property is not supported in the AlertDialogBackdrop component, as it is used for animation.

AlertDialogPopup

Base UI API Reference - AlertDialog.Popup

Prop	Type	Default
`from?`	`'top' \| 'bottom' \| 'left' \| 'right'`	`top`
`transition?`	`Transition`	`{ type: 'spring', stiffness: 150, damping: 25 }`
`...props?`	`HTMLMotionProps<"div">`	-

The render property is not supported in the AlertDialogPopup component, as it is used for animation.

AlertDialogClose

Base UI API Reference - AlertDialog.Close

AlertDialogHeader

Prop	Type	Default
`...props?`	`React.ComponentProps<'div'>`	-

AlertDialogTitle

Base UI API Reference - AlertDialog.Title

AlertDialogDescription

Base UI API Reference - AlertDialog.Description

AlertDialogFooter

Prop	Type	Default
`...props?`	`React.ComponentProps<'div'>`	-

Credits

Base UI Alert Dialog

Alert Dialog

On this page