Dialog
A modal dialog that interrupts the user with important content. Built on Radix UI with focus trap, escape handling, and scroll lock.
Form
Share link
Installation
pnpm
pnpm dlx @hex-core/cli add dialogAPI Reference
| Prop | Type | Default | Description |
|---|---|---|---|
open | boolean | — | Controlled open state |
defaultOpen | boolean | false | Default open state for uncontrolled usage |
onOpenChange | function | — | Callback fired when open state changes: (open: boolean) => void |
modal | boolean | true | When true, content outside the dialog is inert |
AI Guidance
When to use
Use for focused, interruptive tasks: confirmations, quick forms, detail views. The user must address the dialog before continuing.
When not to use
Don't use for destructive confirmations (use AlertDialog). Don't use for complex multi-step flows (use a full page). Don't use for non-critical info (use Tooltip or Popover).
Common mistakes
- Nesting dialogs inside each other
- Forgetting DialogTitle (breaks accessibility — screen readers need it)
- Using DialogDescription for long-form content (keep it short)
- Putting too many primary actions in DialogFooter
Accessibility
Radix traps focus, handles Escape to close, and wires aria-labelledby/describedby to DialogTitle/DialogDescription. Always include a DialogTitle.
Related components
Token budget: 600