Komponen / Navigasi

Tabs

Berpindah antar-bagian dalam satu dokumen — Ringkasan, Item, Dokumen, Riwayat. Di HIG tampil sebagai segmen kapsul di tengah, di atas panel isi.

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Pakai untuk membagi satu dokumen/objek menjadi bagian yang isinya berbeda: Ringkasan, Item, Project, Dokumen, Riwayat.
Pusatkan di atas panel isi; tab pertama berisi ringkasan yang paling sering dibuka.
Tampilkan Count bila jumlah isi membantu (Item 3, Dokumen 4); sembunyikan bila nol tidak bermakna.
Batasi sekitar 2–6 tab berlabel pendek.

Hindari

Jangan memakai Tabs untuk mengganti tampilan data yang sama (Daftar / Board) — pakai SegmentedControl.
Jangan memakai Tabs untuk berpindah modul atau halaman aplikasi — pakai NavList; untuk wizard pakai Steps.
Jangan memakai Badge merah sebagai Count tab kecuali menandai tindakan yang menunggu; Count adalah angka informatif.
Jangan menumpuk dua baris Tabs atau menaruh Tabs di dalam panel Tabs lain.

PO-2026-0142

Customer PT Mitra Energi Persada · Rp 186.000.000

GunakanTabs membagi bagian dokumen yang isinya berbeda (Ringkasan / Item / Riwayat).

Pipeline deal

Data yang sama, hanya ditampilkan berbeda

HindariTabs dipakai untuk mengganti tampilan data yang sama (Daftar / Board).

GunakanCount berupa angka muted di samping label.

HindariBadge merah di setiap tab untuk jumlah informatif.

Label kata benda singkat untuk isi bagian: "Ringkasan", "Item", "Dokumen", "Riwayat".
Jangan mengulang nama objek di setiap tab ("Item PO", "Dokumen PO") — konteksnya sudah jelas.
Huruf kapital hanya di awal; tanpa titik.