Dialog - DingTalk Help Center

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.	`'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`	-