Overlays
Dialog
A modal surface: portal, scrim, centred panel.
Examples
default
Notes
Radix Dialog root + trigger + close, re-exported as typed passthroughs.
Props
Takes no props of its own.
Parts
Composed at the call site rather than configured through props, so a layout this component did not anticipate is still expressible.
DialogContent
A modal surface: portal → scrim → centred panel.
Radix owns the focus trap, the escape key, the scroll lock and the aria-modal wiring — all of which a hand-rolled dialog gets subtly wrong, usually by leaving focus behind in the page underneath.
Radix requires a Dialog.Title whether or not one is shown, so a dialog without a visible heading still renders a hidden one rather than logging a warning and shipping an unnamed modal.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | — | |
| description | ReactNode | Sub-heading under the title. | |
| showClose | boolean | true | Show the top-right close control (default true). |
| title | ReactNode | Heading text. When omitted, a visually-hidden title is rendered for a11y. |
Also accepts everything in Omit<ComponentProps<typeof DialogPrimitive.Content>, 'title' | 'className'>. Those are forwarded to the underlying element and are not listed row by row.
Re-exports
Dialog = DialogPrimitive.RootRadix Dialog root + trigger + close, re-exported as typed passthroughs.
DialogTrigger = DialogPrimitive.TriggerDialogClose = DialogPrimitive.CloseAccessibility
- Radix owns the focus trap, Escape, the scroll lock and aria-modal.
- A dialog without a visible heading still renders a hidden title, rather than shipping an unnamed modal.