ProgressBar
Examples
Loading examples…
API
From COMPONENTS.md.
A determinate bar from 0 to 100, with role="progressbar" and its value exposed.
import { ProgressBar } from 'achery-ui'
<ProgressBar value={62} tone="accent" />
<ProgressBar value={0} loading />
| Prop | Type | Default | Notes |
|---|---|---|---|
value |
number |
— | Required. Clamped to 0–100 |
size |
'sm' | 'md' |
'md' |
Track height |
tone |
'neutral' | 'accent' |
'neutral' |
Fill colour |
loading |
boolean |
false |
Renders a Skeleton the height of the track instead |
aria-label |
string |
— | What is progressing ("Upload"). A progress bar needs a name: give it this… |
aria-labelledby |
string |
— | …or the id of visible text that names it |
className |
string |
— |