Skip to content
Home

Stat

Info
Demos
Properties

Import

import { Stat } from '@dnb/eufemia'

Description

Stat contains components for prominent values with a label, where typography and visual emphasis are part of the component.

Available components

  • Stat.Root renders a definition list (dl).

    • Stat.Label renders descriptive text with dedicated typography and color for metric context (dt).

    • Stat.Content renders the main value as a definition description (dd).

  • Stat.Number is the base value formatter built on the NumberFormat formatting logic.

  • Stat.Currency and Stat.Percent are convenience wrappers around Stat.Number.

    • It adds typography-specific properties such as fontSize, fontWeight and colorizeBySign, along with mainSize and auxiliarySize as well as mainWeight and auxiliaryWeight that can be used to customize the visual emphasis of the different parts of the value (currency symbol or percent sign).

  • Stat.Trend renders explicit + / - indicators with red/green background states and screen-reader text.

  • Stat.Rating renders a star rating (defaults to 5 stars) and colorizes stars based on value. The max prop is clamped to 20 to prevent excessive DOM output; a console warning is emitted when the limit is exceeded.

  • Stat.Info renders supporting text with a smaller, muted style.

  • Stat.Inline is a horizontal layout container for grouping content elements like Stat.Trend and Stat.Info side by side with consistent spacing and alignment.

  • Stat.Text renders custom content and supports properties such as fontSize, fontWeight, and colorizeBySign.

Deprecated

  • Stat.Amount is deprecated and will be removed in a future version. Use Stat.Number instead.

Accessibility

  • Stat.Root provides semantic definition-list markup (dl), where Stat.Label is rendered as dt and Stat.Content as dd.

  • If the label also acts as a section heading, use a heading element inside Stat.Label (for example H3) to preserve a meaningful heading outline.

  • Use srLabel to prepend context in the screen-reader text only, for example turning 1,234 kr into Revenue 1,234 kr for screen readers.

  • When e.g. signDisplay="always" is used, the sign is rendered as a separate visual element with CSS spacing, while the accessible text stays based on the formatted number string.

  • All Stat variants keep dedicated accessibility handling. Currency, Percent, and Trend use a dedicated screen-reader value (.dnb-sr-only) based on the formatted content. Rating uses an accessible label (role="img" + aria-label) that includes value and max.

Relevant links