Dialog

Trigger · Backdrop · Positioner · Content · Title · Description · CloseTrigger

#Backdrop

A styled part — no props of its own; it takes the anatomy's shared styling.

#CloseTrigger

A styled part — no props of its own; it takes the anatomy's shared styling.

#Content

A styled part — no props of its own; it takes the anatomy's shared styling.

#Description

A styled part — no props of its own; it takes the anatomy's shared styling.

#Positioner

A styled part — no props of its own; it takes the anatomy's shared styling.

#Root

Prop	Type	Default	Description
`aria-label`	`string`		Human readable label for the dialog, in event the dialog title is not rendered
`closeOnEscape`	`boolean`	`true`	Whether to close the dialog when the escape key is pressed
`closeOnInteractOutside`	`boolean`	`true`	Whether to close the dialog when the outside is clicked
`defaultOpen`	`boolean`	`false`	The initial open state of the dialog when rendered. Use when you don't need to control the open state of the dialog.
`defaultTriggerValue`	`string \| null`		The initial trigger value when rendered. Use when you don't need to control the trigger value.
`finalFocusEl`	`() => HTMLElement \| null`		Element to receive focus when the dialog is closed
`id`	`string`		The unique identifier of the machine.
`ids`	`Partial<{ trigger: string; positioner: string; backdrop: string; content: string; closeTrigger: string; title: string; description: string; }>`		The ids of the elements in the dialog. Useful for composition.
`initialFocusEl`	`() => HTMLElement \| null`		Element to receive focus when the dialog is opened
`modal`	`boolean`	`true`	Whether to prevent pointer interaction outside the element and hide all content below it
`open`	`boolean`		The controlled open state of the dialog
`persistentElements`	`(() => Element \| null)[]`		Returns the persistent elements that: - should not have pointer-events disabled - should not trigger the dismiss event
`preventScroll`	`boolean`	`true`	Whether to prevent scrolling behind the dialog when it's opened
`restoreFocus`	`boolean`		Whether to restore focus to the element that had focus before the dialog was opened
`role`	`'dialog' \| 'alertdialog'`	`"dialog"`	The dialog's role
`trapFocus`	`boolean`	`true`	Whether to trap focus inside the dialog when it's opened
`triggerValue`	`string \| null`		The value of the trigger that currently open the dialog

Event	Payload
`exitComplete`	`—`
`openChange`	`details: OpenChangeDetails`
`update:open`	`open: boolean`
`triggerValueChange`	`details: TriggerValueChangeDetails`
`update:triggerValue`	`triggerValue: string \| null`
`focusOutside`	`event: FocusOutsideEvent`
`interactOutside`	`event: InteractOutsideEvent`
`pointerDownOutside`	`event: PointerDownOutsideEvent`
`escapeKeyDown`	`event: KeyboardEvent`
`requestDismiss`	`event: CustomEvent<{ originalLayer: HTMLElement; targetLayer: HTMLElement \| undefined; originalIndex: number; targetIndex: number; }>`

#Title

A styled part — no props of its own; it takes the anatomy's shared styling.

#Trigger

Prop	Type	Default	Description
`value`	`string`		The value that identifies this specific trigger