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

---

title: Alert Dialog description: A modal dialog that interrupts the user with important content and expects a response. author: name: imskyleen url: https://github.com/imskyleen releaseDate: 2025-09-16

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

Installation

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

Usage

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

API Reference

AlertDialog

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

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#root" text="Radix UI API Reference - AlertDialog.Root" />

</div>

AlertDialogTrigger

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

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#trigger" text="Radix UI API Reference - AlertDialog.Trigger" />

</div>

AlertDialogContent

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

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#content" text="Radix UI API Reference - AlertDialog.Content" />

</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 content', type: 'Transition', required: false, default: "{ type: 'spring', stiffness: 150, damping: 25 }", }, '...props': { description: 'The props of the alert dialog content.', type: 'HTMLMotionProps<"div">', required: false, }, }} />

<Callout type="info"> The `asChild` and `forceMount` properties are not supported in the `AlertDialogContent` component, as it is used for animation. </Callout>

AlertDialogCancel

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

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#cancel" text="Radix UI API Reference - AlertDialog.Cancel" />

</div>

AlertDialogHeader

<ExternalLink href="https://animate-ui.com/docs/primitives/radix/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/radix/alert-dialog#alertdialogtitle" text="Animate UI API Reference - Alert Dialog Title Primitive" />

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#title" text="Radix UI API Reference - AlertDialog.Title" />

</div>

AlertDialogDescription

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

<ExternalLink href="https://www.radix-ui.com/primitives/docs/components/alert-dialog#description" text="Radix UI API Reference - AlertDialog.Description" />

</div>

AlertDialogFooter

<ExternalLink href="https://animate-ui.com/docs/primitives/radix/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

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

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