Dialog
Dialog Primitive
Headless, unstyled dialog primitive with full accessibility support.
AsChild Pattern
Use AsChild to compose triggers with your own styled elements.
Without AsChild
DialogTriggerPrimitive renders its own button element.
With AsChild
Button receives click behavior via TriggerContext.
Basic Headless Primitive
The primitive provides behavior and accessibility without styling.
Controlled State
Control the dialog's open state from your component code.
Modal Behavior
By default, dialogs are modal. Clicking overlay or pressing Escape closes the dialog.
Accessibility Features
Built-in accessibility features following WAI-ARIA design patterns.
Included by default
role="dialog", aria-labelledby, aria-describedby, focus trap, and scroll lock.
Keyboard Shortcuts
Navigate and interact with dialogs using keyboard.
Open dialogEnter / Space
Close dialogEscape
Navigate between elementsTab
API Reference
Component properties and parameters.
| Prop | Type | Default | Description |
|---|---|---|---|
| Open | bool? | — | Controls whether the dialog is open (controlled mode). |
| OpenChanged | EventCallback<bool> | — | Callback invoked when the open state changes. |
| DefaultOpen | bool | false | Initial open state (uncontrolled mode). |
| Modal | bool | true | Whether the dialog is modal. |
When to Use Primitives
Choose between primitives and styled components based on your needs.
Use Dialog Primitive
- ✓Building a custom design system
- ✓Need complete control over styling
- ✓Want to apply your own CSS framework
- ✓Creating unique visual designs
Use Styled Component
- ●Want shadcn/ui design out of the box
- ●Need quick implementation
- ●Like the default styling
- ●Prefer convention over configuration