> ## 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

> Dokumentasi komponen Dialog di YiDA — konfigurasikan properti seperti kontrol buka/tutup, dimensi, dan area tindakan untuk konfirmasi informasi maupun aksi ringan.

## Kapan digunakan

Dialog adalah jendela bantu yang memungkinkan pengguna melakukan tindakan sederhana, mengonfirmasi informasi, atau memberikan masukan dengan cepat tanpa meninggalkan alur utama.

## Contoh komponen

## Properti komponen

| Atribut         | Deskripsi                                                                                                             | Tipe                                                    | Default          |
| --------------- | --------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------- | ---------------- |
| `afterClose`    | Acara yang dipicu setelah dialog ditutup.                                                                             | `() => void`                                            | -                |
| `afterOpen`     | Acara yang dipicu setelah dialog dibuka.                                                                              | `() => void`                                            | -                |
| `autoFocus`     | Fokus otomatis. Menentukan apakah bidang formulir internal difokuskan secara otomatis saat dialog dibuka.             | `boolean`                                               | `true`           |
| `cancelText`    | Teks tombol Batal.                                                                                                    | `string`                                                | `'Cancel'`       |
| `closeable`     | Cara dialog dapat ditutup. `esc`: tekan tombol ESC untuk menutup; `mask`: klik mask untuk menutup.                    | `'esc' \| 'mask'`                                       | `'esc'`          |
| `confirmState`  | Status tombol Konfirmasi.                                                                                             | `'NORMAL' \| 'DISABLED' \| 'LOADING'`                   | `'NORMAL'`       |
| `confirmStyle`  | Gaya tombol Konfirmasi. Lihat [dokumentasi komponen Button](/id/open/yida/components/basic/button#properti-komponen). | `'primary' \| 'warning' \| 'ghostLight' \| 'ghostDark'` | `'primary'`      |
| `confirmText`   | Teks tombol Konfirmasi.                                                                                               | `string`                                                | `'Confirm'`      |
| `footer`        | Menentukan apakah tombol footer ditampilkan.                                                                          | `boolean`                                               | `true`           |
| `footerActions` | Susunan default tombol footer. `cancel` mewakili tombol Batal, dan `ok` mewakili tombol Konfirmasi.                   | `'cancel,ok' \| 'cancel,ok' \| 'ok' \| 'cancel'`        | `'cancel,ok'`    |
| `footerAlign`   | Perataan tombol Konfirmasi dan Batal di dalam dialog.                                                                 | `'left' \| 'center' \| 'right'`                         | `'right'`        |
| `hasMask`       | Menentukan apakah mask ditampilkan.                                                                                   | `boolean`                                               | `true`           |
| `height`        | Tinggi dialog.                                                                                                        | `number`                                                | -                |
| `onCancel`      | Acara yang dipicu saat tombol Batal diklik.                                                                           | `() => void`                                            | -                |
| `onClose`       | Acara yang dipicu saat dialog ditutup.                                                                                | `() => void`                                            | -                |
| `onOk`          | Acara yang dipicu saat tombol Konfirmasi diklik.                                                                      | `() => void`                                            | -                |
| `onOpen`        | Acara yang dipicu saat dialog dibuka.                                                                                 | `() => void`                                            | -                |
| `title`         | Judul dialog.                                                                                                         | `string`                                                | `'Dialog Title'` |
| `visible`       | Menentukan apakah dialog ditampilkan.                                                                                 | `boolean`                                               | `false`          |
| `width`         | Lebar dialog.                                                                                                         | `number`                                                | -                |
