@primer/react-brand/docs/components/Statistic/index.md

Primer Brand is a GitHub's design system for creating React-based marketing websites and digital experiences.

---
title: Statistic
description: Use the statistic component display concise numerical information
keywords: ['number', 'percentage', 'value', 'metric']
ready: true
source: https://github.com/primer/brand/blob/main/packages/react/src/Statistic/Statistic.tsx
storybook: '/brand/storybook/?path=/story/components-statistic--default'
a11yReviewed: false
---

```js
import {Statistic} from '@primer/react-brand'
```

## Examples

### Default

```jsx
<Statistic>
  <Statistic.Heading>+25%</Statistic.Heading>
  <Statistic.Description>increase in developer speed</Statistic.Description>
</Statistic>
```

### Boxed variant

```jsx
<Statistic variant="boxed">
  <Statistic.Heading>+25%</Statistic.Heading>
  <Statistic.Description>increase in developer speed</Statistic.Description>
</Statistic>
```

### Sizes

```jsx
<Stack direction={{narrow: 'vertical', wide: 'horizontal'}}>
  <Statistic size="small">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <Statistic size="medium">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <Statistic size="large">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
</Stack>
```

### Padding

```jsx
<Stack direction={{narrow: 'vertical', wide: 'horizontal'}}>
  <Statistic padding="condensed">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <Statistic padding="normal">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <Statistic padding="spacious">
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
  <Statistic
    padding={{
      narrow: 'condensed',
      regular: 'normal',
      wide: 'spacious',
    }}
  >
    <Statistic.Heading>+25%</Statistic.Heading>
    <Statistic.Description>increase in developer speed</Statistic.Description>
  </Statistic>
</Stack>
```

### Accent descriptions

```jsx
<Statistic>
  <Statistic.Heading>+25%</Statistic.Heading>
  <Statistic.Description variant="accent">increase in developer speed</Statistic.Description>
</Statistic>
```

### Statistic

| Name        | Type                                         |  Default  | Description                                           |
| :---------- | :------------------------------------------- | :-------: | :---------------------------------------------------- |
| `className` | `string`                                     |           | Sets a custom class on the root element               |
| `children`  | `Statistic.Heading`, `Statistic.Description` |           | Content to be displayed within the component          |
| `size`      | `StatisticSizes`                             | `'large'` | The size of the Statistic                             |
| `padding`   | `StatisticSpacingValues`                     |  `'none'` | Adding padding to all internal sides of the component |

### Statistic.Heading

Forwards all the props from the [Heading component](../../typography/Heading/index.md), including `as`, `size`, and `weight`.

### Statistic.Description

| Name      | Type                               |   Default   | Description                          |
| :-------- | :--------------------------------- | :---------: | :----------------------------------- |
| `variant` | `'default' \| 'muted' \| 'accent'` | `'default'` | Visual presentation of the component |

Forwards most props from the [Text component](../../typography/Text/index.md), including `size`.