Preview
This is the real open-state paint in document flow. Modal focus and dismissal run in the live playground.
Usage
Dialog usage<Dialog id="confirm" title="Delete deploy?">Confirmation copy</Dialog>API
Dialog APIDialogProps
Modal dialog on the native `<dialog>` element — `showModal()` gives the focus trap, Escape, backdrop, and focus-return to the opener natively; the kit owns title wiring (`aria-labelledby`), the labelled close control, and token paint. Opening needs JS (island doctrine — put the opener inside a clientEntry island and target the dialog's `id` with `onOpenDialog(id)`); once open, `<form method="dialog">` buttons close with no further wiring.
| prop | type | notes |
|---|---|---|
| id | string | Document-unique id — openers target it via `onOpenDialog(id)`. |
| title | string | Dialog title; renders as the labelling heading. |
| children? | RemixNode | Body content. Put app forms here, not in `actions`. |
| actions? | RemixNode | Footer row. `<form method="dialog">` buttons here close natively; confirm buttons that mutate belong to app forms in the body. |
| width? | 'sm' | 'md' | 'lg' | Dialog width: 'sm' 360px · 'md' 480px (default) · 'lg' 640px. |
| closeLabel? | string | Accessible name for the × control (i18n; default 'Close'). |
| mix? | MixInput |