feedback/@mihcm/ui·v0.21.0·stable
ProgressCircle
Circular progress indicator for KPI cards and compact status summaries with semantic tones and value formatting.
Props
The full prop API for ProgressCircle. 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 progress value. | 0.12.0 |
max | number | 100 | Maximum progress value. | 0.12.0 |
size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Circle diameter and stroke preset. | 0.12.0 |
tone | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | 'primary' | Semantic stroke tone. | 0.12.0 |
segmented | boolean | false | Use value-based semantic threshold colors for the ring and default center value color. | 0.12.2 |
segments | ProgressCircleSegment[] | — | Custom percentage thresholds for segmented mode. | 0.12.2 |
showValue | boolean | true | Show or hide the center value label. | 0.12.0 |
valueSize | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'sm' | Center value font-size preset. | 0.12.2 |
valueTone | 'auto' | 'foreground' | 'primary' | 'accent' | 'success' | 'warning' | 'danger' | — | Center value color. Use `auto` to match the resolved ring tone. | 0.12.2 |
valueFormatter | (value: number, percentage: number) => ReactNode | — | Formats the center value label. | 0.12.0 |
valueClassName | string | — | Additional Tailwind classes on the center value label. | 0.12.2 |
label | string | 'Progress' | Accessible progressbar label. | 0.12.0 |
className | string | — | Additional Tailwind classes on the root wrapper. | 0.12.0 |
Import
import { ProgressCircle } from '@mihcm/ui/ProgressCircle';