Components

Dialog

Modal dialogs on the native <dialog> element, and a confirmation for destructive actions.

Import

import { Dialog, ConfirmDialog } from '@rinzai/zen';

Examples

Confirm

API reference

<Dialog>

Modal dialog on the native <dialog> element: focus is trapped and restored, the page behind is inert, and Escape closes it. `dismissible={false}` is for flows the user must finish (no Escape or outside-click close).

Prop	Type	Default
`open`Required	`boolean`	`—`
`title`Required	`ReactNode`	`—`
`className`	`string`	`—`
`description`	`ReactNode`	`—`
`dismissible`	`boolean`	`true`
`initialFocus` Element to focus when the dialog opens (default: the first focusable one).	`RefObject<HTMLElement \| null>`	`—`
`onOpenChange`	`((open: boolean) => void)`	`—`
`role`	`AriaRole`	`—`
`size` "lg" for dialogs holding a whole tool rather than a short form.	`"lg" \| "md"`	`md`

<ConfirmDialog>

Confirmation for destructive or irreversible actions. Cancel has focus, so Enter is the safe choice.

Prop	Type	Default
`confirmLabel`Required	`string`	`—`
`onConfirm`Required	`() => void`	`—`
`onOpenChange`Required	`(open: boolean) => void`	`—`
`open`Required	`boolean`	`—`
`title`Required	`ReactNode`	`—`
`cancelLabel`	`string`	`Cancel`
`description`	`ReactNode`	`—`
`destructive`	`boolean`	`false`