Dialog Element
The Dialog element creates high-priority overlays that capture user focus, perfect for modals, confirmation boxes, or detailed product views.
Live Preview
Use the trigger button below to open the dialog overlay and test its behavior.
Dialog Preview
Specifications
Dialogs are specialized containers that manage global overlay states:
- Overlay Opacity: Control the Opacity (0-1) of the background layer to define the focus level.
- Content Layout: Nest any Canvas Elements like containers, headings, and images inside.
- Interaction Linkage: Trigger dialog behavior via the Open-Dialog or Close-Dialog actions from other elements.
- Styling: Apply custom widths, borders, and rounded corners to the internal dialog wrapper.
- Performance: Uses built-in portals to ensure the dialog renders correctly above all other content.
- Accessibility: Automatically manages focus and supports keyboard dismissal (ESC).
AI Guidance
How to prompt for Dialogs:
- Add a dialog that shows a newsletter signup form when a button is clicked.
- Create a confirmation modal that appears with a high-contrast overlay.
- Insert a dialog that includes a video player and a close button.