Data Display
Linear and circular progress indicators, determinate or indeterminate, with an optional value label.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | — | Current value. Omit for an indeterminate bar. |
minValue / maxValue | number | 0 / 100 | Range. |
value
number
Default: —
Current value. Omit for an indeterminate bar.
minValue / maxValue
number
Default: 0 / 100
Range.
| Prop | Type | Default | Description |
|---|---|---|---|
color | "default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger" | primary | Semantic colour of the indicator. |
size | "sm" | "md" | "lg" | md | Bar / ring size. |
radius | string | — | Progress only — track radius. |
strokeWidth | number | 4 | CircularProgress only — ring thickness. |
color
"default" | "primary" | "secondary" | "info" | "success" | "warning" | "danger"
Default: primary
Semantic colour of the indicator.
size
"sm" | "md" | "lg"
Default: md
Bar / ring size.
radius
string
Default: —
Progress only — track radius.
strokeWidth
number
Default: 4
CircularProgress only — ring thickness.
| Prop | Type | Default | Description |
|---|---|---|---|
label | ReactNode | — | Text label (also becomes the aria-label when a string). |
showValueLabel | boolean | false | Render the formatted value. |
label
ReactNode
Default: —
Text label (also becomes the aria-label when a string).
showValueLabel
boolean
Default: false
Render the formatted value.
| Prop | Type | Default | Description |
|---|---|---|---|
formatValue | (value, maxValue) => ReactNode | percentage | Value-label formatter. |
formatValue
(value, maxValue) => ReactNode
Default: percentage
Value-label formatter.
