Dialog Props

Name	Type	Default	Description
isOpen	boolean	—	Whether the dialog is open. Required.
isInline	boolean	false	Renders content in normal flow without the modal dialog, backdrop, or focus behavior. For documentation previews only.
width	number | string	400	Preferred width. Numbers are pixels. Clamped to the viewport on narrow screens. Ignored by fullscreen.
maxHeight	number | string	'75vh'	Maximum height. Numbers are pixels. Ignored by fullscreen.
position	DialogPosition	Centered	Static offsets: top, bottom, start, end. Logical start and end mirror under RTL. Ignored by fullscreen.
variant	'standard' | 'fullscreen'	'standard'	Standard dialog or a dialog that fills the viewport.
purpose	'required' | 'form' | 'info'	'info'	required disables Escape and backdrop dismissal. form allows Escape only. info allows both.
padding	0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 8 | 10	Theme default (16px)	Inner padding, mapped to the --astryx-spacing-* tokens.

Events

• openChange(isOpen: boolean): fires with false when the user requests dismissal through Escape or a backdrop click, depending on purpose. The parent sets isOpen to close.

Slots

• default: dialog content. Usually a DialogHeader followed by body content and actions.

DialogHeader Props

Name	Type	Default	Description
title	string	—	Dialog title. Receives default focus on open and names the dialog. Required.
subtitle	string	—	Secondary text below the title. Not rendered when empty.
hasCloseButton	boolean	false	Shows a close button that emits openChange(false).
closeButtonLabel	string	'Close'	Accessible name of the close button.

DialogHeader Events and Slots

• openChange(isOpen: boolean): fires with false from the close button.
• startContent: content before the title, such as a back button.
• endContent: content after the title, before the close button.

useImperativeDialog

• show(content, options?): opens the dialog with content. Options merge with the defaults passed to the hook.
• hide(): closes the dialog.
• isOpen: readonly ref of the open state.
• Host: component to render once in the template.

Theme

.my-dialog {
  --astryx-dialog-background: #fff;
  --astryx-dialog-foreground: #000;
}

• --astryx-dialog-background: surface color.
• --astryx-dialog-foreground: text color.
• --astryx-dialog-overlay: backdrop color.
• --astryx-dialog-shadow: surface shadow.
• --astryx-dialog-padding: default inner padding when the padding prop is not set.
• --astryx-dialog-title-color: header title color.