Skip to main content

Actions and status

Progress

A tokenized progress indicator with determinate and indeterminate states plus optional visible value text.

Curated demo

Package readiness 72%

Reference

A tokenized progress indicator with determinate and indeterminate states plus optional visible value text.

  • Use determinate progress when you can calculate completion; omit value for an indeterminate track.
  • Keep labels concrete so screen reader users understand what is progressing.

Props

Name Type Default Description
value number — Current progress value.
max number 100 Maximum progress value.
label string — Accessible and visible label.
showValue boolean false Show calculated percentage.
variant 'default' | 'success' | 'warning' | 'danger' 'default' Progress color variant.
class string — Additional CSS classes.

Example snippet

<Progress label="Package readiness" value={72} showValue />