MetricRow aligns a label, optional icon, and preformatted value. An optional ProgressRing uses the visible label as its accessible name.
Usage
value. Add progress when the metric has a known percentage.
The application owns calculations, units, number formatting, and the meaning of the metric. 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
Label content accepts nodes. Its accessible text names the progress ring througharia-labelledby, including nested text. Provide a meaningful visible label. A nonempty string value is also exposed as its accessible value text. For formatted value content, supply progressValueText 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. An empty progressValueText also uses the percentage, including when value is a string. The optional startIcon node is decorative. The caller controls its dimensions and stroke.
startIcon={IconDatabase} with startIcon={<IconDatabase size={14} />}. Values stay preformatted by the application.
Native attributes, 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
ReactNode
required
Label content whose accessible text 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. Nonempty text overrides the string value fallback; an empty string uses the ring percentage. 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.
ReactNode
Decorative node content before the label. The caller controls icon geometry.
CSSProperties
Inline styles applied to the row root.
ReactNode
required
Preformatted value displayed at the end of the row. Nonempty string values also supply the progress ring accessible value text.