Dialog

A modal dialog that interrupts user flow to focus attention on a critical action or information. Built on Radix UI Dialog — manages focus trapping, scroll locking, Escape key, and ARIA modal pattern automatically.

Built on Radix UI.

✓Focus is trapped inside while open
✓Page scroll is locked when dialog is open
✓Escape key closes the dialog
✓Animated open/close transitions
✓Backdrop overlay with click-to-close
✓Fully accessible with correct ARIA dialog role

import { Dialog }from "@aetherstack/ui"

dialog.tsx

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"

export function DialogDemo() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="outline">Open Dialog</Button>
      </DialogTrigger>
      <DialogContent className="sm:max-w-md">
        <DialogHeader>
          <DialogTitle>Are you sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone.
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline">Cancel</Button>
          <Button variant="destructive">Delete</Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

Usage

Confirmation dialog

Use for destructive or irreversible actions.

Form dialog

Use dialogs for quick-entry forms without navigating away.

Controlled open state

Control the dialog from parent state for programmatic open/close.

Props

Prop	Type	Default	Description

Dialog (Root)

Prop	Type	Default	Description
open	boolean	—	Controlled open state.
defaultOpen	boolean	false	Uncontrolled initial open state.
onOpenChange	(open: boolean) => void	—	Callback when open state changes.
modal	boolean	true	When true, focus is trapped and backdrop is shown.

DialogContent

Prop	Type	Default	Description
className	string	—	Use sm:max-w-* to control dialog width.
onInteractOutside	(e: Event) => void	—	Called when user clicks outside. Call e.preventDefault() to prevent closing.
onEscapeKeyDown	(e: KeyboardEvent) => void	—	Called on Escape. Call e.preventDefault() to prevent closing.

DialogClose

Prop	Type	Default	Description
asChild	boolean	false	Render as a child element (e.g., wrap a Button).

* Required props

Accessibility

→Has role='dialog' and aria-modal='true' — screen readers announce it as a modal.
→Focus moves to the first focusable element when the dialog opens.
→Focus returns to the trigger element when the dialog closes.
→DialogTitle is required — it provides the accessible name for the dialog.
→DialogDescription is optional but recommended for supplementary context.
→The overlay backdrop has aria-hidden='true' to prevent screen readers from reading it.