Skip to content

Primer Design System

Main navigation navigation

On this page

Statistic

Use the statistic component display concise numerical information
  • Experimental
  • Not reviewed for accessibility
On this page
import {Statistic} from '@primer/react-brand'

Examples

Default

Boxed variant

Sizes

Padding

Accent descriptions

Statistic

NameTypeDefaultDescription
classNamestringSets a custom class on the root element
childrenStatistic.Heading, Statistic.DescriptionContent to be displayed within the component
size'small'
'medium'
'large'
'large'The size of the Statistic
padding'none', 'condensed', 'normal', 'spacious''none'Adding padding to all internal sides of the component

Statistic.Heading

Forwards all the props from the Heading component, including as, size, and weight.

Statistic.Description

NameTypeDefaultDescription
variant'default'
'muted'
'accent'
'default'Visual presentation of the component

Forwards most props from the Text component, including size.