Komponen / Lapisan & umpan balik

Popover

Panel melayang non-modal untuk detail ringkas atau filter tanpa meninggalkan layar: filter daftar PO, detail singkat customer, ringkasan termin.

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Pakai untuk isi ringkas yang terkait langsung dengan pemicunya: filter daftar, detail singkat customer, ringkasan termin.
Batasi isi ±5 kontrol atau beberapa baris detail; pengguna tetap melihat layar di belakangnya.
Untuk filter, kumpulkan pilihan lalu berlakukan lewat Terapkan; sediakan Atur ulang.

Hindari

Jangan memakai Popover untuk keputusan atau konfirmasi (hapus, batalkan): pakai Dialog yang modal.
Jangan memakai Popover untuk keterangan satu baris saat hover: pakai Tooltip.
Jangan memasukkan form panjang atau popover di dalam popover; buka Drawer atau halaman form.

Contoh benar & salah

GunakanFilter ringkas: beberapa pilihan dan aksi Terapkan di footer.

HindariForm panjang dengan aksi merusak di popover — pengguna mudah menutupnya tanpa sengaja. Pakai Dialog atau Drawer.

Penulisan

Judul menyebut isi panel: "Filter status PO", "Termin PO-2026-0142", bukan "Info" atau "Detail".
Label pemicu filter menampilkan jumlah pilihan aktif: "Status (2)".
Tombol footer berupa kata kerja: "Terapkan", "Atur ulang"; hindari "OK".

Komponen terkait