Komponen / Tampilan data

ProgressBar

Bar kapsul tipis untuk progres atau kapasitas yang terukur: termin terbayar, jam proyek terpakai, kuota lisensi.

React · BetaFigma · siapFigma Sumber

Kapan dipakai

Gunakan

Pakai untuk besaran yang punya batas jelas: termin terbayar dari total PO, jam terpakai dari anggaran proyek, kursi lisensi terpakai.
Tampilkan angka sebenarnya bila lebih bermakna dari persen ("96 / 110 jam").
Ubah tone ke Warning/Danger berdasarkan ambang yang konsisten (mis. ≥ 85% anggaran jam = Warning).

Hindari

Jangan memakai ProgressBar untuk status dokumen (Draft, Disetujui) — pakai StateLabel atau StagePath.
Jangan memakai warna saja untuk menyampaikan "lewat batas"; tulis juga di label nilai.
Jangan memakai ProgressBar untuk menunggu proses tanpa ukuran — pakai Skeleton atau Spinner.

Jam terpakai · PRJ-2026-0088

GunakanLabel menyebut apa yang diukur dan nilainya dalam satuan bisnis.

87%

HindariBar tanpa label dan persen tanpa konteks.

Label menyebut apa yang diukur: "Termin terbayar", "Jam terpakai · PRJ-2026-0088", bukan "Progres".
Nilai memakai satuan yang dipakai tim: "Rp 60 jt dari 100 jt", "96 / 110 jam", "60%".