# Dialog

Opens a modal popup over the page.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Dialog.tsx)

## Overview

A dialog is a modal popup over a dimmed backdrop. It traps focus and returns it to the trigger when it closes.

Use it for focused tasks. Always render a `Dialog.Title`, which names the dialog.

## Examples

### Basic

Set `closeButton` on `Dialog.Popup` to add a visible close control.

```tsx
import { Button, Dialog, style } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Dialog.Root>
      <Dialog.Trigger render={<Button variant="secondary" />}>Review transfer</Dialog.Trigger>
      <Dialog.Popup closeButton>
        <Dialog.Title>Review transfer</Dialog.Title>
        <Dialog.Description>
          You are sending 250.00 USDC to Alex. Funds arrive in about a minute.
        </Dialog.Description>
        <div {...styles.actions()}>
          <Dialog.Close render={<Button variant="secondary" />}>Cancel</Dialog.Close>
          <Dialog.Close render={<Button />}>Confirm</Dialog.Close>
        </div>
      </Dialog.Popup>
    </Dialog.Root>
  )
}

namespace styles {
  export const actions = style({
    columnGap: '2',
    display: 'flex',
    justifyContent: 'flex-end',
    marginTop: '8',
  })
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Dialog/Basic.tsx)

## Guidelines

TODO: Write guidelines for Dialog.