Live Docs

Feedback /

stable

Progress Bar

Visualisasi progress 0-100 atau mode indeterminate untuk proses tanpa estimasi pasti.

import { ProgressBar } from "@naraya/ui";

Overview

Gunakan ProgressBar jika proses punya tahapan terukur. Jika tidak ada angka progress, pakai mode indeterminate.

Examples

Determinate

<ProgressBar value={65} label="Upload file 65 persen" />

Indeterminate

<ProgressBar label="Memproses data" />

Controlled progress

30%

const [value, setValue] = useState(30);
<ProgressBar value={value} />

Sizes and tones

<ProgressBar size="sm" tone="info" value={50} />
<ProgressBar size="md" tone="success" value={70} />
<ProgressBar size="lg" tone="warning" value={40} />

Props

PropTypeDefaultDescription
valuenumberProgress 0-100. Jika undefined/null, jadi indeterminate.
size"sm" | "md" | "lg""md"Tinggi progress bar.
tone"primary" | "accent" | "info" | "success" | "warning" | "error""primary"Warna fill progress.
labelstringLabel aksesibilitas untuk role progressbar.
...restHTMLAttributes<HTMLDivElement>Props native div.

Tokens Used

--bg-surface

Track background

--border-subtle

Track border

--color-{tone}

Fill color per tone

--radius-pill

Rounded track/fill

Accessibility

  • Komponen memakai role='progressbar' dengan aria-valuemin/aria-valuemax.
  • Untuk determinate, aria-valuenow diisi angka progress aktual.
  • Selalu kasih label konteks proses agar tidak ambigu untuk assistive tech.