Dialog (1.x)
The 1.x modal (open, onClose, title, description), drawn by the @krizaka/ui dialog.
Web — React, from @krizaka/orazaka-design-system. The Orazaka mobile app takes the kit's tokens, not its components. Deprecated: kept for the apps that still use it, removed in its next major.
DeprecatedSince 2.3.0, removed in 3.0.0. Use instead: Dialog (Krizaka UI).
Why it exists above Krizaka UI
Kept so that the apps written against 1.x keep working: focus trap, Escape and outside click now come from the primitive.
Built onDialog
When to use
- Never in new code: compose
Dialog.Root/Dialog.Content/Dialog.Header/Dialog.Title/Dialog.Bodyfrom@krizaka/ui/dialog.
When not to use
- Anywhere new: it is deprecated.Use instead: Dialog
Installation
Install
npm install @krizaka/orazaka-design-system && npm install -D tailwindcssStyles
@import "tailwindcss";
@import "@krizaka/orazaka-design-system/theme.css";The package ships its TypeScript sources: add it to transpilePackages (with @krizaka/orazaka-shared and @krizaka/ui).
Import
import { Dialog } from "@krizaka/orazaka-design-system";Props
The 1.x modal dialog, drawn by the
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | ReactNode | — | Panel body. |
onCloserequired | () => void | — | Invoked on Escape, a click outside, or the close button. |
openrequired | boolean | — | Controls visibility. When false the dialog is fully unmounted. |
closeLabel | string | Close | Accessible label for the close (×) button. |
description | string | — | Optional sub-heading rendered beneath the title. |
title | string | — | Optional heading rendered in the panel header. |
Accessibility
- The primitive's: a modal dialog named by its title.
Keyboard
| Keys | Action |
|---|---|
| Esc | Closes it and returns the focus. |
Best practices
- Pass
closeLabeltranslated until the migration.
Related components
Generated from the code of @krizaka/orazaka-design-system 2.5.0: its meta.ts, its examples and its types.Edit this documentation on GitHub