Use a dialog to present important information, prompt decisions, or collect input in a modal overlay.
A dialog is a transient UI overlay that appears above the main content,
temporarily interrupting the user’s workflow to convey critical information,
prompt a decision, or request input.
LyteNyte Grid’s dialog is a headless component composed of several parts that you must assemble
before use. The example below provides a brief overview of these parts.
The demo below demonstrates a basic dialog. It contains the minimum structure required for
a fully accessible dialog, which you can expand upon to meet your application’s needs.
Offset, in pixels, along the cross axis for fine-tuning alignment.
Anchor element used to position the dialog. Accepts a reference element, an element ID string, or null to disable anchoring.
ID of the element that describes the dialog, typically body text. Used for aria-describedby on the dialog content.
A function that returns a Promise. The focus trap waits for the promise to resolve before returning focus.
A function that returns a Promise. The focus trap waits for the promise to resolve before trapping focus.
The element to focus when no focusable elements exist inside the dialog container. Use this property to provide a fallback, as the focus trap requires at least one focusable element.
An element, or a function that returns an element, to receive initial focus when the dialog opens. Set this value to false to prevent initial focus.
Whether the focus trap prevents scroll jumps when focusing an element. Only use this option when the dialog is large and scrollable.
The element to return focus to when the dialog closes. By default, focus returns to the element that was focused before the dialog opened. Set this value to false to prevent focus from returning.
Whether focus is trapped within the dialog while it is open.
Whether the dialog is hidden when its anchor element moves out of view.
Base ID for the dialog content element. This ID is used to associate ARIA attributes and to generate related IDs when needed.
Whether to use inline positioning behavior. This option is useful when the anchor is inline text or a text range.
Controls dismissal on outside click or tap. Set this value to true to close on outside interaction, false to disable dismissal, or provide a predicate function that returns true to allow dismissal for a given interacted element.
Whether to lock page scrolling while the dialog is open. This behavior is commonly used with modal dialogs.
Whether the dialog behaves modally, blocking interaction with the rest of the page and typically enabling scroll locking and focus trapping.
Called when the dialog requests a change to its open state (for example, on trigger click, Escape key press, or outside interaction). Use this callback to control the open state.
Called after the open state change completes, including any open or close transitions. The callback receives the final open state.
Whether the dialog is open.
Whether the dialog is initially open. Set this value to open the dialog without controlling its open state.
Preferred placement of the dialog relative to the anchor (for example, bottom or top-start).
Padding, in pixels, used when shifting the dialog to keep it within viewport boundaries.
Distance, in pixels, between the dialog and the anchor along the main axis.
ID of the element that labels the dialog, typically the title. Used for aria-labelledby on the dialog content.
