> ## 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.

# Badge

> A Badge displays a label and/or icon to indicate metadata, count, status, filter, or notification.

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

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-badge--all-variants" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-badge--all-variants&viewMode=story&globals=theme:light" title="Badge all variants story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## Variants

* **Default:** Optional icon and text in various decorative colors used to display a tag or metadata label.
* **Status:** Optional icon and text in various semantic colors used to display a status, such as success, warning, or critical.
* **Count:** A label used to communicate a number, and commonly embedded within other primitives such as [Button](/cdf/aura/primitives/button)s, [Segmented control](/cdf/aura/primitives/segmented-control)s, and [Tabs](/cdf/aura/primitives/tabs).
* **Dot:** A small round dot used to display a status indicator, typically positioned on top of primitives like [Avatar](/cdf/aura/primitives/avatar) or [Button](/cdf/aura/primitives/button).
* **Closeable:** Optional icon and text used to display a closeable item like a filter chip, commonly found inside [Select](/cdf/aura/primitives/select) or [Combobox](/cdf/aura/primitives/combobox) or positioned below filter [Toolbar](/cdf/aura/primitives/toolbar)s.

## Dos and don'ts

* **Do** use Badges to display metadata that can easily be sorted or filtered.
* **Do** take caution to avoid too many Badges in a single context as this can become overwhelming and confusing for the user.
* **Do** use an icon and label and correct semantic color pairing for the status Badge.
* **Do** use an overflow Badge to display a count of items that exceeds the available space, often used for closeable Badges.
* **Don't** add interactivity to a Badge that would confuse it for a [Button](/cdf/aura/primitives/button) or link. Only closeable Badges should be interactive.

## Behavior

* Default, status, count, and dot variants are informational and non-interactive unless product-specific rules say otherwise.
* Closeable badges may expose a dismiss control only; they must not behave like primary navigation or arbitrary [Button](/cdf/aura/primitives/button) actions.

## Status Badge usage

| Status    | Use case                                                                                                                                                                                       | Label examples                                                                                                      |
| :-------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------------------------------------ |
| `Success` | Indicates stability or the clearing of one or more reported alarms. It can also be used to indicate success at the end of a process. Implies no issues are present.                            | Dynamic labels: running, stable, active / Static labels: successful, approved, connected, normal                    |
| `Warning` | Indicates a threshold has been breached; alerts a user before a critical event is triggered. It also indicates the possible requirement for corrective action to prevent a more serious fault. | Dynamic labels: warning, pending, unstable / Static labels: caution, dormant                                        |
| `Error`   | Indicates a process failure that needs immediate attention.                                                                                                                                    | Dynamic labels: failing / Static labels: critical, error, failed, urgent, denied                                    |
| `Info`    | Indicates a process is scheduled or has started but has not finished running and does not have adverse effects on the system.                                                                  | Dynamic labels: in progress, waiting, ready / Static labels: paused, incomplete (open), scheduled, in review        |
| `Neutral` | Indicates a value that is outside of an acceptable range, formatted incorrectly, or an inactive status. It may also indicate an unpublished, or draft, state.                                  | Dynamic labels: unknown, undefined, inactive, archived, draft / Static labels: undefined, inactive, archived, draft |

## Often used with

Badges are often used with or within [Button](/cdf/aura/primitives/button)s, [Tabs](/cdf/aura/primitives/tabs), [Avatar](/cdf/aura/primitives/avatar)s, [Data grid](/cdf/aura/primitives/data-grid) cells, [Toolbar](/cdf/aura/primitives/toolbar) filter rows, [Combobox](/cdf/aura/primitives/combobox) and [Select](/cdf/aura/primitives/select) menu items, and [Menu](/cdf/aura/primitives/dropdown-menu) items.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### Icon only

Use an icon-only Badge when space is limited and the icon alone conveys the metadata meaning—for example, a tag type indicator beside a label.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-badge--icon-only" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-badge--icon-only&viewMode=story&globals=theme:light" title="Badge icon only story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Dot indicators

Use dot Badge indicators on Avatars or Buttons to signal status such as online presence, unread notifications, or active state without adding text.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-badge--dot-indicators" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-badge--dot-indicators&viewMode=story&globals=theme:light" title="Badge dot indicators story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Click interaction

Use click interaction on closeable Badges when users need to dismiss filters, tags, or selections directly from the badge control.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-badge--click-interaction" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-badge--click-interaction&viewMode=story&globals=theme:light" title="Badge click interaction story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Keyboard interactions

Ensure closeable and interactive Badges support keyboard focus and activation so users who rely on keyboard navigation can dismiss or trigger badge actions.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-badge--keyboard-interactions" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-badge--keyboard-interactions&viewMode=story&globals=theme:light" title="Badge keyboard interactions story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## Accessibility

* Screen reader context: Append hidden utility text (e.g., `<span className="sr-only">5 unread messages</span>`) when badges contain raw numeric indicators or shorthand status symbols.
* Decorative elements: Apply `aria-hidden="true"` to badges used purely for aesthetic dot indicators or layout decoration.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-badge--accessibility" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-badge--accessibility&viewMode=story&globals=theme:light" title="Badge accessibility story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Forwarded ref

Use forwarded refs on Badges when parent components need direct DOM access—for example, to manage focus, measure layout, or integrate with third-party libraries.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-badge--forwarded-ref" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-badge--forwarded-ref&viewMode=story&globals=theme:light" title="Badge forwarded ref story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>