Stats

Overview

Stats display key metrics or data points in a scannable, visually prominent format. They are designed to highlight important numbers, KPIs, or quick facts that users need to monitor or act upon.

Stats may function as purely informational displays or include action buttons when users need to drill into details or perform related tasks. They are commonly used in dashboards, summary views, and reporting surfaces.

Guidelines

Dos

• Use Stats to highlight important, changing, or monitored data.
• Keep stat labels concise (maximum 3 words).
• Use consistent units and formatting within a stat group.
• Limit stat groups to 3–4 items per row to maintain clarity.
• Order stats by importance, typically left to right.
• Include buttons only when a clear follow-up action or drill-down exists.

Don’ts

• Don’t use Stats for static or rarely changing information.
• Don’t overload a page with too many stat groups.
• Don’t mix units or formats within the same group (e.g., counts and percentages).
• Don’t use long labels or verbose subtext.
• Don’t include buttons when no meaningful action is available.

Variants

Variant	Description	Example Use
None	Minimal styling with no dividers or fill	Low-density layouts
Divided	Stats separated by dividers	Side-by-side comparisons
Filled	Stats displayed on a filled background	High-emphasis or dashboard sections

Stat structure

Each Stat consists of the following elements:

• Stat value The primary numeric metric being displayed (e.g., ###).

• Label A short descriptor identifying the metric (maximum 3 words).

• Subtext (optional) Supporting context or clarification. Keep concise.

• Button (optional) An action trigger for navigation or follow-up (maximum 2 words).

When to include buttons

Include buttons when:

• Users need to investigate the metric further.
• The stat naturally links to a detailed view or task.

Omit buttons when:

• The stat is informational only.
• No logical drill-down or action exists.

Layout and scaling

• Stats automatically grow and shrink to fit the container.
• stats-item does not require a fixed width and will wrap as needed.
• Use panel styles on the stats-container when a bordered or grouped presentation is needed.
• Choose the appropriate item style (None, Divided, Filled) based on visual hierarchy and interface density.

Context and styling

• Stat values may use contextual text styles (e.g., primary, success) for emphasis.
• Stats may be rendered as links when appropriate.
• Maintain consistent styling across stat groups to reinforce hierarchy.

Stats