ThiloDesign System
DV

Dialog

shadcn/ui

Modal overlay that blocks the main content. Use for confirmations, forms, and critical decisions. For non-blocking panels use Sheet.

@/components/ui/dialog

Patterns

Use AlertDialog for destructive confirmations — it has stronger accessibility semantics than Dialog.

Sub-components

ComponentRole
DialogRoot — manages open/close state
DialogTriggerWraps the element that opens the dialog
DialogContentThe modal panel — backdrop + content wrapper
DialogHeaderTop section: title + description
DialogTitleRequired — dialog heading (accessibility)
DialogDescriptionOptional — supporting text below the title
DialogFooterBottom section — action buttons

When to use

Use Dialog for

  • Destructive confirmations
  • Short create / edit forms
  • Important settings
  • Multi-step flows (small)

Don't use Dialog for

  • Non-critical notifications → Toast
  • Detail panels → Sheet
  • Long scrollable forms
  • Content that needs context

On this page