Overlay Components

Modal

A focused, centered dialog that pauses the page behind a backdrop until the user confirms, cancels, or closes it. Opened via an "Open Modal" action (display mode: Modal) attached to a button or other action trigger.

Parameters

• Title / Subtitle: optional header text (each independently text-formattable).
• Width preset: small (400px) / medium (600px, default) / large (800px) / extra-large (1000px) / custom (exact pixel width, 200–2000px).
• Panel alignment: center (default) — floats at mid-height, or top — settles just below the page header.
• Max height (% of screen): the modal grows to fit its content up to this cap (default 85%, range 20–100%).
• Surface style: default / elevated / outlined / minimal.
• Container background: background color of the modal panel (default white).
• Show background: whether a dimmed backdrop appears behind the modal (default on).
• Show close button: display an X button in the header (default on).
• Close on background click: clicking the backdrop closes the modal (default on).
• Close on Escape: pressing Esc closes the modal (default on).
• Lock scroll: prevents the page behind the modal from scrolling while it's open (default on, independently toggleable).
• Allow resize: lets the user drag the panel edge to resize its width (default off).

Location

• Display within: Entire form (default, centers over the whole page) or Anchored — pin the modal to a specific Columns, Container, Tabs, or Accordion element on the canvas.

Events

• onClose – fired when the modal is dismissed, whether by the close button, background click, Escape, or a completed action inside it.

Slideout

A side panel that slides in from the edge of the screen with supporting context, while the underlying page stays visible and untouched. Opened via an "Open Modal" action (display mode: Slideout).

Parameters

• Title / Subtitle: optional header text (each independently text-formattable).
• Slide direction: left, right (default), or bottom.
• Width preset: small (400px) / medium (600px, default) / large (800px) / extra-large (1000px) / custom (200–2000px). Not shown for bottom slideouts — those are always full-width; instead you set an Initial height (px) (or drag to resize, if Allow resize is on).
• Surface style, Container background, Show background, Show close button, Close on background click, Close on Escape, Lock scroll, Allow resize: same options and defaults as Modal.

Location

• Display within: Entire form (default) or Anchored to a Columns, Container, Tabs, or Accordion element.

Behavior

• Content underneath (e.g. an in-progress form) stays mounted and untouched while the slideout is open.

Events

• onClose – fired when the slideout is dismissed, whether by the close button, background click, Escape, or a completed action inside it.

Dropdown

A small contextual panel anchored near the element that opened it — for short menus or quick actions, not a full-page interruption. Opened via an "Open Modal" action (display mode: Dropdown).

Parameters

• Title / Subtitle: optional header text.
• Position: below (default) / above / left / right — placement relative to the trigger element.
• Width preset: small (240px, default) / medium (320px) / custom (160–480px). The larger Modal/Slideout presets (Large, Extra-Large) aren't offered — a Dropdown is always a constrained contextual size.
• Surface style, Container background, Show close button: same options as Modal.
• Close on outside click: independently toggleable (default on) — a Dropdown can be set to stay open until explicitly closed.
• Close on Escape: default on.

Behavior

• No backdrop and no page-scroll lock (unlike Modal and Slideout) — these settings don't apply to Dropdowns.
• Always anchors to its trigger element, so there's no separate "Display within" / anchoring control — the Position setting above already defines placement.

Events

• onClose – fired when the dropdown is dismissed, whether by an outside click, Escape, or a completed action inside it.