npm i @velkin/react
import { VuDialog } from "@velkin/react/dialog";| Prop | Type | Default | Description |
|---|---|---|---|
| open | boolean | false | Whether the dialog is visible. Default: `false`. |
| closable | boolean | false | Shows a dismiss control in the corner. Default: `false`. |
| closeLabel | string | "" | Accessible name for the dismiss control; empty uses locale catalog. Default: `""`. |
| ariaLabel | string | "" | Accessible name when the header slot is empty. Default: `""`. |
| variant | VuDialogVariant | "elevated" | Surface paint recipe. Default: `"elevated"`. |
| tone | VuDialogTone | "normal" | Neutral surface weight. Default: `"normal"`. |
| size | VuDialogSize | "md" | Padding scale for header, body, and footer (`sm`/`md`/`lg`). Default: `"md"`. |
| radius | VuDialogRadius | "md" | Panel corner preset (`sm`/`md`/`lg`; Role C′ omits `none`/`full`). Default: `"md"`. |
| divider | boolean | false | Hairlines between shown regions. Default: `false`. |
| persistent | boolean | false | Blocks backdrop and Escape close. Default: `false`. |
| closeOnEsc | boolean | true | Escape emits `vu-close` when topmost. Default: `true`. |
| maxWidth | string | "" | Optional CSS max-width; empty keeps `auto`. Default: `""`. |
| maxHeight | string | "" | Optional CSS max-height; empty keeps `auto`. Default: `""`. |
| Event | Detail | Description |
|---|---|---|
| vu-close | VuDialogCloseDetail | Cancelable close intent; parent sets `open` false when not prevented. |
| vu-open | CustomEvent<void> | When the dialog begins opening. |
| vu-afteropen | CustomEvent<void> | After the open animation finishes. |
| vu-afterclose | CustomEvent<void> | After the close animation finishes. |
| Slot | Description |
|---|---|
| header | Title or toolbar row at the top. |
| body | Main content region. |
| footer | Action buttons at the bottom. |
| Part | Description |
|---|---|
| dialog | Native `<dialog>` surface. |
| close-button | Dismiss control when `closable`. |
| header | Header slot wrapper. |
| header-divider | Hairline below the header when `divider` is set. |
| body | Body slot wrapper. |
| footer-divider | Hairline above the footer when `divider` is set. |
| footer | Footer slot wrapper. |
| Method | Description |
|---|---|
| show | - Sets `open` to true. |
| hide | - Sets `open` to false. |
| toggle | - Toggles `open`. |
| focus | - Focuses the dialog element. |
| Name | Definition |
|---|---|
| VuDialogCloseDetail | |
| VuDialogRadius | |
| VuDialogSize | |
| VuDialogTone | |
| VuDialogVariant | |