Alert Dialog

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

from

Installation

Usage

<AlertDialog>
  <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
  <AlertDialogPortal>
    <AlertDialogOverlay />
    <AlertDialogContent>
      <AlertDialogHeader>
        <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
        <AlertDialogDescription>
          Alert Dialog Description
        </AlertDialogDescription>
      </AlertDialogHeader>
      <AlertDialogFooter>
        <AlertDialogAction>Accept</AlertDialogAction>
        <AlertDialogClose>Close</AlertDialogClose>
      </AlertDialogFooter>
    </AlertDialogContent>
  </AlertDialogPortal>
</AlertDialog>

API Reference

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

AlertDialogOverlay

Radix UI API Reference - AlertDialog.Overlay

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

The asChild and forceMount properties are not supported in the AlertDialogOverlay component, as it is used for animation.

AlertDialogContent

Radix UI API Reference - AlertDialog.Content

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