Dialog

Installation

npx paubha@latest add dialog

Usage

import {
  Dialog,
  DialogAction,
  DialogActions,
  DialogBody,
  DialogCancel,
  DialogContent,
  DialogDescription,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";

<Dialog>
  <DialogTrigger asChild>
    <Button variant="secondary">Discard changes</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogBody>
      <DialogTitle>Discard changes?</DialogTitle>
      <DialogDescription>
        Unsaved changes to Website redesign will be lost.
      </DialogDescription>
    </DialogBody>
    <DialogActions>
      <DialogCancel>Keep editing</DialogCancel>
      <DialogAction>Discard changes</DialogAction>
    </DialogActions>
  </DialogContent>
</Dialog>

Examples

Destructive

Info (single action)

API reference

Prop	Type	Default	Description
open	boolean	—	Controlled open state, pair with onOpenChange.
defaultOpen	boolean	—	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	—	Called when the open state changes.

DialogContent

Prop	Type	Default	Description
children	ReactNode	—	Typically DialogBody + DialogActions.

DialogAction

Prop	Type	Default	Description
variant	"brand" \| "error"	"brand"	Colors the action: brand for Confirm/Info, error for Destructive.

Accessibility

Role. Built on Radix AlertDialog (not plain Dialog): role="alertdialog" with aria-modal="true", aria-labelledby pointing at DialogTitle (the decision) and aria-describedby at DialogDescription (its consequence).
Focus. On open, focus lands on DialogCancel, the safe action. Tab and Shift+Tab stay inside; background content is inert.
Escape takes the cancel path and restores focus to the trigger. Unlike Modal, clicking outside does not close it. The user must make an explicit choice.
Focus ring. Visible on Tab via shadow-glow-focus on both actions.
Motion. Opens with a duration-fast (100ms) ease-out fade; instant under prefers-reduced-motion.

When to use

Use for confirmations before destructive or irreversible actions: deleting items, discarding changes, revoking access. Requires an explicit user decision.

Do:

Name the decision in the title ("Discard changes?"), not a generic "Are you sure?"
Explain the actual consequence, naming the affected item
Keep the safe action (Cancel, Keep editing) alongside the decision action
Use the error variant for destructive actions

Don't:

Use for informational updates, use Alert or Toast instead
Chain multiple dialogs
Default-focus the destructive action

Modal: for non-confirmation overlays
Toast: for non-blocking feedback
Alert: for inline warnings

Dialog

On this page