Alert Dialog

A dialog that requires user response to proceed.

Made by imskyleen
Edit on GitHub
Open in

Installation

Usage

<AlertDialog>
  <AlertDialogTrigger>Open Dialog</AlertDialogTrigger>
  <AlertDialogPopup>
    <AlertDialogHeader>
      <AlertDialogTitle>Alert Dialog Title</AlertDialogTitle>
      <AlertDialogDescription>Alert Dialog Description</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Accept</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogPopup>
</AlertDialog>

API Reference

AlertDialog

Animate UI API Reference - Alert Dialog PrimitiveBase UI API Reference - AlertDialog.Root

AlertDialogTrigger

Animate UI API Reference - Dialog Trigger PrimitiveBase UI API Reference - AlertDialog.Trigger

AlertDialogPopup

Animate UI API Reference - Alert Dialog Popup PrimitiveBase UI API Reference - AlertDialog.Popup
PropTypeDefault
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.

AlertDialogAction

Animate UI API Reference - Alert Dialog Close PrimitiveBase UI API Reference - AlertDialog.Close

AlertDialogCancel

Animate UI API Reference - Alert Dialog Close PrimitiveBase UI API Reference - AlertDialog.Close

AlertDialogHeader

Animate UI API Reference - Alert Dialog Header Primitive
PropTypeDefault
...props?
React.ComponentProps<'div'>
-

AlertDialogTitle

Animate UI API Reference - Alert Dialog Title PrimitiveBase UI API Reference - AlertDialog.Title

AlertDialogDescription

Animate UI API Reference - Alert Dialog Description PrimitiveBase UI API Reference - AlertDialog.Description

AlertDialogFooter

Animate UI API Reference - Alert Dialog Footer Primitive
PropTypeDefault
...props?
React.ComponentProps<'div'>
-

Credits

Built by Skyleen. The source code is available on GitHub.

Last updated: 10/28/2025