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
Parameters
| Param | Type | Description |
|---|---|---|
show | (content: ReactNode, options?: DialogOptions) => void | Show the dialog with the given content. Options are the same as Dialog 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.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.
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.
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.
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.