Dialog
Modal with focus trap and overlay.
Usage
Use the child snippet on Dialog.Trigger and Dialog.Close to render real, accessible elements. The trigger spreads
all required ARIA and event props onto whatever element you pass.
Anatomy
Dialog.Content already portals to <body> and renders the overlay behind the panel — you do not need to add Dialog.Overlay separately. Focus is trapped inside the content while
open; pressing Esc closes.
See the Usage example above for a runnable demo.
Props
Built on bits-ui — all underlying Bits UI Dialog props are forwarded
transparently.
| Prop | Type | Default |
|---|---|---|
Dialog.Root — open Controlled open state. | boolean | false |
Dialog.Root — onOpenChange Callback fired when open state changes. | (open: boolean) => void | — |
Dialog.Trigger — child Render prop that spreads trigger props onto a real element. | Snippet<[{ props: object }]> | — |
Dialog.Close — child Render prop that spreads close props onto a real element. | Snippet<[{ props: object }]> | — |
Dialog.Content — class Extra classes merged onto the content panel. | string | — |
Dialog.Title — level Heading level for the dialog title. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
Dialog.Description — class Extra classes merged onto the description. | string | — |