Components

Dialog

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

Structure

	<script lang="ts">
  import { Dialog } from "bits-ui";
</script>
 
<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title />
      <Dialog.Description />
      <Dialog.Close />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

	<script lang="ts">
  import { Dialog } from "bits-ui";
</script>
 
<Dialog.Root>
  <Dialog.Trigger />
  <Dialog.Portal>
    <Dialog.Overlay />
    <Dialog.Content>
      <Dialog.Title />
      <Dialog.Description />
      <Dialog.Close />
    </Dialog.Content>
  </Dialog.Portal>
</Dialog.Root>

Component API

Root

The root component used to set and manage the state of the dialog.

Prop	Default	Type/Description
`preventScroll`	`true`	`boolean` Whether or not to prevent scroll on the body when the dialog is open.
`closeOnEscape`	`true`	`boolean` Whether to close the dialog when the escape key is pressed.
`closeOnOutsideClick`	`true`	`boolean` Whether to close the dialog when a click occurs outside of it.
`open`	`false`	`boolean` Whether or not the dialog is open.
`onOpenChange`	-	`(open: boolean) => void` A callback function called when the open state changes.

Trigger

The element which opens the dialog on press.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-melt-dialog-trigger`	Present on the trigger element.

Cancel

The content displayed within the dialog modal.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The state of the dialog.
`data-melt-dialog-content`	Present on the content element.

Overlay

An overlay which covers the body when the dialog is open.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-state`	`'open' \| 'closed'` The state of the dialog.
`data-melt-dialog-overlay`	Present on the overlay element.

Portal

A portal which renders the dialog into the body when it is open.

Close

A button used to close the dialog.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-melt-dialog-close`	Present on the close element.

Title

An accessibile title for the dialog.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-melt-dialog-title`	Present on the title element.

Description

An accessibile description for the dialog.

Prop	Default	Type/Description
`asChild`	`false`	`boolean` Whether to use render delegation with this component or not.

Data Attribute	Value/Description
`data-melt-dialog-description`	Present on the description element.

🚧 UNDER CONSTRUCTION 🚧