MetricRow aligns a label, optional icon, and preformatted value. An optional ProgressRing uses the visible label as its accessible name.
Usage
Pass a nonempty text label as required children and the formatted value throughvalue. Add progress when the metric has a known percentage.
progressColor accepts a CSS color for the filled arc.
Values without progress
Omitprogress to show a plain value. Numeric zero displays as 0; content is never replaced with a placeholder. Supply your own placeholder when data is unavailable.
Composition and accessibility
The required text label names the progress ring. A string value is also exposed as its accessible value text. For formatted value content, supplyprogressValueText when a percentage does not describe the metric fully. This text overrides the string value fallback. Without it, other content keeps the ring’s percentage value text. The optional startIcon is decorative and renders at 14px.
className, style, and ref target the outer row. render can replace that element. Progress stays controlled and bounded to 0 to 100, with the same reduced-motion behavior as ProgressRing.
Props
string
required
Required nonempty text label that also names the optional progress ring.
string
CSS class applied to the row root.
number
Optional controlled progress from 0 to 100. Omitting it displays the value without a ring.
string
CSS color of the filled arc when progress is provided.
string
Accessible value text for the progress ring. Overrides the string value fallback; supply it when formatted content needs more context than a percentage.
ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Replaces the row root element while preserving its contents.
IconComponent
Decorative icon before the label, rendered at 14px.
CSSProperties
Inline styles applied to the row root.
ReactNode
required
Preformatted value displayed at the end of the row. String values also supply the progress ring accessible value text.