Popups

The dashboard’s dialog: 440px, a flared silhouette, the layered frosted shadow, a scale-in on the iOS curve, and the page receding 3% behind it. Footer actions stack full-width, cancel first, and buttons square to 12px inside it.

In an app, let the dashboard render it

An iframe can only paint inside its own rectangle, so a popup an app draws itself stops at the app’s edge. Ask the dashboard instead: it opens this exact popup around one of your pages, so the scrim, the recede and the centring cover the whole dashboard.

// The page
const result = await paysio.popup.open({ path: '/popups/create', height: 344 })

// /popups/create — the body, laid out by PopupPage from the starter
<PopupPage>
  <PopupPageHeader>
    <PopupPageTitle>Create</PopupPageTitle>
    <PopupPageDescription>One line about what this does.</PopupPageDescription>
  </PopupPageHeader>
  <div className="grid gap-3">…fields…</div>
  <PopupPageFooter>
    <Button variant="secondary" onClick={() => closePopup()}>Cancel</Button>
    <Button onClick={() => closePopup({ created: true })}>Save</Button>
  </PopupPageFooter>
</PopupPage>

pathstringrequired

A route in your app; the popup body.

widthnumber

320–720px, default 440.

heightnumber

The body’s expected height, so the popup opens at its final size instead of growing when the body reports.

Rules

• Confirmations and short forms only. A create or edit flow with more than a handful of fields is a page.
• Title 24px semibold; one line of description; the body; then the stacked footer with cancel first.
• One-word confirm labels: Save, Delete, Clear. Longer labels wrap and break the pair.
• Escape, the scrim and the close button all close it. Do not add a second close control.