Overlay

Gunakan overlay untuk menampilkan informasi penting, konfirmasi tindakan, atau status sistem tanpa meninggalkan halaman utama. Elemen ini membantu mengarahkan fokus pengguna ke area tertentu sambil tetap menjaga konteks layar sebelumnya.

Tujuan Penggunaan

Meningkatkan fokus pengguna pada elemen atau aksi utama (misalnya konfirmasi, input, atau notifikasi penting).
Mengurangi distraksi visual dari elemen di latar belakang.
Menandai perubahan status konteks, seperti ketika aplikasi berpindah ke mode interaksi sementara (contohnya "edit mode" atau "view details").

Interaksi

Focusing Interaction

Overlay digunakan untuk memastikan perhatian pengguna tetap tertuju pada elemen utama. Sisa area di belakang layar sebaiknya tampak redup untuk menunjukkan bahwa interaksi sedang difokuskan pada konten aktif.

Blocking Interaction

Overlay juga berfungsi membatasi interaksi pengguna terhadap elemen di bawahnya. Contohnya, saat proses sedang berjalan (loading state), pengguna tidak dapat melakukan tindakan lain hingga proses selesai.

Cara Penggunaan yang Disarankan

✅ Disarankan

Gunakan overlay dengan tingkat opasitas yang cukup agar elemen utama tetap terlihat dan fokus pengguna terarah pada area aktif.

❌ Dihindari

Jangan gunakan overlay yang terlalu gelap atau terlalu terang karena dapat mengurangi keterbacaan elemen di bawahnya.

Penerapan

Modal/Dialog/Drawer

Overlay digunakan untuk menampilkan dialog yang memerlukan perhatian penuh pengguna pada konteks tertentu di dalam aplikasi. Dialog/Modal membantu menjaga fokus saat pengguna harus melakukan konfirmasi atau mengisi informasi penting.

Bottomsheet

Overlay juga digunakan untuk menampilkan bottomsheet, yaitu elemen yang muncul dari bawah layar untuk menampilkan informasi tambahan atau tindakan lanjutan tanpa meninggalkan halaman aktif.