---
title: Dialog
description: Present a labeled modal task with structured content and dismissal.
package: moraine
version: 0.6.0
repository: https://github.com/subframe7536/moraine
---
# Dialog
> Present a labeled modal task with structured content and dismissal.
Use Dialog when an action or form needs focused attention with a labeled modal surface. The trigger and content share disclosure state through the root.
## Basic usage
```tsx
import { Button, Dialog } from 'moraine'
export function Example() {
return (
)
}
```
## Anatomy
```text
Dialog [component; no DOM]
├── Dialog.Trigger [part; slot=trigger]
├── Dialog.Close [part]
├── overlay [slot]
└── Dialog.Content [part; slot=content]
├── Dialog.Header [part; slot=header]
│ ├── Dialog.Title [part; slot=title]
│ ├── Dialog.Description [part; slot=description]
│ └── Dialog.Action [part; slot=action]
├── contentClose [slot]
├── Dialog.Body [part; slot=body]
└── Dialog.Footer [part; slot=footer]
```
Content is portaled. Overlay and Content are siblings by default; scrollable overlay mode nests Content inside Overlay.
## Usage
### Content composition
Use Content `title` and `description` for simple cases:
```tsx
```
For a custom header layout, compose the anatomy parts:
```tsx
SettingsUpdate your account..........
```
An explicit `Dialog.Header` replaces the header generated by Content's `title` and `description`.
`Dialog.Title` and `Dialog.Description` connect their IDs to the surface's accessible name and description.
Without a visible title, supply root `ariaLabel` or native ARIA labeling on Content.
`Dialog.Action` places actions beside the title. `Dialog.Close` is an explicit close control you can
place inside the root; it is separate from Content's automatic corner close button.
### Focus and outside interaction
`modal` defaults to `true`: focus stays inside the surface, outside content is hidden from assistive
technology, and native outside pointer actions are prevented. Closing restores focus to the trigger.
Setting `modal={false}` allows focus to leave the surface, but does not disable Escape or outside
dismissal. `dismissible` controls those close requests. Scroll locking is independent:
`preventScroll` defaults to `true`. For interaction with the background page, also set
`preventScroll={false}` and `overlay={false}`.
### Styling and portal placement
Apply `class` and object `style` directly to each rendered part. Root `classes` and `styles` set
slot defaults for the family; Content's slot maps cover only `overlay`, `content`, and `contentClose`.
See [Customization](https://moraine.subf.dev/docs/customization.md#the-4-layer-override-hierarchy) for precedence.
Set root `portalMount` to place Content in a chosen container. This also works for controlled
surfaces without a Trigger.
### Nested overlays
Nested roots keep dismissal and focus restoration local to the active layer. Escape closes the topmost dialog or popover, then returns focus to its trigger inside the parent dialog.
```tsx
import { Button, Dialog, Popover } from 'moraine'
export function NestedOverlays() {
return (
)
}
```
### State and dismissal
Use controlled `open` with `onOpenChange` when the surrounding flow owns visibility. `dismissible={false}` blocks outside and Escape dismissal and calls `onClosePrevent`; provide a clear explicit close path in that case.
```tsx
import { Badge, Button, Dialog } from 'moraine'
import { createSignal, Show } from 'solid-js'
export function StateDismissal() {
const [open, setOpen] = createSignal(false)
const [dismissible, setDismissible] = createSignal(false)
const [preventedAttempts, setPreventedAttempts] = createSignal(0)
return (
)
}
```
### Structure and lifecycle
Use root `scrollable` for long content or `fullscreen` for a full-viewport task. `onExitComplete`
runs after the overlay and content finish their exit animations.
```tsx
import { Badge, Button, Dialog } from 'moraine'
import { createSignal } from 'solid-js'
export function StructureLifecycle() {
const [exits, setExits] = createSignal(0)
const [status, setStatus] = createSignal('Idle')
return (