Dialog API

API documentation for Dialog component

Dialog#

Props#

Defines valid properties in Dialog component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogInstance) => ReactNode)	null	The children to render.
position	"center" \| "top" \| "bottom" \| "left" \| "right" \| "topleft" \| "topright" \| "bottomleft" \| "bottomright"	center	Position of the dialog.
onOpenChange	(event: DialogChangeEvent) => void	null	Callback function that is called when the trigger is clicked.
open	boolean	false	Specifies the visibility of the dialog.
defaultOpen	boolean	false	Specifies the default visibility of the dialog.
draggable	boolean	true	Enables dragging to change the position using header.
keepInViewport	boolean	true	Keeps dialog in the viewport.
minX	number	0	Minimum value for the left coordinate of dialog in dragging.
minY	number	0	Minimum value for the top coordinate of dialog in dragging.
modal	boolean	undefined	Defines if background should be blocked when dialog is displayed.
dismissableMask	boolean	false	Specifies if clicking the modal background should hide the dialog.
closeOnEscape	boolean	true	Specifies if pressing escape key should hide the dialog.
blockScroll	boolean	false	Whether background scroll should be blocked when dialog is visible.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
appendTo	HTMLElement \| "body" \| "self"	body	A valid query selector or an HTMLElement to specify where the dialog gets attached.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

State#

Defines valid state in Dialog component.

name	type	default	description
opened	boolean	null	Whether the dialog is currently opened.
maximized	boolean	null	Whether the dialog is currently maximized.
maskVisible	boolean	null	Whether the mask is currently visible.

Exposes#

Defines the methods and properties exposed by Dialog component.

name	type	default	description
state	useDialogState	null	Current state of the dialog.
maskRef	RefObject<HTMLDivElement>	null	Reference to the mask element.
motionRef	RefObject<{ elementRef: RefObject<HTMLDivElement> }>	null	Reference to the close button element.
closeButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the close button element.
maximizableButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the maximizable button element.
onOpenStateChange	() => void	null	Method to change the open state of the dialog.
close	() => void	null	Method to close the dialog.
toggleMaximized	() => void	null	Method to toggle maximized state.
onMaskMouseDown	(event: MouseEvent) => void	null	Handler for mask mouse down events.
onMaskMouseUp	() => void	null	Handler for mask mouse up events.
onDragStart	(event: MouseEvent) => void	null	Handler for drag start events.
onMotionEnter	() => void	null	Handler for motion enter events.
onMotionAfterEnter	() => void	null	Handler for motion after enter events.
onMotionBeforeLeave	() => void	null	Handler for motion before leave events.
onMotionLeave	() => void	null	Handler for motion leave events.
onMotionAfterLeave	() => void	null	Handler for motion after leave events.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of Dialog component.

name	type	default	description
root	DialogPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.
mask	DialogPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the mask's DOM element.
trigger	DialogPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the trigger's DOM element.
triggerIcon	DialogPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the trigger icon's DOM element.
portal	DialogPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the portal's DOM element.
header	DialogPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the header's DOM element.
title	DialogPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the title's DOM element.
headerActions	DialogPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the headerActions's DOM element.
maximizable	DialogPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the maximizable's DOM element.
maximizableIcon	DialogPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the maximizable icon's DOM element.
close	DialogPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the close's DOM element.
closeIcon	DialogPassThroughType<HTMLAttributes<HTMLElement>>	null	Used to pass attributes to the close icon's DOM element.
content	DialogPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the content's DOM element.
footer	DialogPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the footer's DOM element.

Types#

Instance

Instance of Dialog component.

values
ComponentInstance<DialogProps, DialogState, DialogExposes>

DialogTrigger#

Props#

Defines valid properties in DialogTrigger component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogTriggerInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogTriggerInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogTriggerPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogTriggerInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogTrigger component.

name	type	default	description
dialog	DialogInstance	null	Instance of the Dialog component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogTrigger component.

name	type	default	description
root	DialogTriggerPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogTrigger component.

values
ComponentInstance<DialogTriggerProps, DialogTriggerState, DialogTriggerExposes>

DialogPortal#

Props#

Defines valid properties in DialogPortal component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogPortalInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogPortalInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogPortalPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogPortalInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogPortal component.

name	type	default	description
dialog	DialogInstance	null	Instance of the Dialog component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogPortal component.

