The single stat component displays the title and value of a metric.
A single stat can be used by itself or side-by-side with other single stats to display a topical set of metrics. There are a number of variations to allow for additional context or representation of the metric.
When to use a single stat
- To show an overview of how a metric is performing.
- To show multiple metrics around a similar topic side-by-side.
When not to use single stat
- To display standard text or labels.
- To display the same metric over a period of time (use a chart instead).
The default pattern for displaying a metric.
A single stat with a title icon to convey extra meaning to the metric.
A single stat with an icon which can be used to convey status or trend.
A single stat with a badge which can be used to convey status or trend in more detail.
Color, spacing, dimension, and layout information can be viewed in the Pajamas UI Kit →
Last updated at: