Dialog

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

	<script lang="ts">
  import {
    Button,
    buttonVariants
  } from "@/components//ui/button";
  import * as Dialog from "@/components//ui/dialog";
  import * as Input from "@/components//ui/input";
  import * as Label from "@/components//ui/label";
</script>
 
<Dialog.Root>
  <Dialog.Trigger
    class={buttonVariants({ variant: "outline" })}
    >Edit Profile</Dialog.Trigger
  >
  <Dialog.Content class="sm:max-w-[425px]">
    <Dialog.Header>
      <Dialog.Title>Edit profile</Dialog.Title>
      <Dialog.Description>
        Make changes to your profile here. Click save when
        you're done.
      </Dialog.Description>
    </Dialog.Header>
    <div class="grid gap-4 py-4">
      <div class="grid grid-cols-4 items-center gap-4">
        <Label.Root class="text-right">Name</Label.Root>
        <Input.Root
          id="name"
          value="Hunter Johnston"
          class="col-span-3"
        />
      </div>
      <div class="grid grid-cols-4 items-center gap-4">
        <Label.Root class="text-right">Username</Label.Root>
        <Input.Root
          id="username"
          value="@huntabyte"
          class="col-span-3"
        />
      </div>
    </div>
    <Dialog.Footer>
      <Button type="submit">Save changes</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

	<script lang="ts">
  import {
    Button,
    buttonVariants
  } from "@/components//ui/button";
  import * as Dialog from "@/components//ui/dialog";
  import * as Input from "@/components//ui/input";
  import * as Label from "@/components//ui/label";
</script>
 
<Dialog.Root>
  <Dialog.Trigger
    class={buttonVariants({ variant: "outline" })}
    >Edit Profile</Dialog.Trigger
  >
  <Dialog.Content class="sm:max-w-[425px]">
    <Dialog.Header>
      <Dialog.Title>Edit profile</Dialog.Title>
      <Dialog.Description>
        Make changes to your profile here. Click save when
        you're done.
      </Dialog.Description>
    </Dialog.Header>
    <div class="grid gap-4 py-4">
      <div class="grid grid-cols-4 items-center gap-4">
        <Label.Root class="text-right">Name</Label.Root>
        <Input.Root
          id="name"
          value="Hunter Johnston"
          class="col-span-3"
        />
      </div>
      <div class="grid grid-cols-4 items-center gap-4">
        <Label.Root class="text-right">Username</Label.Root>
        <Input.Root
          id="username"
          value="@huntabyte"
          class="col-span-3"
        />
      </div>
    </div>
    <Dialog.Footer>
      <Button type="submit">Save changes</Button>
    </Dialog.Footer>
  </Dialog.Content>
</Dialog.Root>

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

Dialog.Root

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

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

Dialog.Trigger

The element which opens the dialog on press.

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

Dialog.Content

The content displayed within the dialog modal.

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

Data Attribute	Description/Value
`data-state`	The state of the dialog. `Value: 'open' \| 'closed'`

Dialog.Overlay

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

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

Data Attribute	Description/Value
`data-state`	The state of the dialog. `Value: 'open' \| 'closed'`

Dialog.Portal

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

Dialog.Close

A button used to close the dialog.

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

Dialog.Title

An accessibile title for the dialog.

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

Dialog.Description

An accessibile description for the dialog.

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

🚧 UNDER CONSTRUCTION 🚧