Lompat ke isi
CirccaHIG

Komponen / Aksi

IconButton

Tombol bulat berisi ikon saja untuk toolbar dan baris tabel. Label aksesibel wajib dan otomatis tampil sebagai tooltip.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Pakai untuk aksi sekunder yang ikonnya umum dikenali: cetak, unduh, saring, muat ulang, aksi lain (…).
  • Selalu isi `label` dengan kata kerja yang spesifik — itu yang dibaca pembaca layar dan tampil di tooltip.
  • Ghost di toolbar dan baris tabel; Secondary bila tombol berdiri sendiri di samping Button Secondary.

Hindari

  • Jangan memakai IconButton untuk aksi utama atau aksi merusak — pakai Button berlabel.
  • Jangan memakai ikon yang ambigu tanpa konteks; bila ragu, pakai Button dengan label.
  • Jangan mencampur Secondary dan Ghost dalam satu kelompok toolbar.

Contoh benar & salah

GunakanAksi sekunder sebagai ikon; aksi utama tetap Button berlabel.
HindariAksi utama (Terbitkan) disembunyikan sebagai ikon saja.
GunakanSatu varian (Ghost) untuk semua tombol ikon di toolbar.
HindariSecondary dan Ghost bercampur dalam satu kelompok.

Penulisan

  • Label berupa kata kerja + objek bila perlu: "Unduh PDF", "Cetak PO-2026-0142".
  • Menu tambahan memakai label "Aksi lain".
  • Huruf kapital hanya di awal; tanpa titik.

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil