overlayspopup

Popup

Low-level overlay primitive providing portal, backdrop, and content positioning.

Import#

import { Popup } from 'moraine'

Slot Structure#

Wrapper trigger with an optional backdrop and a floating content portal.

trigger
├── overlay (optional)
└── content (portal)

Examples#

Default Container#

Popup provides only container + overlay. Content styling is fully custom.

1
function DefaultContainer() {
2
  return (
3
    <Popup
4
      content={
5
        <div class="p-4 b-1 b-border rounded-xl bg-background ring-1 ring-foreground/10 shadow-md">
6
          <h3 class="text-sm font-semibold">Popup content</h3>
7
          <p class="text-sm text-muted-foreground mt-1">
8
            This content controls its own spacing and visuals.
9
          </p>
10
        </div>
11
      }
12
    >
13
      <Button>Open popup</Button>
14
    </Popup>
15
  )
16
}

Dismiss Control#

Block outside dismiss and count prevent-close attempts.

1
function DismissControl() {
2
  const [preventedCloseCount, setPreventedCloseCount] = createSignal(0)
3

4
  return (
5
    <Popup
6
      dismissible={false}
7
      onClosePrevent={() => setPreventedCloseCount((value) => value + 1)}
8
      content={
9
        <div class="p-4 b-1 b-border rounded-xl bg-background ring-1 ring-foreground/10 shadow-md">
10
          <h3 class="text-sm font-semibold">Persistent popup</h3>
11
          <p class="text-sm text-muted-foreground mt-1">Refresh to dismiss</p>
12
          <p class="text-sm text-muted-foreground mt-1">
13
            Prevented close attempts: {preventedCloseCount()}
14
          </p>
15
        </div>
16
      }
17
    >
18
      <Button variant="secondary">Dismiss blocked</Button>
19
    </Popup>
20
  )
21
}

Scrollable Overlay Mode#

Scrollable overlay keeps content in flow while preserving the backdrop.

1
function ScrollableOverlayMode() {
2
  const SCROLLABLE_LINES = Array.from({ length: 48 }, (_, index) => `Popup line ${index + 1}`)
3

4
  return (
5
    <Popup
6
      scrollable
7
      content={
8
        <div class="p-4 b-1 b-border rounded-xl bg-background ring-1 ring-foreground/10 shadow-md">
9
          <h3 class="text-sm font-semibold">Scrollable Popup</h3>
10
          <div class="mt-2 space-y-1">
11
            <For each={SCROLLABLE_LINES}>
12
              {(line) => <p class="text-sm text-foreground">{line}</p>}
13
            </For>
14
          </div>
15
        </div>
16
      }
17
    >
18
      <Button variant="outline">Open scrollable popup</Button>
19
    </Popup>
20
  )
21
}

API Reference#

Attributes#

Slottrigger0 attributes

Element users activate to open the popup.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
children	`JSX.Element`	—	Element that triggers the popup or additional content.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`PopupT.Classes \| undefined`	—	—
content	`ComponentOrElement<ModalContentContext> \| undefined`	—	Modal content rendered inside the content surface.
defaultOpen	`boolean \| undefined`	—	Initial open state when uncontrolled.
dismissible	`boolean \| undefined`	—	Whether outside interaction and Escape should dismiss the shell.
fullscreen	`boolean \| undefined`	`false`	Whether the popup should cover the entire viewport.
id	`string \| undefined`	—	Unique identifier used to derive the content id.
layout	`"default" \| "scrollable" \| "fullscreen" \| undefined`	—	—
onClosePrevent	`(() => void) \| undefined`	—	Called when a dismissal attempt is blocked.
onOpenChange	`((open: boolean) => void) \| undefined`	—	Called whenever the open state changes.
open	`boolean \| undefined`	—	Controlled open state.
overlay	`boolean \| undefined`	—	Whether to render the overlay element.
ref	`JSX.HTMLElementTags["span"] extends { ref?: infer Ref; } ? Ref : never \| undefined`	—	—
scrollable	`boolean \| undefined`	`false`	Whether to allow scrolling within the popup.
style	`JSX.CSSProperties \| undefined`	—	—
styles	`PopupT.Styles \| undefined`	—	—