Feedback
Progress
A horizontal progress bar with five tones, three sizes, optional label and numeric readout, and an optional pulsing animation for indeterminate-feeling states. Always sets the right ARIA attributes for screen readers.
Basic
With label and readout
Storage used 42%
Tones and sizes
Animated
Processing...
API
| Prop | Type | Default | Description |
|---|---|---|---|
value required | number | no default | Current value, clamped between 0 and max. |
max | number | 100 | Upper bound. |
tone | 'neutral' | 'brand' | 'success' | 'warn' | 'danger' | 'violet' | 'brand' | Bar color. Its type is AccentTone. |
size | 'xs' | 'sm' | 'md' | 'sm' | Track height. |
label | string | no default | Optional label rendered above the bar. |
showValue | boolean | false | Show the percentage on the right of the label row. |
animated | boolean | false | Pulse the filled portion to suggest motion. |
class | string | no default | Extra classes on the wrapper. |