> ## Documentation Index
> Fetch the complete documentation index at: https://docs.twenty.com/llms.txt
> Use this file to discover all available pages before exploring further.

# MetricRow

> Align a metric label and formatted value with optional progress.

export const StoryEmbed = ({storyId, title, height = 240}) => <>
    <Tabs>
      <Tab title="Light">
        <iframe title={`${title} (light)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:light`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
      <Tab title="Dark">
        <iframe title={`${title} (dark)`} src={`https://storybook.twenty.com/iframe.html?id=${storyId}&viewMode=story&globals=colorScheme:dark`} width="100%" height={height} loading="lazy" style={{
  border: 0
}} />
      </Tab>
    </Tabs>
    <a href={`https://storybook.twenty.com/?path=/story/${storyId}`}>
      Open in Storybook
    </a>
  </>;

`MetricRow` aligns a label, optional icon, and preformatted value. An optional [ProgressRing](/ui/primitives/feedback/progress-ring) uses the visible label as its accessible name.

<StoryEmbed storyId="ui-data-display-metricrow--default" title="Metric row example" height={160} />

## Usage

Pass a nonempty text label as required children and the formatted value through `value`. Add `progress` when the metric has a known percentage.

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components';
import { IconDatabase } from 'twenty-ui/icon';

export const StorageMetric = () => (
  <MetricRow startIcon={IconDatabase} value="12 / 20 GB" progress={60}>
    Storage
  </MetricRow>
);
```

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

Omit `progress` 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.

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components';

export const CompletedMetric = () => (
  <MetricRow value={0}>Completed imports</MetricRow>
);
```

## 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, 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. The optional `startIcon` is decorative and renders at 14px.

```tsx theme={null}
import { MetricRow } from 'twenty-ui/components';
import { Text } from 'twenty-ui/primitives/typography';

export const FormattedStorageMetric = () => (
  <MetricRow
    value={<Text render={<bdi />}>12 / 20 GB</Text>}
    progress={60}
    progressValueText="12 of 20 gigabytes used"
  >
    Storage
  </MetricRow>
);
```

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

<ParamField body="children" type="string" required>
  Required nonempty text label that also names the optional progress ring.
</ParamField>

<ParamField body="className" type="string">
  CSS class applied to the row root.
</ParamField>

<ParamField body="progress" type="number">
  Optional controlled progress from 0 to 100. Omitting it displays the value without a ring.
</ParamField>

<ParamField body="progressColor" type="string">
  CSS color of the filled arc when progress is provided.
</ParamField>

<ParamField body="progressValueText" type="string">
  Accessible value text for the progress ring. Overrides the string value fallback; supply it when formatted content needs more context than a percentage.
</ParamField>

<ParamField body="render" type="ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>">
  Replaces the row root element while preserving its contents.
</ParamField>

<ParamField body="startIcon" type="IconComponent">
  Decorative icon before the label, rendered at 14px.
</ParamField>

<ParamField body="style" type="CSSProperties">
  Inline styles applied to the row root.
</ParamField>

<ParamField body="value" type="ReactNode" required>
  Preformatted value displayed at the end of the row. String values also supply the progress ring accessible value text.
</ParamField>