> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/badge.md).

# Badge

<figure><img src="/files/a0dfteAJ8U7Xe22CmOqo" alt=""><figcaption></figcaption></figure>

## Overview

The Badge component is designed to present immediate, contextual information in a compact format. Typically used for alerts, statuses, or labels.

{% embed url="<https://www.figma.com/design/4NwKhd4dwRhRF5Zpiooi69/Components?node-id=2-159100&t=0Thv0LIO2gFzE3eo-4>" %}

## When to use

* When users need to quickly identify the state of an element without needing to read detailed descriptions.
* Apply badges to distinguish items with categories or labels, such as “Featured” or “Sale”.
* Use badges to indicate the presence of additional actions or options, such as a new feature flag.

## When not to use

* Badges are read-only and not interactive, should not be used instead of tags.
* Avoid using badges if they clutter the interface or overwhelm the user with too many labels.&#x20;
* Badges are not suitable for displaying lengthy text or detailed information.

## Anatomy

1. **Tag:** A label or keyword that categorizes or describes the badge's purpose. While similar to the Text element, the Tag often serves as a more specific or standardized label.
2. **Icon Leading:** An icon placed before the text in the badge. It adds visual context, helping users quickly understand the badge's meaning.
3. **Avatar:** Displays a small image or icon representing a user, group, or entity. Useful in situations where identifying the user or source is important, such as in notifications or lists.
4. **Title:** A short and direct text, providing the core message. This could be a status like "New" or "Error," a number indicating count, or any other brief descriptor.
5. **Badge Container:** foundational element that holds all other components together. It defines the shape, size, and overall layout of the badge.
6. **Icon Trailing:** An icon placed after the text or tag. It often complements the leading icon or adds further visual indication of the badge's purpose.

<figure><img src="/files/fc9sSzeWBZRasI4wWhGI" alt=""><figcaption></figcaption></figure>

## Styles

<figure><img src="/files/UM7LGpyCTBhiEMCgkrRZ" alt=""><figcaption></figcaption></figure>

## States

<figure><img src="/files/Ug6eDgdqjvgHlZYyMl9W" alt=""><figcaption></figcaption></figure>

## Size

<figure><img src="/files/BqQ1aGvNjKusbQcOIaMW" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="164">Size</th><th>Title (px)</th><th width="147">Icon (px)</th><th>Container Height (px)</th></tr></thead><tbody><tr><td>Small</td><td>12</td><td>16</td><td>22</td></tr><tr><td>Medium</td><td>14</td><td>20</td><td>28</td></tr><tr><td>Large</td><td>16</td><td>24</td><td>32</td></tr></tbody></table>

## Accessibility

* **Screen Reader Support:** Ensure that all badges are accessible to screen readers by providing descriptive text.
* **Color Contrast:** Badges should have sufficient color contrast to be easily readable for all users, including those with color vision deficiencies.
* **Consistent Behavior:** Badges should behave consistently across different parts of the interface to avoid confusing the user.
* Badges are color-coded to represent different types (e.g., red for errors, green for success) but to enhance clarity and context, include elements like profile avatars or icons.

## Example

* **Status Updates:** Indicate statuses like "Online" or "Error" within an application. For example, a green badge labeled "Active" next to a user’s profile.
* **Notifications:** Display badges to show unread messages or new notifications. For instance, a badge with a number "3" on a message icon or a bell icon with a red badge to signify new alerts.
* &#x20;**Categorization:** Apply badges to label or categorize content, such as tagging an item as "New" or "Featured."&#x20;
* **User Identification:** Badges can include profile avatars to identify users within a list. For example, a badge with a user’s photo followed by their name.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://voit.gitbook.io/voitdocs/components/badge.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.