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

# Badge

> Badges can be thought of as a stylized way to show contained bits of information within a context. Depending on what information you would like to display and what functionality is needed, there are five choices to choose from:

## Badge

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

* Default: Optional icon and text in various decorative colors used to display a tag or metadata label.
* Status: Required icon and text in various semantic colors used to display a status indicator.
* Count: A label only used to display a count of items, typically nested in primitives like [Button](/aura-design-system/primitives/button) or [Tabs](/aura-design-system/primitives/tabs).
* Dot: A small round dot used to display a status indicator, typically positioned on top of primitives like [Avatar](/aura-design-system/primitives/avatar) or [Button](/aura-design-system/primitives/button).
* Closeable: Optional icon and text in secondary colors used to display a closeable item like a filter chip, typically displayed below a [Toolbar](/aura-design-system/primitives/toolbar) or within [Combobox](/aura-design-system/primitives/combobox) or [Select](/aura-design-system/primitives/select) inputs.

### 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](/aura-design-system/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](/aura-design-system/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

* [Button](/aura-design-system/primitives/button), [Tabs](/aura-design-system/primitives/tabs), [Avatar](/aura-design-system/primitives/avatar), [Data grid](/aura-design-system/primitives/data-grid) cells, [Toolbar](/aura-design-system/primitives/toolbar) / filter rows, [Combobox](/aura-design-system/primitives/combobox) / [Select](/aura-design-system/primitives/select) menu items (right-aligned). [Dropdown](/aura-design-system/primitives/menu) menu items, and [Context menu](/aura-design-system/primitives/menu) items.