Dialog

Overlay

Feedback

Modal dialogs for focused user interactions and confirmations.

Preview

Simple dialog with title and description

Confirmation Dialog

Destructive action with warning

Form Dialog

Dialog with form inputs

Controlled Dialog

Programmatically control dialog state

Size Variants

Different dialog widths for various content needs

Props

Component API reference

Dialog

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state
`onOpenChange`	`(open: boolean) => void`	—	Callback when open state changes
`defaultOpen`	`boolean`	`false`	Initial open state (uncontrolled)
`modal`	`boolean`	`true`	Whether to render as modal

DialogContent

Prop	Type	Default	Description
`size`	`'sm' \| 'default' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'`	`'default'`	Dialog width variant
`className`	`string`	—	Additional CSS classes

Usage

Import and implementation examples

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

// Basic usage
<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>
        Dialog description goes here
      </DialogDescription>
    </DialogHeader>
    <DialogFooter>
      <Button variant="inverse">Cancel</Button>
      <Button>Confirm</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

// Different sizes
<DialogContent size="sm">...</DialogContent>  // max-w-sm (384px)
<DialogContent size="default">...</DialogContent>  // max-w-lg (512px)
<DialogContent size="md">...</DialogContent>  // max-w-xl (576px)
<DialogContent size="lg">...</DialogContent>  // max-w-2xl (672px)
<DialogContent size="xl">...</DialogContent>  // max-w-3xl (768px)
<DialogContent size="2xl">...</DialogContent>  // max-w-4xl (896px)
<DialogContent size="full">...</DialogContent>  // full viewport minus margins

// Controlled dialog
const [open, setOpen] = useState(false)

<Dialog open={open} onOpenChange={setOpen}>
  <DialogContent size="md">
    <DialogHeader>
      <DialogTitle>Controlled Dialog</DialogTitle>
    </DialogHeader>
    <DialogFooter>
      <Button onClick={() => setOpen(false)}>Close</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

Features

Built-in functionality

Focus trap: Keyboard focus stays within dialog
ESC to close: Press ESC key to dismiss
Backdrop click: Click outside to close
Accessible: ARIA roles and keyboard navigation
Smooth animations: Fade and zoom transitions
Controlled mode: Full control over open state
Form support: Works with form inputs
Dark mode: Full dark mode support

Accessibility

Accessibility considerations

ARIA Attributes

role="dialog" for containeraria-modal="true" when openaria-labelledby for titlearia-describedby for description

Keyboard Navigation

Key	Action
`Escape`	Close dialog
`Tab`	Navigate between elements
`Shift+Tab`	Navigate backwards

Notes

Focus trapped within dialog when open
Focus returns to trigger on close
Screen reader announces dialog content

Related Components

Alert Dialog Sheet Drawer