Overlay

An overlay component with backdrop and centered content slot.

vu-overlay · @velkin/react/overlay

Copy page

Import

React

npm i @velkin/react

import { VuOverlay } from "@velkin/react/overlay";

Prop	Type	Default	Description
open	`boolean`	false	Whether the overlay is visible. Default: `false`.
persistent	`boolean`	false	Blocks backdrop and Escape close. Default: `false`.
closeOnEsc	`boolean`	true	Escape emits `vu-close` when topmost. Default: `true`.
backdropblur	`boolean`	false	Blurs content behind the scrim. Default: `false`.
lockscroll	`boolean`	true	Locks document scroll when open. Default: `true`.
ariaLabel	`string`	""	Accessible name when slotted content has no visible title. Default: `""`.

Event	Detail	Description
vu-open	`CustomEvent<void>`	When the overlay begins opening.
vu-afteropen	`CustomEvent<void>`	After the open transition window.
vu-close	VuOverlayCloseDetail	Cancelable close intent; parent sets `open` false when not prevented.
vu-afterclose	`CustomEvent<void>`	After the close transition window.

Slot	Description
—	- Centered content above the backdrop (e.g. a `vu-card` panel).

Part	Description
backdrop	Full-area scrim behind slotted content.
content	Flex centering frame for the default slot.

Name	Definition
VuOverlayCloseDetail	`{ reason: VuOverlayCloseReason; }`