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

---

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-primitives-base-alert-dialog" />

Installation

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

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

AlertDialog

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

AlertDialogTrigger

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

AlertDialogPortal

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

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

AlertDialogOverlay

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

<TypeTable type={{ transition: { description: 'The transition of the alert dialog backdrop', type: 'Transition', required: false, default: "{ duration: 0.2, ease: 'easeInOut' }", }, '...props': { description: 'The props of the alert dialog backdrop.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

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

AlertDialogPopup

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

<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>

AlertDialogClose

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

AlertDialogHeader

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

AlertDialogTitle

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

AlertDialogDescription

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

AlertDialogFooter

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

Credits

• Base UI Alert Dialog

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