Astryx Design System

useXDSImperativeDialog@xds/core v0.0.14 · useXDSImperativeDialog

Usage

Hook for showing a dialog without managing open state. Call dialog.show(content, options) to open and dialog.hide() to close. Render dialog.element in your JSX tree.

ts
import {useXDSImperativeDialog} from '@xds/core/Dialog'

Parameters

Param	Type	Description
show	(content: ReactNode, options?: DialogOptions) => void	Show the dialog with the given content. Options are the same as XDSDialog props minus isOpen/onOpenChange/children.
hide	() => void	Hide the dialog.
isOpen	boolean	Whether the dialog is currently open.
element	ReactNode	The dialog element — render this in your JSX tree.

Examples

Common configurations, variations, and states.

Dialog — Confirmation

Asks the user to confirm a destructive action before it happens. Use before deleting projects, removing team members, revoking API keys, or any irreversible operation.

Dialog — Form

Collects user input without navigating away from the page. Uses purpose="form" so clicking the backdrop won't close it. Use for editing profiles, creating items, or updating settings inline.

Dialog — Scrollable

Constrains the dialog height and scrolls the body when content overflows. Use for terms and conditions, license agreements, changelogs, or any long-form content the user needs to review before accepting.

Dialog — Required

Cannot be dismissed by Escape or backdrop click; the user must explicitly choose an action. Uses purpose="required". Use for ownership transfers, legal acknowledgements, or critical decisions where skipping is not an option.