> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Count

> Displays a formatted numeric value with optional unit and status styling for KPIs, metrics, and summarized quantities.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-count--docs)

## 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](/cdf/aura/primitives/badge).
* For full trends or multi-point comparisons, use [Chart](/cdf/aura/primitives/chart).
* For tabular detail across many fields, use [Data grid](/cdf/aura/primitives/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

[Card](/cdf/aura/primitives/card), [Chart](/cdf/aura/primitives/chart), [Tabs](/cdf/aura/primitives/tabs), [Segmented control](/cdf/aura/primitives/segmented-control).

## 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](/cdf/aura/primitives/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.