Redpanda UIRedpanda UI

Alert Dialog

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

Made by shadcn
Edit on GitHub

Powered by

Base UIBase UIShadcn UIShadcn UI

Installation

v0
Loading component...

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

  1. AlertDialog (Root): Manages dialog state and provides context
  2. AlertDialogTrigger: Button or element that opens the dialog
  3. AlertDialogPortal: Renders modal outside normal DOM tree
  4. AlertDialogOverlay: Semi-transparent backdrop (blocks interaction)
  5. AlertDialogContent: Main modal container with animations
  6. AlertDialogHeader: Contains title and description
  7. AlertDialogTitle: Primary heading (required for accessibility)
  8. AlertDialogDescription: Explanatory text
  9. AlertDialogFooter: Contains action buttons
  10. AlertDialogCancel: Cancel/dismiss action (typically outline style)
  11. 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

Examples

Triggered from a Menu

v0
Loading component...

Close Confirmation

v0
Loading component...

Shared Across Multiple Triggers

v0
Loading component...

Destructive Confirmation

v0
Loading component...

Sign-out Confirmation

v0
Loading component...

Props

DocsAPI Reference

Keyboard interactions

KeyAction
Enter / Space on AlertDialogTriggerOpens the dialog and focuses the first focusable element.
Tab / Shift+TabCycles focus within the dialog — focus is trapped while open.
EscapeTriggers the Cancel action (closes without confirming).
Enter on AlertDialogActionConfirms the action.

Accessibility

  • AlertDialog is a specialised modal: unlike Dialog, it cannot be dismissed by clicking outside. The only exits are the explicit AlertDialogAction, AlertDialogCancel, and Escape.
  • Always include an AlertDialogTitle and AlertDialogDescription — Base UI wires them to aria-labelledby and aria-describedby automatically.
  • The dialog uses role="alertdialog", which makes screen readers announce its contents immediately on open.
  • Focus is trapped while open and returned to the trigger on close. Background content is inert.

Controlled vs uncontrolled

Uncontrolled — the dialog owns open state:

<AlertDialog onOpenChange={(open) => console.log('open:', open)}>
  <AlertDialogTrigger>Delete</AlertDialogTrigger>
  <AlertDialogContent>{/* ... */}</AlertDialogContent>
</AlertDialog>

Controlled — open the dialog programmatically (e.g. after a mutation error):

const [open, setOpen] = useState(false);

async function handleDelete() {
  setOpen(true); // show confirmation before firing mutation
}

<AlertDialog open={open} onOpenChange={setOpen}>
  <AlertDialogContent>
    <AlertDialogHeader>
      <AlertDialogTitle>Delete topic?</AlertDialogTitle>
      <AlertDialogDescription>This action cannot be undone.</AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel>Cancel</AlertDialogCancel>
      <AlertDialogAction onClick={confirmDelete}>Delete</AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

Credits

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

Recent changes

  • patchv1.2.0Pin shipped dependency floors to the version we develop against. Registry items now declare ranges like `^5.1.9` (the actual installed version) instead of collapsing to `^5.0.0`, so consumers start on the known-tested b…#133
  • minorv1.1.0Theme docs refresh, readability pass on semantic foregrounds, and consumer-facing Base UI regression fixes.#121
  • minorv1.1.0Bulk install experience and Dialog polish.#119
  • minorv1.0.0Post-Base-UI polish. Public API unchanged.#116
  • majorv1.0.0Migrate every Radix-based primitive to `@base-ui/react@^1.4.0` (Base UI).#114
See full history →
Built by malinskibeniamin. The source code is available on GitHub.

On this page

Installation
Usage
Basic Example
Confirmation Dialog
Warning Dialog
Controlled State
When to use
Anatomy
Examples
Triggered from a Menu
Close Confirmation
Shared Across Multiple Triggers
Destructive Confirmation
Sign-out Confirmation
Props
Keyboard interactions
Accessibility
Controlled vs uncontrolled
Credits
Recent changes