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

Prop	Type	Default	Description
value	`number`	—	Progress 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.
label	`string`	—	Label aksesibilitas untuk role progressbar.
...rest	`HTMLAttributes<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

Progress Bar

Overview

Examples

Props

Tokens Used

Accessibility

Related