name	type	default	description
root	DialogPortalPassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogPortal component.

values
ComponentInstance<DialogPortalProps, DialogPortalState, DialogPortalExposes>

DialogHeader#

Props#

Defines valid properties in DialogHeader component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogHeaderInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogHeaderInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogHeaderPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogHeaderInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogHeader component.

name	type	default	description
dialog	DialogInstance	null	The Dialog component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogHeader component.

name	type	default	description
root	DialogHeaderPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogHeader component.

values
ComponentInstance<DialogHeaderProps, DialogHeaderState, DialogHeaderExposes>

DialogTitle#

Props#

Defines valid properties in DialogTitle component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogTitleInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogTitleInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogTitlePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogTitleInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogTitle component.

name	type	default	description
dialog	DialogInstance	null	The Dialog component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogTitle component.

name	type	default	description
root	DialogTitlePassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogTitle component.

values
ComponentInstance<DialogTitleProps, DialogTitleState, DialogTitleExposes>

DialogHeaderActions#

Props#

Defines valid properties in DialogHeaderActions component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogHeaderActionsInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogHeaderActionsInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogHeaderActionsPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogHeaderActionsInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogHeaderActions component.

name	type	default	description
dialog	DialogInstance	null	The dialog instance that the header actions belong to.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogHeaderActions component.

name	type	default	description
root	DialogHeaderActionsPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogHeaderActions component.

values
ComponentInstance<DialogHeaderActionsProps, DialogHeaderActionsState, DialogHeaderActionsExposes>

DialogMaximizable#

Props#

Defines valid properties in DialogMaximizable component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogMaximizableInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogMaximizableInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogMaximizablePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogMaximizableInstance) => ReactNode)	null	The children to render.
iconOnly	boolean	true	Whether to show the DialogMaximizable with a borderless style.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	'secondary'	Severity type of the DialogMaximizable.
variant	"link" \| "text" \| "outlined"	'text'	Variant of the DialogMaximizable.
rounded	boolean	true	Whether to show the DialogMaximizable with a rounded style.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogMaximizable component.

name	type	default	description
dialog	DialogInstance	null	Instance of the Dialog component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogMaximizable component.

name	type	default	description
root	DialogMaximizablePassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogMaximizable component.

values
ComponentInstance<DialogMaximizableProps, DialogMaximizableState, DialogMaximizableExposes>

DialogClose#

Props#

Defines valid properties in DialogClose component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogCloseInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogCloseInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogClosePassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogCloseInstance) => ReactNode)	null	The children to render.
iconOnly	boolean	true	Whether to show the DialogClose with a borderless style.
severity	string & {} \| "secondary" \| "info" \| "success" \| "warn" \| "danger" \| "contrast" \| "help"	'secondary'	Severity type of the DialogClose.
variant	"link" \| "text" \| "outlined"	'text'	Variant of the DialogClose.
rounded	boolean	true	Whether to show the DialogClose with a rounded style.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogClose component.

name	type	default	description
dialog	DialogInstance	null	Instance of the Dialog component.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogClose component.

name	type	default	description
root	DialogClosePassThroughType<HTMLAttributes<HTMLButtonElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogClose component.

values
ComponentInstance<DialogCloseProps, DialogCloseState, DialogCloseExposes>

DialogContent#

Props#

Defines valid properties in DialogContent component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogContentInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogContentInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogContentPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogContentInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogContent component.

name	type	default	description
dialog	DialogInstance	null	The Dialog component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogContent component.

name	type	default	description
root	DialogContentPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogContent component.

values
ComponentInstance<DialogContentProps, DialogContentState, DialogContentExposes>

DialogFooter#

Props#

Defines valid properties in DialogFooter component.

