Primitive

DialogSurface

Dialog panel sizing and dialog semantics for overlay workflows.

Use DialogSurface inside Overlay. Keep form behavior and state in components, not in the dialog primitive.
surface
DOM renderImage render
DialogSurfaceDefault

Playground

Controls update query params directly, so every primitive state can be linked, rendered, and screenshotted deterministically.

Loading playground

Rendered matrix

Every state maps to the same primitive render route through the state query param.

Default

Dialog surface sized for focused workflows.
Render state

Compact

Compact dialog width.
Render state

Wide

Wide dialog width for complex generated interfaces.
Render state

Public contract

The public prop table is generated from item metadata and schema-backed controls.
NameTypeDefaultDescription
measure'compact' | 'default' | 'wide'-Dialog width role.
modalboolean-Whether to set aria-modal.
childrenReactNode-Dialog content, usually Panel.