Dialog

Installation

npx asteria-ui 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>Confirm Action</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogBody>
      <DialogTitle>Confirm Action</DialogTitle>
      <DialogDescription>
        Are you sure you want to proceed? This action cannot be undone.
      </DialogDescription>
    </DialogBody>
    <DialogActions>
      <DialogCancel>Cancel</DialogCancel>
      <DialogAction>Confirm</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-describedby pointing at DialogDescription and aria-labelledby at DialogTitle.
Focus. Trapped within the dialog while open. Place DialogCancel first (or add autoFocus) so the safest action gets focus by default.
Escape closes the dialog. 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.

When to use

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

Do:

Auto-focus the safest action (Cancel)
Write specific confirmation text
Use the error variant for destructive actions

Don't:

Use for informational messages — use 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