Alert Dialog

A high-quality, styled React alert dialog component built with @base-ui/react that requires a user response to proceed.

The AlertDialog component displays a modal dialog requiring explicit user confirmation before proceeding with destructive or critical actions.

Usage

import { AlertDialog } from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";

export function ExampleAlertDialog() {
  return (
    <AlertDialog.Root>
      <AlertDialog.Trigger asChild>
        <Button variant="destructive">Discard draft</Button>
      </AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Backdrop />
        <AlertDialog.Popup>
          <div className="flex flex-col gap-1">
            <AlertDialog.Title>Discard draft?</AlertDialog.Title>
            <AlertDialog.Description>
              You cannot undo this action once completed.
            </AlertDialog.Description>
          </div>
          <div className="flex justify-end gap-3 pt-2">
            <AlertDialog.Close asChild>
              <Button variant="ghost">Cancel</Button>
            </AlertDialog.Close>
            <AlertDialog.Close asChild>
              <Button variant="destructive">Discard</Button>
            </AlertDialog.Close>
          </div>
        </AlertDialog.Popup>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
}

Preview

Variants

Default Confirmation

<AlertDialog.Root variant="default">
  <AlertDialog.Trigger asChild>
    <Button variant="outline">Save Profile</Button>
  </AlertDialog.Trigger>
  {/* Dialog content */}
</AlertDialog.Root>

Destructive Alert

<AlertDialog.Root variant="destructive">
  <AlertDialog.Trigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </AlertDialog.Trigger>
  {/* Dialog content */}
</AlertDialog.Root>

Custom Styling

Customize the modal backdrop blur, border accent, or action button styles using className:

<AlertDialog.Portal>
  <AlertDialog.Backdrop className="bg-slate-950/80 backdrop-blur-md" />
  <AlertDialog.Popup className="border border-red-500/20 bg-slate-900 text-white shadow-2xl">
    <AlertDialog.Title className="text-red-400">Danger Zone Action</AlertDialog.Title>
    <AlertDialog.Description className="text-slate-400">
      This process cannot be reverted.
    </AlertDialog.Description>
  </AlertDialog.Popup>
</AlertDialog.Portal>

Styling & Class Names

Target internal alert dialog CSS slots for custom overrides:

Class Name	Element / Slot	Description
`.alert-dialog`	Root dialog wrapper	Main dialog container wrapper.
`.alert-dialog__backdrop`	Backdrop overlay	Semi-transparent modal backdrop.
`.alert-dialog__popup`	Dialog popup box	Centered dialog container box.
`.alert-dialog__title`	Title text	Bold dialog title element.
`.alert-dialog__description`	Description text	Muted description subtitle text.
`.alert-dialog__actions`	Action row	Action button bar container.

Anatomy

import { AlertDialog } from "@base-ui/react/alert-dialog";

<AlertDialog.Root>
  <AlertDialog.Trigger />
  <AlertDialog.Portal>
    <AlertDialog.Backdrop />
    <AlertDialog.Popup>
      <AlertDialog.Title />
      <AlertDialog.Description />
      <AlertDialog.Close />
    </AlertDialog.Popup>
  </AlertDialog.Portal>
</AlertDialog.Root>;

API Reference

Accordion.Root Props

Prop	Type	Default	Description
`variant`	`'default' \| 'destructive'`	`'default'`	Visual variant styling.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Popup container size.
`open`	`boolean`	`undefined`	Controlled open state.
`onOpenChange`	`(open: boolean) => void`	`undefined`	Event handler called when open state changes.

Alert Dialog

On this page