Dialog v0.1.0 Overlay

Modal dialog driven by a core state machine; focus trap, scroll lock, Escape and backdrop dismissal handled automatically.

import { Dialog, useDialog } from "latticeui-react";

Examples

Confirmation dialog

Focus is trapped, scroll is locked, Escape and the backdrop dismiss.

Show code

<Dialog.Root>
  <Dialog.Trigger>Delete workspace</Dialog.Trigger>
  <Dialog.Content>
    <Dialog.Title>Delete workspace?</Dialog.Title>
    <Dialog.Description>
      This permanently deletes the workspace and all of its data.
    </Dialog.Description>
    <Button variant="danger">Delete</Button>
    <Dialog.Close />
  </Dialog.Content>
</Dialog.Root>

Anatomy

These data-part attributes are a versioned public API - style and test against them; they will not change in a minor release.

Part	Element	Stable selector
`trigger`	`button`	`[data-scope="dialog"][data-part="trigger"]`
`backdrop`	`div`	`[data-scope="dialog"][data-part="backdrop"]`
`positioner`	`div`	`[data-scope="dialog"][data-part="positioner"]`
`content`	`div[role=dialog]`	`[data-scope="dialog"][data-part="content"]`
`title`	`h2`	`[data-scope="dialog"][data-part="title"]`
`description`	`p`	`[data-scope="dialog"][data-part="description"]`
`close`	`button`	`[data-scope="dialog"][data-part="close"]`

Props

Prop	Type	Default	Description
`Root.open / defaultOpen`	`boolean`	—	Controlled / uncontrolled.
`Root.onOpenChange`	`(open: boolean) => void`	—
`Content.closeOnOutsideClick`	`boolean`	`true`

Accessibility

Roles: dialog with aria-modal

Key	Action
`Escape`	closes
`Tab`	cycles within the dialog (focus trap)

aria-labelledby/aria-describedby wired to Title/Description automatically.
Focus returns to the previously focused element on close.

Styling

Override styles by targeting the stable selectors below from any unlayered CSS - it always beats the library's @layer latticeui styles, no !important needed.

[data-scope="dialog"][data-part="content"] {
  /* your overrides */
}

State attributes: data-state=open