> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Dialog

> Documentation for the Dialog component, covering property configurations such as open/close control, dimensions, and action areas. Use it to host information confirmation and lightweight actions.

## When to Use

A dialog is an auxiliary window that lets users quickly perform simple actions, confirm information, or receive feedback without leaving the main flow.

## Component Example

## Component Properties

| Attribute       | Description                                                                                                                          | Type                                                    | Default          |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------- | ---------------- |
| `afterClose`    | Event triggered after the dialog is closed.                                                                                          | `() => void`                                            | -                |
| `afterOpen`     | Event triggered after the dialog is opened.                                                                                          | `() => void`                                            | -                |
| `autoFocus`     | Whether to automatically focus on an internal form field when the dialog opens.                                                      | `boolean`                                               | `true`           |
| `cancelText`    | Text of the Cancel button.                                                                                                           | `string`                                                | `'Cancel'`       |
| `closeable`     | How the dialog can be closed. `esc`: press the ESC key to close; `mask`: click the mask to close.                                    | `'esc' \| 'mask'`                                       | `'esc'`          |
| `confirmState`  | State of the Confirm button.                                                                                                         | `'NORMAL' \| 'DISABLED' \| 'LOADING'`                   | `'NORMAL'`       |
| `confirmStyle`  | Style of the Confirm button. Refer to the [Button component documentation](/open/yida/components/basic/button#component-properties). | `'primary' \| 'warning' \| 'ghostLight' \| 'ghostDark'` | `'primary'`      |
| `confirmText`   | Text of the Confirm button.                                                                                                          | `string`                                                | `'Confirm'`      |
| `footer`        | Whether to show the footer buttons.                                                                                                  | `boolean`                                               | `true`           |
| `footerActions` | Default arrangement of the footer buttons. `cancel` represents the Cancel button, and `ok` represents the Confirm button.            | `'cancel,ok' \| 'cancel,ok' \| 'ok' \| 'cancel'`        | `'cancel,ok'`    |
| `footerAlign`   | Alignment of the Confirm and Cancel buttons within the dialog.                                                                       | `'left' \| 'center' \| 'right'`                         | `'right'`        |
| `hasMask`       | Whether to show the mask.                                                                                                            | `boolean`                                               | `true`           |
| `height`        | Height of the dialog.                                                                                                                | `number`                                                | -                |
| `onCancel`      | Event triggered when the Cancel button is clicked.                                                                                   | `() => void`                                            | -                |
| `onClose`       | Event triggered when the dialog is closed.                                                                                           | `() => void`                                            | -                |
| `onOk`          | Event triggered when the Confirm button is clicked.                                                                                  | `() => void`                                            | -                |
| `onOpen`        | Event triggered when the dialog is opened.                                                                                           | `() => void`                                            | -                |
| `title`         | Title of the dialog.                                                                                                                 | `string`                                                | `'Dialog Title'` |
| `visible`       | Whether the dialog is displayed.                                                                                                     | `boolean`                                               | `false`          |
| `width`         | Width of the dialog.                                                                                                                 | `number`                                                | -                |