Count

​

When to use

• When a single numeric value (with optional unit) is the primary information — totals, rates, percentages, or live readings.
• In card headers, summary rows, or metric tiles where space is limited.
• When status coloring helps users interpret whether a value is within an expected range.

​

When to use something else

• For labeled metadata or filters, use Badge.
• For full trends or multi-point comparisons, use Chart.
• For tabular detail across many fields, use Data grid.

​

Behavior

• Format numbers for locale and precision appropriate to the domain (decimals, units, grouping).
• Use status variants only when the semantic meaning is clear to users.

​

Often used with

​

Accessibility

• Semantic element: Count renders as an <output> element, which is appropriate for displaying calculated, summarized, or live metric values. When the value is derived from other controls, link contributors with the for attribute on <output> pointing to their element ids.
• Visible context: A number alone is rarely meaningful to assistive technology users. Pair Count with a visible unit and title and Card title, or tab text) or provide aria-label / aria-labelledby when the metric stands alone in a tile or summary row.
• Status variants: success, warning and critical apply semantic background and text colors only. Do not rely on color alone to convey state—include the meaning in adjacent copy (e.g., “Above threshold”) or supplement with sr-only text when the variant encodes operational status.
• Abbreviated and overflow values: Truncated displays such as 99+ should expose the full quantity to screen readers when it differs from the visible string, using aria-label or visually hidden text (e.g., <span className="sr-only">142 items</span>).
• Units and formatting: Include units and scale in readable text content (e.g., 392°C, 42%) rather than styling units as decorative fragments. Format numbers for locale so screen readers announce grouping and decimals predictably.
• Live updates: When a Count reflects a streaming or polling metric, consider aria-live="polite" on the container (or a wrapping region) so meaningful changes are announced without interrupting keyboard flow.
• Contrast: Maintain at least a 4.5:1 contrast ratio between the numeric text and the default, warning, or critical background fill.