Present critical information or request decisions in a focused modal.
A dialog is a transient UI element that appears above the main content to present information
or request user interaction. A dialog temporarily interrupts the user’s workflow to convey critical
context, prompt a decision, or collect 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 shows a basic dialog. The displayed content represents the minimum required for a
fully accessible dialog. You can add additional content as needed to meet your application’s
requirements.
The spacing, in pixels, between the menu and its aligned side.
The element to anchor the menu container to. By default, this is the menu trigger. When a string is provided, it must be a valid query selector.
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 menu 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 menu opens. Set this value to false to prevent initial focus.
Whether the focus trap should prevent scroll jumps when focusing an element. Only use this option when the menu is large and scrollable.
The element to return focus to when the menu closes. By default, focus returns to the element that was focused before the menu opened. Set this value to false to prevent focus from returning.
Whether the menu traps focus while open. Defaults to true.
Whether the menu popover should be hidden when it is out of view. Defaults to false.
The ID to use for the menu trigger. Only set this value if you require a specific ID. If not provided, the component generates an ID using useId.
Whether the menu anchor should use inline bounding box calculations. This is useful when the menu button appears within a paragraph of text.
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 the page scroll should be locked while the menu is open. Defaults to true when the menu is modal, otherwise false.
Whether the menu is displayed as a modal. A modal prevents interaction with the rest of the page while open. Defaults to true.
An event callback that fires when the menu open state changes.
An event callback that fires when open or close animations complete.
Whether the menu is open. Set this property to control the menu open state.
Whether the menu is initially open. Set this property to define the default open state without controlling it.
The requested menu position. The menu may be repositioned to avoid clipping by container bounds.
The spacing, in pixels, applied when shifting the menu away from a container edge. This prevents the menu from sitting directly against the window edge.
The spacing, in pixels, between the menu and its positioned side.
The ID to use for the title element. Only set this value if the title element requires a specific ID. If not provided, the component generates an ID using useId.
