Komponen / Tampilan data
ProgressBar
Bar kapsul tipis untuk progres atau kapasitas yang terukur: termin terbayar, jam proyek terpakai, kuota lisensi.
Import
tsx
import { ProgressBar } from '@divistant/circca-react';Props
Juga menerima atribut <div> (mis. aria-label bila tanpa label).
| Prop | Tipe | Default | Keterangan |
|---|---|---|---|
| value | number | — | Nilai saat ini, 0 sampai `max`. Di luar rentang dipotong. |
| max | number | 100 | Nilai maksimum. |
| tone | 'accent' | 'success' | 'warning' | 'danger' | 'accent' | Makna progres; menentukan warna isi bar. |
| size | 'sm' | 'md' | 'sm' | Tebal track 4 / 6 px. |
| label | ReactNode | — | Label kiri atas (Label row). Menjadi nama aksesibel bar. |
| valueLabel | ReactNode | false | persentase | Teks nilai kanan atas, mis. "96 / 110 jam". `false` untuk menyembunyikan. Hanya tampil bila ada label. |
| className | string | — | Kelas tambahan (digabung aman dengan tailwind-merge). Lebar default 100% kontainer. |
Sumber
Kode komponen ada di packages/react/src/components/progress-bar. Gaya hanya memakai kelas token Circca HIG — tidak ada warna, spasi, atau radius mentah.