# Dialog

`Dialog` is a modal window with a title, body, and footer actions, used for confirmations, forms, and prompts. It is built on top of `Modal`.

```tsx
import {Dialog} from '@gravity-ui/uikit';
```

## Usage

```tsx
const [open, setOpen] = useState(false);
const dialogTitleId = 'app-confirmation-dialog-title';

<Dialog
  onClose={() => setOpen(false)}
  open={open}
  onEnterKeyDown={() => {
    alert('onEnterKeyDown');
  }}
  aria-labelledby={dialogTitleId}
>
  <Dialog.Header caption="Caption" id={dialogTitleId} />
  <Dialog.Body>Dialog.Body</Dialog.Body>
  <Dialog.Footer
    onClickButtonCancel={() => setOpen(false)}
    onClickButtonApply={() => alert('onApply')}
    textButtonApply="Apply"
    textButtonCancel="Cancel"
  />
</Dialog>;
```

## Properties

| Name                  | Description                                                                                   | Type                                                                                             | Default     |
| :-------------------- | :-------------------------------------------------------------------------------------------- | :----------------------------------------------------------------------------------------------- | :---------- |
| open                  | Current dialog state                                                                          | `boolean`                                                                                        |             |
| onEscapeKeyDown       | Escape keydown event handler                                                                  | `(event: KeyboardEvent) => void`                                                                 |             |
| onEnterKeyDown        | Enter keydown event handler                                                                   | `(event: KeyboardEvent) => void`                                                                 |             |
| onOutsideClick        | Event handler on a mouse click outside the dialog                                             | `(event: MouseEvent) => void`                                                                    |             |
| onClose               | Event handler on closing the dialog                                                           | `(event: MouseEvent or KeyboardEvent,` `reason: ModalCloseReason or "closeButtonClick") => void` |             |
| className             | `className` of the dialog content wrapper                                                     | `string`                                                                                         |             |
| modalClassName        | `className` of modal box in which the dialog is embedded                                      | `string`                                                                                         |             |
| size                  | Dialog size. Deprecated. Use `maxWidth` + `fullWidth` to achieve the same result.             | `'s'` `'m'` `'l'`                                                                                |             |
| maxWidth              | Dialog content max width                                                                      | `'s'` `'m'` `'l'`                                                                                |             |
| fullWidth             | If `true` content stretches to `maxWidth`                                                     | `boolean`                                                                                        |             |
| disableBodyScrollLock | Toggles whether the body scroll is locked                                                     | `boolean`                                                                                        | `false`     |
| disableEscapeKeyDown  | Toggles whether the escape keydown is disabled                                                | `boolean`                                                                                        | `false`     |
| disableOutsideClick   | Toggles whether the outside click is disabled                                                 | `boolean`                                                                                        | `false`     |
| keepMounted           | Toggles whether the dialog is kept in the mounted state                                       | `boolean`                                                                                        | `false`     |
| hasCloseButton        | Toggles whether there is a cross icon in the top-right corner of the dialog                   | `boolean`                                                                                        | `true`      |
| aria-labelledby       | `<Dialog/>` caption ID. Use the `id` property of `<Dialog.Header/>` to set the ID for caption | `string`                                                                                         |             |
| aria-label            | Dialog label for a11y. Set `aria-labelledby` if the caption is visible to the user            | `string`                                                                                         |             |
| container             | Container element for the dialog box                                                          | `HTMLElement`                                                                                    |             |
| qa                    | `data-qa` attribute value of the modal box in which the dialog is embedded                    | `string`                                                                                         |             |
| contentOverflow       | Determines whether the `Dialog` has a scroll indicator inside or gets larger with the content | `'visible'` `'auto'`                                                                             | `'visible'` |