Dialog
Opens a scoped modal with a focus trap and focus restoration.@gemologic/sheen · overlaysPlayground
<Dialog title="Workspace settings" trigger="Open settings"><Input label="Name" /></Dialog>Variant matrix
Scoped modal
Anatomy
- Package
@gemologic/sheen- Source
packages/ui/src/primitives/Dialog.tsx- Tokens
--sheen-color-bg-raised--sheen-color-bg-overlay--sheen-elevation-modal
Accessibility
Role: dialogKeyboard: Tab, Shift+Tab, EscapeDo
- Mount inside the theme scope whose colors the overlay should inherit.
Do not
- Do not portal overlays to document.body.
Generated props
| Name | Type | Default | Description |
|---|---|---|---|
title * | string | — | Accessible dialog title. |
contentId | string | — | Optional stable content element ID for an external aria-controls relationship. Must be unique in the document. |
trigger | string | — | Visible label for the opening button. |
description | string | — | Optional explanatory text associated with the dialog. |
open | boolean | — | Controlled open state; rejected close requests retain the modal. |
defaultOpen | boolean | false | Uncontrolled initial open state; portal content mounts when the theme target is ready. |
onOpenChange | (open: boolean) => void | — | Requests a change in open state without mutating controlled ownership. |
dismissible | boolean | true | Allows Escape, outside press, and the close action; false disables all three. |
closeLabel | string | — | Visible and accessible close-action label; defaults to the scoped close message. |
initialFocus | () => HTMLElement | undefined | — | Resolves an enabled focus target inside the mounted dialog. |
returnFocus | () => HTMLElement | undefined | — | Optional surviving focus target after closing, useful for triggerless dialogs. |
shortcutScope | string | — | Unique modal shortcut scope ID, defaulting to an internal stable ID. Within ShortcutProvider, opening suspends outer scopes automatically. Register modal actions under this ID; do not reuse an application/global scope. |
class | string | — | Additional classes on modal content. |
footer | JSX.Element | — | App-owned footer actions beside the built-in close action. |