Progress
React componentShow how much measurable work has been completed.
Try it out
Use the live controls or open the Code tab to view and copy the example.
API reference
Generated from the package’s TypeScript exports. Standard React event and ARIA attributes are also accepted where the component wraps a native element.
| Prop | Type | Description |
|---|---|---|
value | number | undefined | Controlled value. Pair with its change callback. |
max | number | undefinedDefault: 100 | Standard React / HTML attribute passed to the underlying element. |
labelRequired | string | A meaningful visible or accessible label. |
showValue | boolean | undefinedDefault: true | See the typed definition and working example for this option. |
Accessibility & interaction
Preserve semantic structure and communicate meaning with text rather than color alone.
Visible focus, reduced motion, and both color themes are shared across staqui. Choose labels and document structure that make sense in your application; automated checks do not replace assistive-technology testing.
Variants & implementation notes
Native progress, max defaults to 100, values are clamped. Missing value is indeterminate with a static striped fallback; it does not animate. The indicator uses the brand token rather than per-instance status tones.
Use the typed API above for the supported variants. The example demonstrates the primary composition; shared controls inherit hover, focus, active and disabled treatment where applicable.