Komponen / Tata letak

PageHeader

Kepala halaman/dokumen BizOps: jejak, judul + label status di satu baris, baris meta, dan aksi di kanan atas.

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Satu PageHeader per halaman, paling atas di area konten; judul menjadi <h1>.
Di halaman detail, judul = nomor dokumen dan status = StateLabel dengan teks yang sama seperti di daftar.
Urutan aksi: Secondary → "Aksi lain" (IconButton) → Primary paling kanan. Maksimal satu Primary.
Aksi yang jarang dipakai dipindah ke menu "Aksi lain".
Isi deskripsi dengan fakta kunci yang dicari pengguna: customer, nilai, termin, pemilik.

Hindari

Jangan menaruh lebih dari tiga tombol berlabel di kanan atas.
Jangan menulis status sebagai teks biasa di judul ("PO-2026-0142 (Menunggu BAST)") — pakai `status`.
Jangan memakai tombol Primary untuk aksi yang bukan langkah berikutnya dokumen.
Jangan memasukkan form atau filter ke dalam PageHeader.

Contoh benar & salah

PO-2026-0142

GunakanSecondary dan "Aksi lain" di kiri, Primary paling kanan.

PO-2026-0142

HindariPrimary di kiri dan beberapa tombol Primary sekaligus.

PO-2026-0142

Menunggu BAST/DO

GunakanStatus sebagai StateLabel di samping nomor dokumen.

PO-2026-0142 (Menunggu BAST/DO)

HindariStatus ditulis di dalam judul sebagai teks biasa.

Penulisan

Judul detail = nomor dokumen ("PO-2026-0142"); judul daftar = nama jenis dokumen ("PO Customer").
Deskripsi dipisah " · ", tanpa titik di akhir; nilai uang memakai formatMoney.
Label aksi kata kerja + objek: "Terbitkan BAST", "Ajukan ulang ke Finance".

Komponen terkait