Page Header (AppPageHeader)
Header halaman standar dengan judul, deskripsi, breadcrumb opsional di atasnya, dan slot aksi utama di kanan judul.
import { AppPageHeader } from '#components'Header polos
Bentuk paling sederhana: judul dan deskripsi saja. Cocok untuk halaman daftar tanpa aksi utama di level halaman, seperti "Riwayat Transaksi".
Page Header — Polos
Riwayat Transaksi
Semua pembelian paket try out yang pernah kamu lakukan.
Header + aksi utama
Isi slot #actions saat halaman punya satu tindakan utama yang berlaku ke seluruh halaman (bukan ke satu baris/kartu tertentu) — mengikuti aturan hierarki tombol yang sama dengan halaman Button: satu aksi primary yang jelas per header, aksi sekunder pakai variant="outline".
Pratinjau statis di bawah ini — <AppPageHeader> asli merender <h1>, dan halaman ini sudah punya satu <h1> milik ComponentHeader di atas, jadi demo kedua dan ketiga digambar ulang persis secara visual tanpa menduplikasi elemen <h1>. Kode di bawah tetap kode nyata yang akan menghasilkan tampilan ini di halamanmu sendiri.
Page Header — Dengan Aksi
Paket Saya
Kelola akses paket try out yang sudah kamu beli.
Header + breadcrumb + aksi
Kombinasi lengkap untuk halaman detail yang dalam di hierarki navigasi, seperti halaman detail paket atau checkout — breadcrumb di atas judul memberi konteks lokasi, aksi di kanan judul memberi jalan pintas ke tindakan yang paling relevan di halaman itu.
Pratinjau statis juga, dengan alasan yang sama seperti demo di atas.
Page Header — Lengkap
SKD CPNS Mastery 2026
Detail paket, jadwal, dan status pengerjaan.