feedback/@mihcm/ui·v0.21.0·stable
Progress
Horizontal bar showing completion against a max value. Determinate, indeterminate, fixed-tone, or threshold-segmented.
Props
The full prop API for Progress. Same surface in web and React Native — bundlers pick the right variant via the react-native export condition.
| Prop | Type | Default | Description | Since |
|---|---|---|---|---|
value | number | — | Current value. Omit for indeterminate mode. | 0.5.0 |
max | number | 100 | Maximum value. | 0.5.0 |
tone | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'primary' | Bar color tone. | 0.5.0 |
size | 'sm' | 'md' | 'lg' | 'md' | Track height. sm=6px, md=10px, lg=16px. | 0.5.0 |
segmented | boolean | false | Use value-based semantic tone thresholds. Fixed primary tone is the default. | 0.10.1 |
segments | ProgressSegment[] | — | Custom percentage thresholds for segmented mode. | 0.10.1 |
label | string | — | Accessible label (aria-label). | 0.5.0 |
showValue | boolean | false | Show percentage text next to the bar. | 0.5.0 |
valueLabelPosition | 'inline-end' | 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right' | 'inline-end' | Position for the visible value label. | 0.10.1 |
showTrackLabels | boolean | false | Show min/max scale labels around the bar. | 0.10.1 |
trackLabelPosition | 'none' | 'top' | 'bottom' | 'inline' | 'none' | Position for min/max scale labels. | 0.10.1 |
labelGap / labelGroupGap | 'none' | 'xs' | 'sm' | 'md' | 'xs' | Control vertical label-row spacing and left/right value-to-scale label spacing. | 0.10.1 |
Import
import { Progress } from '@mihcm/ui/Progress';