OVERLAYS / COMPONENT 44

Modal

React component

Focus a task in a dialog that contains and restores focus.

Try it out

Use the live controls or open the Code tab to view and copy the example.

API reference

Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.

Prop	Type	Description
`title`Required	`string`	Visible title and accessible name.
`description`Required	`string`	Supporting instructions associated with the control.
`trigger`	`ReactElement<unknown, string \| JSXElementConstructor<any>> \| undefined`	A single focusable React element; use a staqui Button or Link.
`open`	`boolean \| undefined`	Controlled overlay visibility.
`defaultOpen`	`boolean \| undefined`	See the typed definition and working example for this option.
`onOpenChange`	`((open: boolean) => void) \| undefined`	Called when the user opens or dismisses the overlay.
`children`Required	`ReactNode`	Content rendered inside the component.
`footer`	`ReactNode`	See the typed definition and working example for this option.
`size`	`Size \| undefined`Default: `"medium"`	Size within the shared component scale.

Accessibility & interaction

Radix Dialog handles focus, Escape, background inertness and scroll lock. Controlled open/onOpenChange replaces imperative show/hide methods. Title and description are required.

Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.

Variants & implementation notes

Radix Dialog handles focus, Escape, background inertness and scroll lock. Controlled open/onOpenChange replaces imperative show/hide methods. Title and description are required.

Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.