Dialog

A focused task over the page, with a title and at most one primary action.

import { Button, Dialog } from "@openperf/deft";

import { Preview } from "../../src/Preview";

export default function DialogBasic() {
  return (
    <Preview overlay={true}>
      <Dialog.Root>
        <Dialog.Trigger render={<Button.Root />}>Open dialog</Dialog.Trigger>
        <Dialog.Content>
          <Dialog.Header>
            <Dialog.Title>Title</Dialog.Title>
            <Dialog.Description>Description</Dialog.Description>
          </Dialog.Header>
          <Dialog.Footer>
            <Dialog.Close render={<Button.Root variant="ghost" />}>Cancel</Dialog.Close>
            <Button.Root variant="primary">Confirm</Button.Root>
          </Dialog.Footer>
        </Dialog.Content>
      </Dialog.Root>
    </Preview>
  );
}

• The title is the task: “Create issue”. The primary button repeats it.
• Cancel is a ghost Dialog.Close to the left of the primary button.
• To confirm a destructive action, use Dialog confirm. For details that keep the list in view, use a Drawer.
• Dialogs open near the top, not centred, so the title stays put as content grows. Long content scrolls in Dialog.Body.
• Content adds a close button in the corner; showClose={false} removes it.
• Open a dialog from anywhere with a handle: Dialog.createHandle() returns a DialogHandle to pass to Dialog.Root and to every Dialog.Trigger; a trigger’s payload reaches the root’s render function.

API

Parts: Root, Body, Content, Description, Footer, Header, Title, and the other Base UI parts, such as Trigger and Close. Content renders the portal, backdrop and popup. Built on Base UI Dialog.