║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Alert Dialog description: A dialog that requires user response to proceed. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-16

<ComponentPreview name="demo-components-base-alert-dialog" />

Installation

<ComponentInstallation name="components-base-alert-dialog" />

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

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialog" text="Animate UI API Reference - Alert Dialog Primitive" />

<ExternalLink href="https://base-ui.com/react/components/alert-dialog#root" text="Base UI API Reference - AlertDialog.Root" />

</div>

AlertDialogTrigger

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogtrigger" text="Animate UI API Reference - Dialog Trigger Primitive" />

<ExternalLink href="https://base-ui.com/react/components/alert-dialog#trigger" text="Base UI API Reference - AlertDialog.Trigger" />

</div>

AlertDialogPopup

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogpopup" text="Animate UI API Reference - Alert Dialog Popup Primitive" />

<ExternalLink href="https://base-ui.com/react/components/alert-dialog#popup" text="Base UI API Reference - AlertDialog.Popup" />

</div>

<TypeTable type={{ from: { description: 'The direction the alert dialog should flip from', type: "'top' | 'bottom' | 'left' | 'right'", required: false, default: 'top', }, transition: { description: 'The transition of the alert dialog popup', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 150, damping: 25 }", }, '...props': { description: 'The props of the alert dialog popup.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

<Callout type="info"> The `render` property is not supported in the `AlertDialogPopup` component, as it is used for animation. </Callout>

AlertDialogAction

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogclose" text="Animate UI API Reference - Alert Dialog Close Primitive" />

<ExternalLink href="https://base-ui.com/react/components/alert-dialog#close" text="Base UI API Reference - AlertDialog.Close" />

</div>

AlertDialogCancel

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogclose" text="Animate UI API Reference - Alert Dialog Close Primitive" />

<ExternalLink href="https://base-ui.com/react/components/alert-dialog#close" text="Base UI API Reference - AlertDialog.Close" />

</div>

AlertDialogHeader

<ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogheader" text="Animate UI API Reference - Alert Dialog Header Primitive" />

<TypeTable type={{ '...props': { description: 'The props of the alert dialog header.', type: "React.ComponentProps<'div'>", required: false, }, }} />

AlertDialogTitle

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogtitle" text="Animate UI API Reference - Alert Dialog Title Primitive" />

<ExternalLink href="https://base-ui.com/react/components/alert-dialog#title" text="Base UI API Reference - AlertDialog.Title" />

</div>

AlertDialogDescription

<div className="flex flex-col gap-2"> <ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogdescription" text="Animate UI API Reference - Alert Dialog Description Primitive" />

<ExternalLink href="https://base-ui.com/react/components/alert-dialog#description" text="Base UI API Reference - AlertDialog.Description" />

</div>

AlertDialogFooter

<ExternalLink href="https://animate-ui.com/docs/primitives/base/alert-dialog#alertdialogfooter" text="Animate UI API Reference - Alert Dialog Footer Primitive" />

<TypeTable type={{ '...props': { description: 'The props of the alert dialog footer.', type: "React.ComponentProps<'div'>", required: false, }, }} />

Credits

• Base UI Alert Dialog
• Credit to shadcn/ui for style inspiration.

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║