Alert Dialog

A modal dialog that interrupts the user with important content and expects a response.

Radix UI

Shadcn UI

Open in

Loading component...

Installation

Usage

Basic Example

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
  AlertDialogTrigger,
} from "@/components/redpanda-ui/alert-dialog"

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="destructive">Delete Account</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
      <AlertDialogDescription>
        This action cannot be undone. This will permanently delete your account
        and remove your data from our servers.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Delete Account</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Confirmation Dialog

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button>Save Changes</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Save changes?</AlertDialogTitle>
      <AlertDialogDescription>
        This will update your profile information. You can change these settings later.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction>Save Changes</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Warning Dialog

<AlertDialog>
  <AlertDialogTrigger asChild>
    <Button variant="outline">Reset Settings</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Reset all settings?</AlertDialogTitle>
      <AlertDialogDescription>
        This will restore all settings to their default values. Your custom configurations will be lost.
        This action cannot be undone.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Keep Settings</AlertDialogCancel>
      <AlertDialogAction>Reset Settings</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Controlled State

const [open, setOpen] = useState(false)

<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogTrigger asChild>
    <Button>Open Dialog</Button>
  </AlertDialogTrigger>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Controlled Dialog</AlertDialogTitle>
      <AlertDialogDescription>
        This dialog's open state is controlled by React state.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel onClick={() => setOpen(false)}>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={() => {
        // Perform action
        setOpen(false)
      }}>
        Confirm
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

When to use

Use Alert Dialog for critical actions that require explicit user confirmation. This component blocks interaction with the rest of the application until resolved:

Use Alert Dialog when:

Confirming destructive actions (delete, reset, logout)
Warning about irreversible changes
Requiring explicit consent for important operations
Preventing accidental data loss
Blocking workflow until user makes a decision

Don't use Alert Dialog when:

The action is easily reversible
You need complex form inputs (use Dialog instead)
Showing temporary notifications (use Toast instead)
Displaying non-critical information (use Alert instead)
The confirmation is optional or less critical

Anatomy

The Alert Dialog component is built using Radix UI primitives with a layered modal structure:

Modal Layer Stack:
┌─────────────────────────────────────────────────────┐
│ AlertDialogPortal (React Portal)                    │
│ ┌─────────────────────────────────────────────────┐ │
│ │ AlertDialogOverlay (backdrop)                   │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ AlertDialogContent (modal container)        │ │ │
│ │ │ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ AlertDialogHeader                       │ │ │ │
│ │ │ │ ├── AlertDialogTitle                    │ │ │ │
│ │ │ │ └── AlertDialogDescription              │ │ │ │
│ │ │ └─────────────────────────────────────────┘ │ │ │
│ │ │ [Content Area - Custom Content]             │ │ │
│ │ │ ┌─────────────────────────────────────────┐ │ │ │
│ │ │ │ AlertDialogFooter                       │ │ │ │
│ │ │ │ ├── AlertDialogCancel (outline button)  │ │ │ │
│ │ │ │ └── AlertDialogAction (primary button)  │ │ │ │
│ │ │ └─────────────────────────────────────────┘ │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ └─────────────────────────────────────────────────┘ │
└─────────────────────────────────────────────────────┘

Trigger (outside modal):
AlertDialogTrigger → Opens the modal

Component Hierarchy:

AlertDialog (Root): Manages dialog state and provides context
AlertDialogTrigger: Button or element that opens the dialog
AlertDialogPortal: Renders modal outside normal DOM tree
AlertDialogOverlay: Semi-transparent backdrop (blocks interaction)
AlertDialogContent: Main modal container with animations
AlertDialogHeader: Contains title and description
AlertDialogTitle: Primary heading (required for accessibility)
AlertDialogDescription: Explanatory text
AlertDialogFooter: Contains action buttons
AlertDialogCancel: Cancel/dismiss action (typically outline style)
AlertDialogAction: Primary action button (typically destructive style)

Key Features:

Focus Management: Automatically traps focus within dialog
Escape Handling: Closes dialog when user presses Escape
Click Outside: Closes dialog when clicking backdrop
Animations: Smooth fade and scale transitions
Accessibility: Proper ARIA attributes and screen reader support

Props

Docs API Reference

Credits

We use Radix UI for the alert dialog component.
We take our inspiration from Shadcn UI for the alert dialog style.