Komponen / Tampilan data

ProgressBar

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

React · BetaFigma · siapFigma Sumber

Tone

Accent untuk progres umum, Success untuk yang sudah sehat/selesai, Warning saat mendekati batas, Danger saat melewati batas. `valueLabel` bisa diganti angka yang lebih bermakna dari persen.

Progres proyek · PRJ-2026-0088

Termin terbayar · PO-2026-0142

Jam terpakai

Anggaran lisensi

import { ProgressBar } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="grid max-w-sm gap-5">
      <ProgressBar label="Progres proyek · PRJ-2026-0088" value={40} />
      <ProgressBar label="Termin terbayar · PO-2026-0142" value={60} tone="success" />
      <ProgressBar label="Jam terpakai" value={96} max={110} valueLabel="96 / 110 jam" tone="warning" />
      <ProgressBar label="Anggaran lisensi" value={112} max={100} valueLabel="112% dari anggaran" tone="danger" />
    </div>
  );
}

Ukuran

Small (track 4 px) default untuk kartu dan tabel. Medium (6 px) untuk ringkasan di kepala dokumen.

Small · di baris tabel dan kartu

Medium · ringkasan di kepala dokumen

import { ProgressBar } from '@divistant/circca-react';

export default function Example() {
  return (
    <div className="grid max-w-sm gap-5">
      <ProgressBar label="Small · di baris tabel dan kartu" value={60} size="sm" />
      <ProgressBar label="Medium · ringkasan di kepala dokumen" value={60} size="md" />
    </div>
  );
}

Di baris tabel

Tanpa `label`, baris label disembunyikan. Wajib beri `aria-label` agar pembaca layar tahu apa yang diukur.

PRJ-2026-0088
Dimas Prasetyo
96/110 jam
PRJ-2026-0091
Dimas Prasetyo
42/120 jam
PRJ-2026-0097
Anisa Nugraha
18/80 jam

import { ProgressBar } from '@divistant/circca-react';

const projects = [
  { code: 'PRJ-2026-0088', pm: 'Dimas Prasetyo', used: 96, budget: 110 },
  { code: 'PRJ-2026-0091', pm: 'Dimas Prasetyo', used: 42, budget: 120 },
  { code: 'PRJ-2026-0097', pm: 'Anisa Nugraha', used: 18, budget: 80 },
];

export default function Example() {
  return (
    <ul className="grid max-w-md">
      {projects.map(p => {
        const ratio = p.used / p.budget;
        return (
          <li key={p.code} className="grid grid-cols-[1fr_8rem_4.5rem] items-center gap-3 border-b border-default py-2.5 last:border-b-0">
            <div className="min-w-0">
              <p className="type-body-default-medium text-default">{p.code}</p>
              <p className="type-caption-default text-muted">{p.pm}</p>
            </div>
            <ProgressBar
              aria-label={`Jam terpakai ${p.code}`}
              value={p.used}
              max={p.budget}
              valueLabel={`${p.used} / ${p.budget} jam`}
              tone={ratio >= 0.85 ? 'warning' : 'accent'}
            />
            <span className="text-right tabular-nums type-caption-default text-muted">
              {p.used}/{p.budget} jam
            </span>
          </li>
        );
      })}
    </ul>
  );
}