---
description: >-
  Badges are used to help to label, categorize, or organize items using keywords
  or topics that describe them.
---

# Badge

## Overview

Use badges to indicate notification counts, differentiate between states/statuses, indicate countries, etc.&#x20;

#### **When/How to Use**

:white\_check\_mark: Use badges to present notification counts or to highlight certain details that may require attention/action from the user

:white\_check\_mark: Use badges when content can have multiple states or categories, and the user needs a way to differentiate between them

:white\_check\_mark: Single or multiple badges can be used at the same time to categorize content where appropriate

#### When Not to Use

:no\_entry: Don't use badges to represent filtering options, controls, or endpoints on the system (users, devices, numbers etc)

:no\_entry: Badges are not interactive elements, meaning they can't be clicked, focused, or edited. They are purely presentational

## Semantic roles

The Badge component has four(4) roles that hold semantic meaning. Semantic role badges are typically used independently of each other and are most commonly used to represent certain states of elements within the UI.

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2Fi9qjtOGoW2SdlDBW4rz7%2Fimage.png?alt=media\&token=00c0f151-badd-4491-a651-541d25ea73f0)

| **Primary**                        | Used to represent an action or state of an item that is currently active, in progress, or any other data that should to be highlighted using the primary brand color.                            |
| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| **Success**                        | Used to represent a status or outcome of an action that has been successful.                                                                                                                     |
| **Warning**                        | Used to represent a status or outcome of an action that may require the user's attention. Used to help direct the user's attention to potential issues or negative impacts.                      |
| **Danger**                         | Used to represent a status or outcome of an action that has incurred an error or failed. Used to help direct the user's attention to items or states that most likely require the user's action. |

## Secondary Colors

Along with semantic roles, there is a badge style for every secondary color available in Sipster's color package, as well as `light` and `dark` styles for basic contrast options. These hold inherent meaning within the system, so it is up to the designer to decide when and how to implement them.

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2Fxp0jGEar8Lgrgj6fc9R8%2Fimage.png?alt=media\&token=3ab9282a-d95b-4ff9-8394-9c021c0b3c10)

* Light
* Dark
* Indigo
* Lime
* Orange
* Pink
* Purple
* Teal

## Variants

Outside of the default badge component where it's just a text label with a background container, there exists three(3) additional badge variants:

* `Badge-HasIcon`
* `Badge-Counter`

### HasIcon

The `Badge-HasIcon` badge variant includes an icon for scenarios where the additional visual cue can be helpful in conveying meaning to users. The icon should _always_ be placed before the text label, never after.&#x20;

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M_703CkzPx9rque70Qj%2Fuploads%2FPNlavm4ejsZIWYyM3820%2FBadge%20-%20Variation%20-%20Has%20Icon%20%402x.jpg?alt=media\&token=127a5c02-78d8-41c4-8167-f498c5a58723)

### Counter

The default badge style is comprised of a light background color + text label. This helps keep the visual impact of badge elements subtle when multiple badges exist in a given view or page.&#x20;

However, the lighter background contrast does not work as well for notification or number count scenarios. For these instances, use the `Badge-Counter` badge variant to increase the visual contrast and impact of the badge. The `Badge-Counter` variant can be used in a variety of instances, and is most commonly used in context with other elements that it represents.

{% hint style="warning" %}
The `Counter` variant should _not_ be used in conjunction with the `HasIcon` variant.
{% endhint %}

![](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-MaZfJncsK9qNlpCSkYq%2F-Ma_coi-xsrOyeoCTbif%2FBadge%20-%20Roles%20-%20Counter%402x.jpg?alt=media\&token=5ed8ae4c-18cc-401a-ab44-0140b4b9b3ee)

![Examples of Badge-Counter variant from Sipster's UI-Shell:](https://1808678181-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-M_703CkzPx9rque70Qj%2F-MaZfJncsK9qNlpCSkYq%2F-Ma_grBESbRcm8cYaTrp%2FBadge%20-%20Counter%20-%20Example%402x.jpg?alt=media\&token=5bbb0898-2558-4a8c-9e54-2213d297d3c3)

