Statistic

Use the statistic component display concise numerical information

Ready to use
import {Statistic} from '@primer/react-brand'

Examples

Default

Loading

Boxed variant

Loading

Sizes

Loading

Padding

Loading

Accent descriptions

Loading

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.