Components
Dialog
Modal dialogs on the native <dialog> element, sheets that slide in from an edge, and a confirmation for destructive actions.
Import
import { Dialog, DialogFooter, DialogClose, ConfirmDialog } from '@rinzai/zen';Examples
Sheets
With side, a dialog slides in from an edge: a bottom sheet (phones) or a side panel (filters, details).
Pickers
Selects, pickers and menus open above the dialog, and toasts show over it (try Save draft).
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, outside-click or close button). With side, it's a sheet that slides in from that edge: a bottom sheet on phones, a side panel for filters or details. On touch, a sheet swipes back to its edge to close.
| Prop | Type | Default |
|---|---|---|
openRequired | boolean | — |
titleRequired | ReactNode | — |
closeLabelThe close button's accessible name. | string | — |
description | ReactNode | — |
dismissible | boolean | true |
initialFocusElement to focus when the dialog opens (default: the first focusable one). | RefObject<HTMLElement | null> | — |
onOpenChange | ((open: boolean) => void) | — |
sideSlide in from this edge as a sheet, instead of appearing in the middle. | "bottom" | "left" | "right" | — |
size"lg" for dialogs holding a whole tool rather than a short form. | "lg" | "md" | md |
<DialogFooter>
The row of actions at the end of a dialog, right-aligned.
No props of its own; it accepts the props of the element it renders.
<DialogClose>
A button that closes its dialog (after its own onClick, unless that calls preventDefault). Takes every Button prop: variant, size, asChild…
| Prop | Type | Default |
|---|---|---|
asChildPut the button's styles on the single child element (e.g. a link) instead of a <button>. | boolean | — |
loadingShows a spinner and disables the button while an action runs. | boolean | — |
size | "default" | "icon-lg" | "icon-sm" | "icon-xs" | "icon" | "lg" | "sm" | null | — |
tone | "default" | "inherit" | "muted" | "negative" | null | — |
variant | "default" | "ghost" | "link" | "outline" | "secondary" | null | — |
<ConfirmDialog>
Confirmation for destructive or irreversible actions. Cancel has focus, so Enter is the safe choice.
| Prop | Type | Default |
|---|---|---|
confirmLabelRequired | string | — |
onConfirmRequired | () => void | — |
onOpenChangeRequired | (open: boolean) => void | — |
openRequired | boolean | — |
titleRequired | ReactNode | — |
cancelLabel | string | — |
closeLabelThe close button's accessible name. | string | — |
description | ReactNode | — |
dismissible | boolean | — |
initialFocusElement to focus when the dialog opens (default: the first focusable one). | RefObject<HTMLElement | null> | — |
sideSlide in from this edge as a sheet, instead of appearing in the middle. | "bottom" | "left" | "right" | — |
size"lg" for dialogs holding a whole tool rather than a short form. | "lg" | "md" | — |
tone
| "default" | "negative" | default |