name	type	default	description
ref	Ref<unknown>	null	The reference to the component instance.
pIf	boolean	true	Whether the component should be rendered.
style	CSSProperties \| ((instance?: DialogFooterInstance) => CSSProperties)	null	The style to apply to the component.
className	string \| ((instance?: DialogFooterInstance) => string)	null	The class name to apply to the component.
as	string \| number \| bigint \| boolean \| ComponentClass<any, any> \| FunctionComponent<any> \| ReactElement<unknown, string \| JSXElementConstructor<any>> \| Iterable<ReactNode, any, any> \| ReactPortal \| Promise<AwaitedReactNode>	null	The component type to render.
asChild	boolean	false	Whether the component should be rendered as a child component.
pt	SafeRecord<DialogFooterPassThrough>	null	The pass-through props to pass to the component
ptOptions	PassThroughOptions	null	The pass-through options to pass to the component
unstyled	boolean	null	Whether the component should be rendered without classes.
dt	unknown	null	The design token to use for the component.
styles	StylesOptions<ComponentInstance>	null	The styles to use for the component.
children	ReactNode \| ((instance: DialogFooterInstance) => ReactNode)	null	The children to render.
[key: string]	any	null
pt-{optionName}-*	-	null	Pass through attributes for customizing component. For more info, see Pass Through tab.

Exposes#

Defines the methods and properties exposed by DialogFooter component.

name	type	default	description
dialog	DialogInstance	null	The Dialog component instance.

Interfaces#

PassThroughOptions

Defines passthrough(pt) options of DialogFooter component.

name	type	default	description
root	DialogFooterPassThroughType<HTMLAttributes<HTMLDivElement>>	null	Used to pass attributes to the root's DOM element.

Types#

Instance

Instance of DialogFooter component.

values
ComponentInstance<DialogFooterProps, DialogFooterState, DialogFooterExposes>

useDialog#

Props#

Defines valid properties in useDialog.

name	type	default	description
open	boolean	false	Specifies the visibility of the dialog.
defaultOpen	boolean	false	Specifies the default visibility of the dialog.
draggable	boolean	true	Enables dragging to change the position using header.
keepInViewport	boolean	true	Keeps dialog in the viewport.
minX	number	0	Minimum value for the left coordinate of dialog in dragging.
minY	number	0	Minimum value for the top coordinate of dialog in dragging.
modal	boolean	undefined	Defines if background should be blocked when dialog is displayed.
dismissableMask	boolean	false	Specifies if clicking the modal background should hide the dialog.
closeOnEscape	boolean	true	Specifies if pressing escape key should hide the dialog.
blockScroll	boolean	false	Whether background scroll should be blocked when dialog is visible.
baseZIndex	number	0	Base zIndex value to use in layering.
autoZIndex	boolean	true	Whether to automatically manage layering.
appendTo	HTMLElement \| "body" \| "self"	body	A valid query selector or an HTMLElement to specify where the dialog gets attached.
onOpenChange	(event: useDialogChangeEvent) => void	null	Callback function that is called when the trigger is clicked.

State#

Defines valid state in useDialog.

name	type	default	description
opened	boolean	null	Whether the dialog is currently opened.
maximized	boolean	null	Whether the dialog is currently maximized.
maskVisible	boolean	null	Whether the mask is currently visible.

Exposes#

Defines the methods and properties exposed by useDialog.

name	type	default	description
state	useDialogState	null	Current state of the dialog.
maskRef	RefObject<HTMLDivElement>	null	Reference to the mask element.
motionRef	RefObject<{ elementRef: RefObject<HTMLDivElement> }>	null	Reference to the close button element.
closeButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the close button element.
maximizableButtonRef	RefObject<{ elementRef: RefObject<HTMLButtonElement> }>	null	Reference to the maximizable button element.
onOpenStateChange	() => void	null	Method to change the open state of the dialog.
close	() => void	null	Method to close the dialog.
toggleMaximized	() => void	null	Method to toggle maximized state.
onMaskMouseDown	(event: MouseEvent) => void	null	Handler for mask mouse down events.
onMaskMouseUp	() => void	null	Handler for mask mouse up events.
onDragStart	(event: MouseEvent) => void	null	Handler for drag start events.
onMotionEnter	() => void	null	Handler for motion enter events.
onMotionAfterEnter	() => void	null	Handler for motion after enter events.
onMotionBeforeLeave	() => void	null	Handler for motion before leave events.
onMotionLeave	() => void	null	Handler for motion leave events.
onMotionAfterLeave	() => void	null	Handler for motion after leave events.

Events#

useDialogChangeEvent

Event fired when the dialog's open state changes.

name	type	description
value	boolean	The value of the dialog.

Types#

Instance

Instance of useDialog headless.

values
HeadlessInstance<useDialogProps, useDialogState, useDialogExposes>