Lompat ke isi
CirccaHIG

Komponen / Navigasi

Toolbar

Bar judul layar ala macOS: judul + subjudul, kelompok kontrol berbahan kaca, pencarian, dan satu aksi utama. Bar transparan — kaca hanya di kelompok kontrol.
React · BetaFigma · siapFigmaSumber

Kapan dipakai

Gunakan

  • Satu Toolbar per layar/panel, di atas isi yang dikendalikannya (daftar PO, detail invoice).
  • Kelompokkan IconButton yang sejenis dalam satu Toolbar.Group kaca; bedakan kelompok navigasi, aksi, dan tampilan.
  • Satu aksi utama saja di ujung kanan; aksi lain menjadi IconButton atau masuk "Aksi lain".
  • Tandai kelompok sekunder dengan `collapse` dan sediakan `overflow`, agar judul tetap terbaca di panel sempit.

Hindari

  • Jangan memberi seluruh bar latar kaca — kaca hanya di kelompok kontrol, bar tetap transparan (HIG Liquid Glass).
  • Jangan menumpuk lebih dari ±5 IconButton terlihat; aksi jarang dipakai masuk menu "Aksi lain".
  • Jangan menaruh dua Button Primary atau aksi merusak (Hapus) langsung di Toolbar.
  • Jangan membiarkan aksi menjepit judul — yang mengalah adalah kontrol, bukan judul.

Contoh benar & salah

Invoice

38 dokumen

GunakanBar transparan, kaca hanya di kapsul kelompok kontrol.

Invoice

38 dokumen

HindariSeluruh bar diberi latar kaca/abu, judul ikut "terkurung".

PO Customer

GunakanSatu aksi utama di ujung kanan; aksi lain IconButton.

PO Customer

HindariTiga Button Primary berderet berebut perhatian.

Penulisan

  • Judul = nama modul atau nomor dokumen ("PO Customer", "PO-2026-0142"), bukan kalimat.
  • Subjudul berisi jumlah atau konteks singkat: "142 dokumen", "3 dari 142 · PT Pelanggan Contoh A".
  • Label IconButton berupa kata kerja + objek: "Cetak daftar", "Salin tautan", "PO berikutnya".
  • Aksi utama: kata kerja/objek singkat — "PO baru", "Ajukan".

Komponen terkait

Esc
↑↓ pilih↵ buka12 hasil