overlaysdialog

Dialog

Modal dialog with structured slots, backdrop overlay, and dismissal control.

Import#

import { Dialog } from 'moraine'

Slot Structure#

Wrapper trigger with optional backdrop and a floating panel with title, body, and footer slots.

trigger
├── overlay (optional)
└── content (portal)
    ├── header (optional)
    │   ├── wrapper (optional)
    │   │   ├── title (optional)
    │   │   └── description (optional)
    │   └── close (optional)
    ├── body (optional)
    └── footer (optional)

Examples#

Default Shell#

Header, description, actions, body, and footer slots.

1
function DefaultShell() {
2
  return (
3
    <div class="flex flex-wrap gap-3 items-center">
4
      <Dialog
5
        title="Delete Project"
6
        description="This action cannot be undone."
7
        body={
8
          <p class="text-sm text-foreground">
9
            The selected project and all related records will be permanently removed.
10
          </p>
11
        }
12
        footer={
13
          <>
14
            <Button variant="outline">Cancel</Button>
15
            <Button variant="destructive">Delete</Button>
16
          </>
17
        }
18
      >
19
        <Button>Open dialog</Button>
20
      </Dialog>
21
    </div>
22
  )
23
}

Variants#

close supports default button, hidden, and custom JSX content.

1
function Variants() {
2
  return (
3
    <div class="flex flex-wrap gap-3 items-center">
4
      <Dialog
5
        title="No close button"
6
        close={false}
7
        body="This dialog has no top-right close button."
8
      >
9
        <Button variant="outline">Close=false</Button>
10
      </Dialog>
11

12
      <Dialog
13
        title="Custom close"
14
        closeIcon={<span class="text-xs font-semibold size-full">Done</span>}
15
        body="Custom close content rendered in the close button."
16
      >
17
        <Button variant="outline">Custom close</Button>
18
      </Dialog>
19
    </div>
20
  )
21
}

Scrollable + Dismissible Control#

Scrollable body with prevent-close callback when dismiss is disabled.

1
function ScrollableDismissibleControl() {
2
  const SCROLLABLE_LINES = Array.from(
3
    { length: 16 },
4
    (_, index) => `Release note line ${index + 1}`,
5
  )
6

7
  const [preventedCloseCount, setPreventedCloseCount] = createSignal(0)
8

9
  return (
10
    <div class="flex flex-wrap gap-3 items-center">
11
      <Dialog
12
        scrollable
13
        title="Release Notes"
14
        description="Scrollable dialog content."
15
        body={
16
          <div class="space-y-1">
17
            <For each={SCROLLABLE_LINES}>
18
              {(line) => <p class="text-sm text-foreground">{line}</p>}
19
            </For>
20
          </div>
21
        }
22
      >
23
        <Button variant="secondary">Scrollable dialog</Button>
24
      </Dialog>
25

26
      <Dialog
27
        defaultOpen
28
        dismissible={false}
29
        onClosePrevent={() => setPreventedCloseCount((value) => value + 1)}
30
        title="Persistent dialog"
31
        body={
32
          <p class="text-sm text-foreground">
33
            Prevented close attempts: <span class="font-medium">{preventedCloseCount()}</span>
34
          </p>
35
        }
36
      >
37
        <Button variant="outline">Dismiss blocked</Button>
38
      </Dialog>
39
    </div>
40
  )
41
}

API Reference#

Attributes#

Slottrigger0 attributes

Element users activate to open the dialog.

No attribute metadata for this slot.

Props#

Prop	Type	Default	Description
body	`JSX.Element`	—	Custom element to render in the body slot.
children	`JSX.Element`	—	Content to render inside the dialog trigger slot.
class	`ClassValue`	—	Class applied to the component root or trigger element.
classes	`DialogT.Classes \| undefined`	—	Slot-based class overrides.
close	`boolean \| undefined`	`true`	Whether to show a close button.
closeIcon	`IconT.Name \| JSX.Element`	`icon-close`	Icon name or custom content for the close button.
defaultOpen	`boolean \| undefined`	—	Initial open state when uncontrolled.
description	`JSX.Element`	—	Secondary description displayed below the title.
dismissible	`boolean \| undefined`	—	Whether outside interaction and Escape should dismiss the shell.
footer	`JSX.Element`	—	Custom element to render in the footer slot.
fullscreen	`boolean \| undefined`	`false`	Whether the dialog should take up the full viewport.
header	`JSX.Element`	—	Custom element to render in the header slot.
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 the dialog content body should be scrollable.
style	`JSX.CSSProperties \| undefined`	—	—
styles	`DialogT.Styles \| undefined`	—	Slot-based style overrides.
title	`JSX.Element`	—	Primary title displayed in the dialog header.