Feat: Dialog

[khairulhaaziq]

reference

API Reference

Root

Contains all the parts of a dialog.

Name	Type	Description
defaultOpen	boolean	The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
open	boolean	The controlled open state of the dialog. Must be used in conjunction with onOpenChange.
onOpenChange	(open: boolean) => void	Event handler called when the open state of the dialog changes.
modal	boolean	The modality of the dialog. When set to true, interaction with outside elements will be disabled and only dialog content will be visible to screen readers.

Trigger

The button that opens the dialog.

Name	Type	Description
asChild	boolean	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Attribute	Values
[data-state]	['open', 'closed']

Portal

When used, portals your overlay and content parts into the body.

Name	Type	Description
forceMount	boolean	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. If used on this part, it will be inherited by Dialog.Overlay and Dialog.Content.
container	HTMLElement	Specify a container element to portal the content into.

Overlay

A layer that covers the inert portion of the view when the dialog is open.

Name	Type	Description
asChild	boolean	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
forceMount	boolean	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from Dialog.Portal.

Attribute	Values
[data-state]	['open', 'closed']

Content

Contains content to be rendered in the open dialog.

Name	Type	Description
asChild	boolean	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
forceMount	boolean	Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries. It inherits from Dialog.Portal.
onOpenAutoFocus	(event: Event) => void	Event handler called when focus moves into the component after opening. It can be prevented by calling event.preventDefault.
onCloseAutoFocus	(event: Event) => void	Event handler called when focus moves to the trigger after closing. It can be prevented by calling event.preventDefault.
onEscapeKeyDown	(event: KeyboardEvent) => void	Event handler called when the escape key is down. It can be prevented by calling event.preventDefault.
onPointerDownOutside	(event: PointerDownOutsideEvent) => void	Event handler called when a pointer event occurs outside the bounds of the component. It can be prevented by calling event.preventDefault.
onInteractOutside	(event: React.FocusEvent	MouseEvent

Attribute	Values
[data-state]	['open', 'closed']

Close

The button that closes the dialog.

Name	Type	Description
asChild	boolean	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Title

An accessible title to be announced when the dialog is opened.

If you want to hide the title, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>.

Name	Type	Description
asChild	boolean	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.

Description

An optional accessible description to be announced when the dialog is opened.

If you want to hide the description, wrap it inside our Visually Hidden utility like this <VisuallyHidden asChild>. If you want to remove the description entirely, remove this part and pass aria-describedby={undefined} to Dialog.Content.

Name	Type	Description
asChild	boolean	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.