Lompat ke isi
CirccaHIG

Komponen / Aksi

ActionMenu

Menu aksi pop-up dengan grup, pemisah, dan aksi merusak: aksi per baris di DataTable (⋯), "Aksi lain" di header detail PO (Duplikat, Cetak, Kirim ke customer, Batalkan PO).
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Kumpulkan aksi sekunder di ActionMenu; aksi utama layar tetap tombol yang terlihat.
  • Urutkan aksi menurut seringnya dipakai; aksi merusak paling bawah setelah pemisah.
  • Konfirmasi aksi merusak (Batalkan PO, Hapus) dengan Dialog `alert` — buka lewat `onSelectAfterClose`.
  • Tampilkan aksi yang tidak berlaku sebagai nonaktif, bukan disembunyikan, bila pengguna perlu tahu aksinya ada.

Hindari

  • Jangan menaruh satu-satunya aksi utama layar di dalam menu.
  • Jangan memakai ActionMenu untuk memilih nilai — pakai Select atau SegmentedControl.
  • Jangan membuat menu sangat panjang atau bersarang dalam; lebih dari ±10 aksi berarti layar perlu dirancang ulang.
  • Jangan menjalankan aksi merusak langsung dari item tanpa konfirmasi.

Contoh benar & salah

Duplikat PO
Cetak
Kirim ke customer
Batalkan PO…
GunakanAksi merusak di paling bawah, dipisah garis, berwarna danger.
Duplikat PO
Batalkan PO
Cetak
Kirim ke customer
HindariAksi merusak di tengah aksi biasa tanpa pemisah.
Duplikat PO⌘D
Cetak⌘P
Buat invoice
GunakanLabel kata kerja singkat, ikon konsisten.
Klik di sini untuk menduplikat PO ini
Cetak
Invoice?
HindariLabel panjang berupa kalimat dan ikon campur aduk.

Penulisan

  • Label kata kerja + objek bila perlu: "Duplikat PO", "Kirim ke customer", "Batalkan PO".
  • Akhiri dengan elipsis (…) bila aksi membuka Dialog atau meminta masukan lagi: "Batalkan PO…".
  • Judul grup kata benda singkat: "Dokumen", "Ekspor".
  • Pintasan ditulis dengan simbol macOS (⌘, ⇧, ⌥) dan tidak diterjemahkan.

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil