# UI: Dialog

> A modal dialog with a title, content and a row of actions.

Source: https://pithyx.org/docs/reference/sdk/ui/dialog/
Markdown: https://pithyx.org/docs/reference/sdk/ui/dialog.md

A modal dialog with a title, content and a row of actions. Import the token file once (`@pithyx/ui/tokens.css`) and wrap the app in `UiProvider`; see [@pithyx/ui](https://pithyx.org/docs/sdk/ui/).

Generated from the TSDoc comments of @pithyx/ui 1.0.0-rc.9 at build time; the text below the headings is the comment in the source.

## Interfaces

### DialogProps

The props of [Dialog](#dialog): React Aria's modal props plus title, content and actions.

#### Extends

- `Omit`\<`ModalOverlayProps`, `"className"` \| `"children"`\>

#### Properties

##### title

```ts
title: ReactNode;
```

The heading, also the dialog's accessible name.

##### icon?

```ts
optional icon?: ReactNode;
```

An icon before the title.

##### tone?

```ts
optional tone?: "danger" | "default";
```

`danger` for a destructive question; `default` when left out.

##### role?

```ts
optional role?: "dialog" | "alertdialog";
```

`alertdialog` for a question that interrupts the user; `dialog` when left out.

##### size?

```ts
optional size?: "medium" | "default" | "large";
```

`medium` for longer forms such as a user with its rights; `large` for side-by-side content (the pool wizard).

##### children

```ts
children: ReactNode;
```

The content.

##### actions

```ts
actions: ReactNode;
```

The buttons at the bottom, usually a `Button` each.

## Functions

### Dialog()

```ts
function Dialog(props): Element;
```

A modal dialog with a title, content and a row of actions. Open it with `isOpen` and `onOpenChange`, or inside a
React Aria `DialogTrigger`; Escape and a press outside close it unless `isDismissable` is false.

#### Parameters

| Parameter | Type                          | Description                                                       |
| --------- | ----------------------------- | ----------------------------------------------------------------- |
| `props`   | [`DialogProps`](#dialogprops) | React Aria's modal overlay props plus title, content and actions. |

#### Returns

`Element`

The modal overlay with the dialog.

#### Example

```tsx
<Dialog
  title="Delete 3 files?"
  tone="danger"
  role="alertdialog"
  isOpen={open}
  onOpenChange={setOpen}
  actions={
    <Button variant="danger" onPress={remove}>
      Delete
    </Button>
  }
>
  They go to the recycle bin.
</Dialog>
```