Alert Dialog

Confirmation dialog for destructive or high-stakes actions.

Installation

npx shadcn@latest add @iconiq/r-alert-dialog

File Structure

Usage

"use client";

import { useState } from "react";
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
  alertDialogTriggerSmClassName,
} from "@/components/ui/r-alert-dialog";

export function AlertDialogPreview() {
  const [open, setOpen] = useState(false);

  return (
    <AlertDialog onOpenChange={setOpen} open={open}>
      <AlertDialogTrigger asChild>
        <button className={alertDialogTriggerSmClassName} type="button">
          Delete
        </button>
      </AlertDialogTrigger>
      <AlertDialogContent open={open}>
        <AlertDialogHeader>
          <AlertDialogTitle>Delete this item?</AlertDialogTitle>
          <AlertDialogDescription>
            This action permanently removes the item from your workspace. You will not be able to recover it later.
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel>Cancel</AlertDialogCancel>
          <AlertDialogAction>
            Delete
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}

Props

Props
Description

AlertDialog

open

Controlled open state for the root. Pair with onOpenChange when async actions or parent state should own dismissal.

Type boolean

defaultOpen

Initial uncontrolled open state. Ignored when open is provided.

Type boolean·Default false

onOpenChange

Called when the alert dialog opens or closes through the trigger, cancel action, confirm action, Escape, or controlled state updates.

Type (open: boolean) => void

Parts and composition

AlertDialogTrigger

Opens the dialog. Use asChild to wrap an existing button, link-styled button, or inline control while preserving trigger behavior.

Type ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }

AlertDialogContent

Animated card surface. Pass open in controlled usage to keep exit animations synchronized with the root state.

Type Primitive content props & { open?: boolean }

AlertDialogMedia

Optional leading icon or media container for warning, publish, or verification visuals.

Type HTMLAttributes<HTMLDivElement>

AlertDialogHeader / AlertDialogFooter

Layout slots for title/description copy and the cancel/action row. Mobile order keeps Cancel before the confirming action.

Type HTMLAttributes<HTMLDivElement>

AlertDialogTitle / AlertDialogDescription

Accessible heading and supporting copy linked by the underlying alert-dialog primitive.

Type Primitive title and description props

Actions and async flows

AlertDialogAction.variant

Controls whether the confirming action uses the destructive color treatment or the neutral primary action treatment.

Type "destructive" | "default"·Default "destructive"

AlertDialogAction.closeOnClick

Set to false for async requests, keep the root controlled, and close the dialog after the request succeeds.

Type boolean·Default true

AlertDialogCancel.closeOnClick

Set to false only when a cancel button needs to run custom validation before closing.

Type boolean·Default true

AlertDialogAction / AlertDialogCancel asChild

Base UI and Radix UI installs both support slotted action controls for custom button components.

Type boolean

Style exports

alertDialogTriggerClassName

Default trigger recipe for full-size confirmation buttons.

Type string

alertDialogTriggerSmClassName

Compact trigger recipe for inline sentence controls and toolbar-sized buttons.

Type string

alertDialogActionClassName / alertDialogDefaultActionClassName / alertDialogCancelClassName

Action recipes exported for custom footer compositions.

Type string

alertDialogThemeClassName

Theme variable wrapper used by triggers and content, useful when composing custom alert-dialog surfaces.

Type string

AlertDialogPortal

Portal primitive export for advanced consumers that need direct portal composition.

Type Primitive Portal

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @base-ui/react, @radix-ui/react-slot, motion.

Registry bundle

Install the exact registry entry shown on the right when you want the component file and its declared runtime dependencies together.

Dependencies: @radix-ui/react-alert-dialog, motion.

Contact

Additionally, if you find any bug or issue, feel free to raise an issue.

This cannot be undone.Tapto continue.