Komponen / Lapisan & umpan balik

Dialog

Sheet modal untuk konfirmasi dan form singkat. Menghentikan pekerjaan sampai pengguna memutuskan — pakai seperlunya.

React · BetaFigma · siapFigma Sumber

Anatomi

1SheetRadius 16, padding 20, bayangan Elevation/3 di atas latar redup.
2Judul & deskripsiHeading/Small + Callout abu. Deskripsi menjelaskan akibat aksi.
3IsiTeks atau form singkat; bergulir sendiri.
4AksiRata kanan: batal (Secondary) lalu aksi utama (Primary/Danger).

Gunakan

Pakai untuk keputusan yang tidak bisa diurungkan atau kehilangan data: hapus, batalkan dokumen, buang perubahan.
Judul berupa pertanyaan yang bisa dijawab dengan tombol; tombol menyebut akibatnya ("Hapus PO", "Simpan draf").
Aksi utama paling kanan; untuk aksi merusak pakai variant Danger.

Hindari

Jangan memakai Dialog untuk informasi yang bisa ditampilkan di halaman (pakai Banner) atau notifikasi setelah aksi (pakai Toast).
Jangan menumpuk dialog di atas dialog.
Jangan memasukkan form panjang — buka halaman form atau inspector.

Hapus PO-2026-0146?

Draf beserta lampirannya akan dihapus permanen.

GunakanJudul bertanya, tombol menyebut akibatnya.

Konfirmasi

Apakah Anda yakin?

HindariJudul generik dengan tombol "Ya/Tidak" — pengguna harus membaca ulang untuk tahu apa yang terjadi.

Judul berupa pertanyaan dengan objek yang jelas: "Hapus PO-2026-0146?", bukan "Konfirmasi" atau "Peringatan".
Deskripsi menyebut akibat, bukan mengulang judul: "Draf beserta lampirannya akan dihapus permanen."
Tombol batal ditulis "Batal"; jangan "Tidak" atau "Kembali".