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

```tsx
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](/deft/composed/dialog-confirm). For details that keep the list in view, use a [Drawer](/deft/components/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

| Prop | Type | Default | Description |
| - | - | - | - |
| `size?` | `"sm" \| "md" \| "lg"` | `"md"` | On Content. Maximum width. |
| `showClose?` | `boolean` | `true` | On Content. |

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](https://base-ui.com/react/components/dialog).