Modal

Modal menampilkan jendela tambahan di atas halaman utama untuk menarik perhatian pengguna pada informasi penting, keputusan, atau tindakan tertentu. Komponen ini bersifat blocking, sehingga pengguna perlu menyelesaikan interaksi di dalam modal sebelum kembali ke halaman utama.

Penggunaan

Gunakan Modal untuk membantu pengguna berinteraksi dengan informasi penting tanpa meninggalkan konteks halaman utama. Modal dapat digunakan untuk menampilkan peringatan atau konfirmasi, menunjukkan detail tambahan, atau memfasilitasi formulir dan proses singkat. Pastikan modal tetap fokus pada satu tujuan dan tidak memuat terlalu banyak informasi atau elemen interaktif.

Anatomi

Varian

Alert

Gunakan komponen ini untuk menarik perhatian penuh pengguna.Biasanya muncul otomatis dari sistem, bukan dari tindakan pengguna.Komponen ini hanya memiliki satu aksi dan tidak dapat ditutup sebelum aksi tersebut diselesaikan.

Confirm

Digunakan untuk meminta konfirmasi atau persetujuan pengguna sebelum melanjutkan tindakan penting, seperti menghapus data. Menyediakan dua opsi aksi, dan akan tertutup setelah salah satu aksi dipilih.

Task

Gunakan komponen ini untuk membantu pengguna menyelesaikan tugas tertentu atau menampilkan informasi tambahan. Pengguna dapat menutupnya kapan saja melalui tombol Close.Kontennya bisa berupa formulir, detail program, atau tahapan proses. Pengguna dapat menutupnya kapan saja melalui tombol Close.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan alert hanya untuk pesan penting yang membutuhkan perhatian pengguna.

❌ Dihindari

Hindari menampilkan terlalu banyak alert sekaligus.

✅ Disarankan

Idealnya isi pesan tidak lebih dari tiga baris agar mudah dibaca.

❌ Dihindari

Jangan gunakan teks panjang yang mengaburkan pesan utama.

Penerapan

Modal Onboarding di Dashboard

Modal dapat digunakan sebagai elemen onboarding untuk memperkenalkan fitur baru atau menampilkan informasi penting pertama kali saat pengguna masuk ke halaman utama.

Modal jenis ini biasanya berisi visual pendukung, pesan ringkas, serta tombol tindakan yang mengarahkan pengguna ke langkah berikutnya.

Spesifikasi