Dialog

A window overlaid on either the primary window or another dialog window, rendering the content underneath inert.

View code

Features

Fully managed focus
Can be controlled or uncontrolled
Esc closes the component automaticlaly

Anatomy

Trigger: The button(s) that open the dialog
Overlay: The dim background that is typically behind a dialog element.
Content: Container for the content within the dialog.
Title: The title of the dialog
Description: The description which supports the title
Close: The button(s) that close the dialog

Usage

To create a dialog, use the createDialog builder function. You can then reference the anatomy or example above to create your dialog.

Example Components

Drawer

An overlay window that can be used to display a variety of content including dialogs, drawers, sidebars, and more. As an example, here's a drawer component that slides in from the left side of the screen.

View code

API Reference

createDialog

Props

Prop	Default	Type / Description
`role`	`'dialog'`	`'dialog' \| 'alertdialog'` The `role` attribute of the dialog element.
`preventScroll`	`true`	`boolean` Whether or not to prevent scrolling of the document when the dialog is open.
`closeOnEscape`	`true`	`boolean` Whether or not to close the dialog when the escape key is pressed.
`closeOnOutsideClick`	`true`	`boolean` Whether or not to close the dialog when the user clicks outside of it.

Returned Props

Returned Prop	Type	Description
`open`	`Writable<boolean>`	A writable store that controls the open state of the dialog.
`options`	`Writable<CreateDialogProps>`	A writable store that controls the options of the dialog.
`portal`	`Action<HTMLElement, PortalConfig>`	The portal action for the dialog.
`trigger`	-	The builder store used to create the dialog trigger.
`overlay`	-	The builder store used to create the dialog overlay.
`content`	-	The builder store used to create the dialog content.
`close`	-	The builder store used to create the dialog close button.
`title`	-	The builder store used to create the dialog title.
`description`	-	The builder store used to create the dialog description.

trigger

Data Attributes

Data Attribute	Value
`[data-melt-dialog-trigger]`	Present on all trigger elements.

overlay

Data Attributes

Data Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-melt-dialog-overlay]`	Present on all overlay elements.

content

Data Attributes

Data Attribute	Value
`[data-state]`	`'open' \| 'closed'`
`[data-melt-dialog-content]`	Present on all content elements.

close

Data Attributes

Data Attribute	Value
`[data-melt-dialog-close]`	Present on all close elements.

title

Data Attributes

Data Attribute	Value
`[data-melt-dialog-title]`	Present on all title elements.

description

Data Attributes

Data Attribute	Value
`[data-melt-dialog-description]`	Present on all description elements.

Accessibility

Adheres to the Dialog WAI-ARIA design pattern & Alert Dialog WAI-ARIA design pattern

Key	Behavior
`Space`	Opens/closes the dialog.
`Enter`	Opens/closes the dialog.
`Tab`	Moves focus to the next focusable element within the dialog.
`Shift + Tab`	Moves focus to the previous focusable element within the dialog.
`Esc`	Closes the dialog and moves focus to the trigger element.

On This Page