---
url: /docs/components/badge/overview.md
---
# Badge - Overview

Badges are used to highlight a relevant piece of information, like status or category.

Badges are small, contextual elements used to display concise, informative labels. They highlight relevant information such as statuses, categories, counts, roles, or activity indicators, helping users quickly identify and differentiate items at a glance.

Visually styled and colour-coded to indicate contextual metadata.

Related components: [Pill](../pill/overview.md)

## Example

## Variants

### Neutral

### Info

### Positive

### Warning

### Negative

### Sponsored

### Price

### Disabled

## Anatomy

::: image-block
![Badge anatomy diagram showing the container, optional leading icon, and label.](/components/badge/overview-anatomy.svg)
:::

1. **Container**: Groups the badge content and applies the selected variant's background colour.
2. **Leading icon (optional)**: Reinforces the meaning of the label.
3. **Label**: Communicates the status or metadata being highlighted.