Dialog

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

Installation

bash
npx shadcn@latest add dialog

Import

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

Basic Dialog

Destructive action

Props

PROPTYPEDEFAULTDESCRIPTION
openboolean—Controlled open state
onOpenChange(open: boolean) => void—Called when open state changes
defaultOpenbooleanfalseInitial open state (uncontrolled)
modalbooleantrueWhether to render as a modal
onInteractOutside(e: Event) => void—Called on outside click; call e.preventDefault() to block close
onEscapeKeyDown(e: KeyboardEvent) => void—Called on Escape key

Accessibility

  • Focus is trapped inside the dialog when open
  • DialogTitle and DialogDescription are automatically wired to aria-labelledby and aria-describedby
  • Pressing Escape closes the dialog by default
  • Background content gets aria-hidden when dialog is open