Dialog

A modal surface built on the native <dialog> element, opened and closed declaratively through Invoker Commands (commandfor/command) instead of a JavaScript-tracked open state.

Or press ⌘ I from anywhere.

View code

<Button commandfor="invite" command="show-modal">Invite people</Button>
<Text>
	Or press <Keyboard>⌘</Keyboard> <Keyboard>I</Keyboard> from anywhere.
</Text>

<Dialog id="invite" aria-labelledby="invite-title" mix={[hotkey("mod+i")]}>
	<Dialog.Header>
		<Dialog.Title id="invite-title">Invite people to Acme</Dialog.Title>
		<Dialog.Description>
			They join with the role you pick here. You can change it later from the members list.
		</Dialog.Description>
	</Dialog.Header>

	<TextField
		label="Email addresses"
		name="invites"
		type="email"
		placeholder="ana@acme.com, luis@acme.com"
		description="Separate more than one address with a comma."
		required
	/>

	<Label htmlFor="invite-role">Role</Label>
	<Select id="invite-role" name="role">
		<Select.Option value="viewer">Viewer — read everything</Select.Option>
		<Select.Option value="member" selected>
			Member — create and edit
		</Select.Option>
		<Select.Option value="admin">Admin — manage members and billing</Select.Option>
	</Select>

	<Label htmlFor="invite-note">Note</Label>
	<TextArea id="invite-note" name="note" placeholder="Anything they should know before joining." />

	<Dialog.Footer>
		<Button commandfor="invite" command="close" variant="outline" color="neutral">
			Cancel
		</Button>
		<Button commandfor="invite" command="close">Send invites</Button>
	</Dialog.Footer>
	<Dialog.Close commandfor="invite" aria-label="Close" />
</Dialog>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Dialog } from "@sdxc/ui";

Renders the dialog panel as a native <dialog> host, its ::backdrop tinted and, where supported, blurred to dim the page behind it. The panel declares the ui-dialog named container so Dialog.Header and Dialog.Footer can size against the panel's own width; Invoker Commands open and close it declaratively — a trigger elsewhere points commandfor at this element's id with command="show-modal", and any control inside, including Dialog.Close, points commandfor at that same id with command="close".

Composition

The parts the component publishes, each a static property of the host.

Dialog
Dialog.HeaderRenders Dialog.HeaderProps.children as the panel's header slot: a column stacking Dialog.Title and Dialog.Description, centered while narrow and start-aligned (flipping under dir="rtl") once the panel's own ui-dialog container grows past 40rem.
Dialog.TitleRenders Dialog.TitleProps.children as the panel's heading, inside the native heading element matching the nearest ambient heading level — <h1> by default — sized and weighted as the panel's most prominent line of text at every level.
Dialog.DescriptionRenders Dialog.DescriptionProps.children as the panel's supporting copy, in a native <p> set to the panel's muted foreground color so it reads as secondary to Dialog.Title.
Dialog.FooterRenders Dialog.FooterProps.children as the panel's action row: a column of stacked, full-width controls while the panel is narrow, switching to a single end-aligned row past the panel's own 40rem container mark.
Dialog.CloseRenders a dismiss control for the ancestor Dialog named by commandfor: a small, ghost-styled Button with a fixed "X" glyph, pinned to the panel's corner.

Examples

<Dialog id="welcome" mix={zoom({ duration: durations.normal })}>
	<Dialog.Header>
		<Dialog.Title>{t("welcome.title")}</Dialog.Title>
	</Dialog.Header>
</Dialog>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Prop	Type	Description
`children`	`RemixNode`	The panel's compound parts: Dialog.Header, Dialog.Footer, Dialog.Close, or any other content.

Also accepts everything in TagProps<"dialog">.

Also accepts everything in TagProps<"div">.

Dialog.Title

Also accepts everything in TagProps<"h1">.

Dialog.Description

Also accepts everything in TagProps<"p">.

Also accepts everything in TagProps<"div">.

Dialog.Close

Prop	Type	Description
`commandfor`	`string`	`id` of the ancestor Dialog this button dismisses.
`command?`	`"close"`	Invoker Commands verb dispatched to the target Dialog. Defaults to `"close"`.
`"aria-label"`	`string`	Accessible label for the icon-only control — required, since the button carries no visible text for assistive technology to read.