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, ortop— 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) orAnchored— 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), orbottom. - 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) orAnchoredto 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.