Overlays

Dialog

A modal overlay rendered above the page with a backdrop. Focus stays inside it while it is open.

Import

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@mikenotthepope/substrateui"

Composition

Dialog
├── DialogTrigger
└── DialogContent
    ├── DialogHeader
    │   ├── DialogTitle
    │   └── DialogDescription
    └── DialogFooter

Labels

The close button is an icon, so this string is its entire accessible name. Override one instance with the labels prop on the component, or every instance at once through LabelsProvider's dialog key — the provider is how you translate the set once instead of at each call site.

Prop	Type	Default	Description
`close`	`string`	`"Close"`	Accessible name for the corner close button.

Accessibility

Built on Base UI primitives, so focus is trapped inside the overlay while open and restored to the trigger on close. Escape closes the overlay. The backdrop is marked aria-hidden.

Every dialog must have a DialogTitle. If the title should be visually hidden, wrap it in VisuallyHiddenfrom Base UI — the accessible name is required even when the design doesn't show it.

API Reference

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state of the dialog.
`onOpenChange`	`(open: boolean) => void`	—	Callback fired when the open state changes.