Dialog

Present focused content or actions in a modal with a backdrop, focus management, and background scroll lock.

We are building SnowUI components into interfaces people can use directly in AI conversations. Conversational UI is still in development; this page demonstrates website usage. Supported chat platforms and component versions will be announced after verification. Generating and using SnowUI interfaces inside AI conversations is completely free. It is not a project, uses no project or developer-seat quota, and requires no SnowUI registration, activation, or paid proof.

How to use

Use Dialog when content needs its own focus and closing flow. Use Popover for a small layer anchored to a button, or Tooltip for a brief hint. Compose titles and actions with the public roles.

Control the panel with bind:open. Outside clicks and Escape close it by default.
Compose content with the public title, content, footer, and close roles. Configure explicit children directly; parts affects only the built-in title, separator, and close button.

Import

import { Dialog } from '@snowui-design-system/components';

Usage

Sizes

Backdrops

Open

API Reference

Property	Type	Default	Example	Description
`id`	`string`	`—`	`id="example"`	Unique identifier in template mode.
`template`	`boolean`	`false`	`template`	Register a template without displaying it immediately.
`as`	`"dialog" \| undefined`	`—`	`as={value}`	Marker for embedded mode.
`open`	`boolean`	`false`	`open`	Visibility in panel mode; supports bind:open.
`onOpenChange`	`(open: boolean) => void`	`—`	`onOpenChange={(value) => { /* handle value */ }}`	Callback when panel-mode visibility changes.
`backdrop`	`DialogBackdrop`	`"opaque"`	`backdrop={value}`	Backdrop variant. Shares backdrop visuals with ImageViewer; Dialog still manages closing and motion.
`size`	`DialogSize`	`"md"`	`size={value}`	Panel size.
`closeOnOutside`	`boolean`	`true`	`closeOnOutside`	Close when the backdrop outside the panel is clicked. false prevents this; empty space inside the panel never closes it. Consider false for unsaved forms or choices that require explicit confirmation.
`closeOnEscape`	`boolean`	`true`	`closeOnEscape`	Whether Escape closes the dialog.
`pinOffset`	`number`	`—`	`pinOffset={42}`	Shared offset in pixels for built-in and external Pin. When omitted, a token scaled with the root font supplies 16px for sm/md or 20px for lg.
`pinOffsetX`	`number`	`—`	`pinOffsetX={42}`	Override the horizontal offset for built-in and external Pin. Takes precedence over pinOffset.
`pinOffsetY`	`number`	`—`	`pinOffsetY={42}`	Override the vertical offset for built-in and external Pin. Takes precedence over pinOffset.
`role`	`"dialog" \| string`	`"dialog"`	`role="Example"`	Accessible role of the panel.
`title`	`string`	`—`	`title="Example"`	Generate a built-in text title. Ignored when an external child with as="title" exists.
`separator`	`boolean`	`—`	`separator`	Control the divider under the title. None is generated without a title. Defaults to false for sm and true for md/lg.
`showCloseButton`	`boolean`	`true`	`showCloseButton`	Show the built-in close button in the upper right; does not hide an external close-role child.
`closeLabel`	`string`	`LocaleProvider close message`	`closeLabel="Example"`	Accessible name of the built-in close button, defaulting to the current LocaleProvider close message.
`parts`	`ComponentPartsOf<{ Button: typeof Button; Text: typeof Text; Separator: typeof Separator }>`	`—`	`parts={partsOptions}`	Configure only the actual built-in close Button, title Text, and Separator. Does not affect explicit children or footer components; Dialog owns title id, children, and ARIA wiring.
`children`	`Snippet`	`—`	`<Dialog>Content</Dialog>`	Dialog content.