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>

Controlled Usage

If you want to control or be aware of the open state of the dialog from outside of the component, you can bind to the open prop.

	<script lang="ts">
  import { Dialog } from "bits-ui";
  let dialogOpen = false;
</script>
 
<button on:click={() => (dialogOpen = true)}>Open Dialog</button>
<Dialog.Root bind:open={dialogOpen}>
  <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";
  let dialogOpen = false;
</script>
 
<button on:click={() => (dialogOpen = true)}>Open Dialog</button>
<Dialog.Root bind:open={dialogOpen}>
  <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.

Content

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.

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.

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.

Title

An accessibile title for the dialog.

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

Description

An accessibile description for the dialog.

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

🚧 UNDER CONSTRUCTION 🚧