Single stat

The single stat component displays the title and value of a metric.

Examples

<gl-single-stat title="Single stat" value="100" variant="neutral" />

Usage

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).

Demo

Simple

The default pattern for displaying a metric.

<gl-single-stat title="Single stat" value="100000" variant="neutral" />

Title icon

A single stat with a title icon to convey extra meaning to the metric.

<gl-single-stat
  title="Single stat"
  value="100"
  variant="neutral"
  title-icon="hourglass"
/>

Meta icon

A single stat with an icon which can be used to convey status or trend.

<gl-single-stat
  title="Single stat"
  value="100"
  variant="neutral"
  meta-icon="check-circle"
/>

Badge

A single stat with a badge which can be used to convey status or trend in more detail.

<gl-single-stat
  title="Single stat"
  value="100"
  variant="info"
  meta-text="through the roof"
  meta-icon="rocket"
/>

The meta-tooltip prop adds a tooltip to the badge for additional context that doesn't fit in the badge text. When it's set, the badge is wrapped in a focusable button so the tooltip is reachable by keyboard and pointer. See the tooltip guidelines for what belongs in a tooltip.

<gl-single-stat
  title="Single stat"
  value="100"
  variant="success"
  meta-text="20%"
  meta-icon="trend-up"
  meta-tooltip="Percentage change compared to the previous time period"
/>

Description

A single stat with a description to add context to the metric.

<gl-single-stat
  title="Single stat"
  value="100"
  variant="neutral"
  description="Additional text"
/>

The description renders on one line. When the text exceeds the available width, it's truncated and the full text is shown in a tooltip. See content truncation and overflow.

Drag the example below wider to see the truncation and tooltip resolve once the text fits.

<gl-single-stat
  title="Single stat"
  value="100"
  variant="neutral"
  description="This is a very long description that will be truncated when it exceeds the available width"
/>

Supplementary content

A single stat with supplementary content, which renders below the value and above the description. The default slot accepts content such as a progress bar or a trend indicator.

<gl-single-stat title="Single stat" value="25" variant="neutral">
  <gl-progress-bar :value="25" height="8px" />
</gl-single-stat>

Supplementary content can be combined with a description.

<gl-single-stat
  title="Single stat"
  value="25"
  variant="neutral"
  description="Out of 100 items"
>
  <gl-progress-bar :value="25" height="8px" />
</gl-single-stat>

Link

A single stat that navigates to detailed information about a metric.

Design specifications

Color, spacing, dimension, and layout information can be viewed in the Pajamas UI Kit →

Code reference

The single stat component is used to show a single value. The color of the meta icon / badge is determined by the variant prop, which can be one of success, warning, danger, info, or neutral (default).

The description prop renders through GlTruncate using the with-tooltip prop, so the full text is shown in a tooltip only when the text is actually truncated.

Content passed to the default slot renders between the value and the description.

The meta-tooltip prop wraps the badge in a button element, which is what makes the tooltip keyboard accessible.

Hover state

You can make the component focusable by adding a tabindex=0 attribute to it. This will also apply a hover state to the component.

GlSingleStat