Dialog

A window over the page — centred, a bottom sheet or a side panel — and AlertDialog for a confirmation.

Web + MobileStableSuperpositions

Web et mobile — le même composant pour React et React Native. Stable : son API ne change qu’à une version majeure.

Pourquoi il est là. Used by Orochia, Orazaka.

Quand l’utiliser

For a short task that must be finished or cancelled before going back: invite someone, edit a title.
AlertDialog to confirm a destructive or irreversible action, with an async onConfirm.
Sheet (bottom) on phones, placement="right" for a side panel of details.
A gate the user must answer (age, terms): hideClose and dismissible={false}.

Quand ne pas l’utiliser

For information next to an element, without blocking the page.À la place : Popover
For a message that needs no answer.À la place : Toast
For a long form or a flow of several steps: give it its own page.
To confirm the deletion of one item in place.À la place : Confirm button

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Dialog, Sheet, AlertDialog } from "@krizaka/ui/dialog";

Exemples

Centred

A short form, size="md".

Bottom sheet

placement="bottom": a sheet on a phone, centred from sm up.

Side panel

placement="right": full height, for details.

Navigation drawer

placement="left": full height from the left, for an app's navigation on a phone.

Sheet with a form

Sheet, size="lg".

Alert dialog

AlertDialog tone="danger" with an async onConfirm.

Gate

No close button: it closes only through its actions.

Props

AlertDialog

Prop	Type	Défaut	Description
`cancelLabel`requis	`string`	—	The words of the cancel button (it takes the focus at open) — passed translated.
`confirmLabel`requis	`string`	—	The words of the confirm button — passed translated.
`onConfirm`requis	`() => void \| Promise<unknown>`	—	Runs on confirm. A promise keeps the dialog open and the button loading until it settles.
`title`requis	`ReactNode`	—	The question asked ("Delete this video?"): the dialog's accessible name.
`children`	`ReactNode`	—	More content between the description and the actions.
`className`	`string`	—	Classes of the dialog's content, merged last.
`container`	`HTMLElement \| null`	—	The element the portal renders into (default: document.body).
`defaultOpen`	`boolean`	`false`	Open at first, uncontrolled.
`description`	`ReactNode`	—	What the action does and what it costs: the dialog's description.
`onOpenChange`	`((open: boolean) => void)`	—	Called when it opens or closes (never while `onConfirm` is pending).
`open`	`boolean`	—	Open or closed (controlled), with `onOpenChange`.
`tone`	`"danger" \| "primary"`	`primary`	`danger` for a destructive action (delete, leave, cancel a payment).
`trigger`	`ReactNode`	—	The element that opens the dialog (rendered as is, `asChild`): a Button, an IconButton.

DialogContent

The dialog itself, portalled over a dimmed overlay, with a close button. Give it a Dialog.Title.

Prop	Type	Défaut	Description
`closeLabel`	`string`	—	The accessible name of the close button — passed translated.
`container`	`HTMLElement \| null`	—	The element the portal renders into (default: document.body).
`dismissible`	`boolean`	`true`	`false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes through `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.
`hideClose`	`boolean`	—	Leaves the close button out (the content brings its own way out, or none: see `dismissible`).
`placement`	`"center" \| "bottom" \| "right" \| "left"`	`center`	center · bottom (a sheet on a phone, centred from `sm` up) · right (a side panel, full height) · left (a navigation drawer, full height).
`size`	`"sm" \| "md" \| "lg"`	`md`	sm · md · lg: the width of the dialog.

Sheet

A sheet is a dialog anchored at the bottom (centred from sm up): Dialog.Content placement="bottom".

Prop	Type	Défaut	Description
`closeLabel`	`string`	—	The accessible name of the close button — passed translated.
`container`	`HTMLElement \| null`	—	The element the portal renders into (default: document.body).
`dismissible`	`boolean`	—	`false`: Escape and a click outside do not close it (a gate the user must answer: age, terms). It still closes through `open` / `onOpenChange` and any `Dialog.Close` inside. Default `true`.
`hideClose`	`boolean`	—	Leaves the close button out (the content brings its own way out, or none: see `dismissible`).
`size`	`"sm" \| "md" \| "lg"`	`md`	sm · md · lg: the width of the dialog.

Accessibilité

Closing returns focus to what opened it — also when a plain button opened it (a controlled open), not only a Dialog.Trigger; your onCloseAutoFocus can still decide otherwise.
Radix Dialog: role="dialog" (or alertdialog), aria-modal, named by its title and described by its description.
The focus moves into the dialog when it opens and returns to the trigger when it closes; the page behind does not scroll.
AlertDialog keeps the focus on the cancel button first.

Clavier

Touches	Action
`Esc`	Closes the dialog (unless `dismissible={false}`).
`Tab / Shift+Tab`	Move within the dialog: the focus is trapped while it is open.

Bonnes pratiques

Always a Dialog.Title; a Dialog.Description when the title is not enough.
Name the buttons by what they do (“Send the invitation”), the cancel one by what it keeps (“Keep it”).
Pass closeLabel translated: it names the close button.

Générée depuis le code de @krizaka/ui 3.9.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub