Skip to main content Home About the Design SystemRoadmap OverviewDesignersDevelopers OverviewColorGridIconographyInteractionsSpacingTypography Overview Global colorBox shadowTypographyBorderOpacitySpaceLengthIconBreakpointsMedia queries All elements Accordion Alert Announcement Audio player Avatar Back to top Badge Blockquote Breadcrumb Button group Button Card Chip Code block Call to action Dialog Disclosure Footer Health index Icon Jump links Menu dropdown Navigation link Navigation (primary) Navigation (secondary) Navigation (vertical) Pagination PopoverPlanned Progress stepper Readtime Scheme toggle Select Site status Skeleton Skip link Spinner Statistic Subnavigation Surface Switch Table Tabs Tag Tile Timestamp Tooltip Video embed OverviewColor PalettesCustomizingDevelopers All PatternsAccordionAlertCall to ActionCardFilterFormLink with iconLogo wallSearch barSticky bannerSticky cardTabsTagTile All Personalization PatternsAnnouncement FundamentalsAccessibility toolsAssistive technologiesCI/CDContentContributorsDesignDevelopmentManual testingResourcesScreen readers Design/code status Release notes Get support

Statistic

OverviewStyleGuidelinesCodeAccessibilityDemos
OverviewStatusWhen to useStatus checklistOverviewStatusWhen to useStatus checklist

Overview

A statistic showcases a data point or quick fact visually. Elements must include a statistic slot and body text. Icons, titles, and CTAs should be consistent when grouped. Adapts color for WCAG contrast in light and dark contexts. Only the CTA receives Tab focus; screen readers read DOM order.

import '@rhds/elements/rh-stat/rh-stat.js';
 
<rh-stat>
  <span slot="statistic">Statistic Placeholder</span>
  <span>Description Placeholder</span>
</rh-stat>
 
import { Stat } from "@rhds/elements/react/rh-stat/rh-stat.js";

// NOTE: React 19+ does not require these wrapper imports.
// You can use the custom elements directly as-is.

export const Demo = () => (
  <Stat>
    <span slot="statistic">Statistic Placeholder</span>
    <span>Description Placeholder</span>
  </Stat>
);

The icon name to display above the statistic. When set, the component dynamically imports rh-icon and renders it using the specified icon set.

The icon set from which to load the icon. Only applies when the icon attribute is set.

Controls the visual ordering of the title and statistic slots. When set to statistic, the data value appears above the title text.

The size variant of the statistic. The large size increases the data text font size and icon dimensions.

Whether the statistic renders in a mobile layout with reduced font sizes. Managed internally via ScreenSizeController but can be set explicitly.

 View source on GitHub

Status

When to use

  • When you need to add visual emphasis to a statistic
  • When you need to pair a data point with supporting text to add more context
  • When you need to display several statistics together in a group

Status checklist

Edit this page on GitHub
© 2026 Red Hat Deploys by Netlify