Components

Dialog

A modal on the modal elevation tier. Title labels the dialog for assistive tech automatically — there is no hand-rolled aria-labelledby.

Anatomy

Compose Root, Trigger, Portal, Backdrop, Popup, Title, Description and Close. Focus trapping, scroll locking and Escape handling come from Base UI.

tsx

import { Button, Dialog } from "dowel";

<Dialog.Root>
  <Dialog.Trigger render={<Button>Delete workspace</Button>} />
  <Dialog.Portal>
    <Dialog.Backdrop />
    <Dialog.Popup>
      <Dialog.Title>Delete workspace</Dialog.Title>
      <Dialog.Description>
        This removes every project in it. It cannot be undone.
      </Dialog.Description>
      <Dialog.Close render={<Button>Cancel</Button>} />
      <Dialog.Close render={<Button variant="danger">Delete</Button>} />
    </Dialog.Popup>
  </Dialog.Portal>
</Dialog.Root>

Dialog.Portal renders a plain div. Never put an inline transform or filter on it — either one creates a containing block and silently breaks the popup's position: fixed.

With a form

The popup is a flex column with a fixed gap, so a field stack drops straight in without a wrapper.

tsx

<Dialog.Popup>
  <Dialog.Title>New project</Dialog.Title>
  <Field.Root>
    <Field.Label>Name</Field.Label>
    <Input placeholder="dowel" />
  </Field.Root>
  <Dialog.Close render={<Button variant="primary">Create</Button>} />
</Dialog.Popup>