Badges

Badges are used to highlight the status of an entity.

Base

Badges are typically used to inform the user of status, information, or of an action that’s been taken.

v.1.0.5
v.1.0.5
<div class="c-badge">v.1.0.5</div>
<div class="c-badge c-badge-square">v.1.0.5</div>
HTML


Color Examples

Below are the available theme colors for the Badges element.

Badge
Badge
Badge
Badge
Badge
<div class="c-badge c-badge-primary">Badge</div>
  
<div class="c-badge c-badge-secondary">Badge</div>
  
<div class="c-badge c-badge-success">Badge</div>
  
<div class="c-badge c-badge-warning">Badge</div>
  
<div class="c-badge c-badge-danger">Badge</div>
HTML

Extended Palette

Badges are also available with the extended color palette.

Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
Badge
<div class="c-badge c-badge-dark">Badge</div>
  
<div class="c-badge c-badge-cyan">Badge</div>
  
<div class="c-badge c-badge-grape">Badge</div>
  
<div class="c-badge c-badge-indigo">Badge</div>
  
<div class="c-badge c-badge-lime">Badge</div>
  
<div class="c-badge c-badge-orange">Badge</div>
  
<div class="c-badge c-badge-pink">Badge</div>
  
<div class="c-badge c-badge-teal">Badge</div>
  
<div class="c-badge c-badge-violet">Badge</div>
  
<div class="c-badge c-badge-primary-light">Badge</div>
  
<div class="c-badge c-badge-success-light">Badge</div>
  
<div class="c-badge c-badge-warning-light">Badge</div>
  
<div class="c-badge c-badge-danger-light">Badge</div>
  
<div class="c-badge c-badge-cyan-light">Badge</div>
  
<div class="c-badge c-badge-grape-light">Badge</div>
  
<div class="c-badge c-badge-indigo-light">Badge</div>
  
<div class="c-badge c-badge-lime-light">Badge</div>
  
<div class="c-badge c-badge-orange-light">Badge</div>
  
<div class="c-badge c-badge-pink-light">Badge</div>
  
<div class="c-badge c-badge-teal-light">Badge</div>
  
<div class="c-badge c-badge-violet-light">Badge</div>
HTML


Size Examples

In addition to the default size, badges are also available in small and large.

Badge
Badge
<div class="c-badge c-badge-sm">Badge</div>
  
<div class="c-badge c-badge-lg">Badge</div>
HTML


Dismissable

Badges can also be made dismissable.

Value
Value
Value
Value
Value
Value
<div class="c-badge c-badge-sm c-badge-indigo">
  Value <a href="#" class="c-badge-close"></a>
</div>
<div class="c-badge c-badge-square c-badge-sm c-badge-indigo">
  Value <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-grape">
  Value <a href="#" class="c-badge-close"></a>
</div>
<div class="c-badge c-badge-square c-badge-grape">
  Value <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-lg c-badge-teal">
  Value <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-square c-badge-lg c-badge-teal">
  Value <a href="#" class="c-badge-close"></a>
</div>
HTML


Multiple Modifiers

Primary Bear
Primary Bear
Primary Bear
Primary Bear
Success Bear
Success Bear
Success Bear
Success Bear


Amazon
Apple
Pink Bear Large Square - with long title
Teal Bear Large Square - with long title
<div class="c-badge-group">
<div class="c-badge c-badge-primary">
  <div class="c-avatar c-avatar-success" data-text="AB">
    <img src="https://unsplash.it/200?image=433">
  </div>
  Primary Bear
  <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-square c-badge-primary">
  <div class="c-avatar c-avatar-success" data-text="AB">
    <img src="https://unsplash.it/200?image=433">
  </div>
  Primary Bear
  <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-lg c-badge-primary">
  <div class="c-avatar c-avatar-success" data-text="AB">
    <img src="https://unsplash.it/200?image=433">
  </div>
  Primary Bear
  <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-square c-badge-lg c-badge-primary">
  <div class="c-avatar c-avatar-success" data-text="AB">
    <img src="https://unsplash.it/200?image=433">
  </div>
  Primary Bear
  <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-success">
  <div class="c-avatar c-avatar-success" data-text="AB">
    <img src="https://unsplash.it/200?image=433">
  </div>
  Success Bear
  <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-square c-badge-success">
  <div class="c-avatar c-avatar-success" data-text="AB">
    <img src="https://unsplash.it/200?image=433">
  </div>
  Success Bear
  <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-lg c-badge-success">
  <div class="c-avatar c-avatar-success" data-text="AB">
    <img src="https://unsplash.it/200?image=433">
  </div>
  Success Bear
  <a href="#" class="c-badge-close"></a>
</div>


<div class="c-badge c-badge-square c-badge-lg c-badge-success">
  <div class="c-avatar c-avatar-success" data-text="AB">
    <img src="https://unsplash.it/200?image=433">
  </div>
  Success Bear
  <a href="#" class="c-badge-close"></a>
</div>

<br>
<br>

<div class="c-badge c-badge-lg c-badge-orange-light">
    <div class="c-avatar c-avatar-orange">
        <i class="fab fa-amazon"></i>
    </div>
    Amazon
    <a href="#" class="c-badge-close"></a>
  </div>

<div class="c-badge c-badge-lg c-badge-success-light">
  <div class="c-avatar c-avatar-success">
      <i class="fab fa-apple"></i>
  </div>
  Apple
  <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-square c-badge-lg c-badge-pink">
  <div class="c-avatar c-avatar-success" data-text="AB">
      <img src="https://unsplash.it/200?image=433">
  </div>
  Pink Bear Large Square - with long title
  <a href="#" class="c-badge-close"></a>
</div>

<div class="c-badge c-badge-square c-badge-lg c-badge-teal">
  <div class="c-avatar c-avatar-success" data-text="AB">
      <img src="https://unsplash.it/200?image=433">
  </div>
  Teal Bear Large Square - with long title
  <a href="#" class="c-badge-close"></a>
</div>
</div>
HTML


Inline Status

Information 8
<div class="c-body-text-xl"> 
  Information 
  <span class="c-badge c-badge-sm c-badge-primary c-badge-top">8</span>
</div>
HTML


Empty Status Badges

A badge with no content can be used to add visual attention to an element.

<div class="c-badge c-badge-primary"></div>
  
<div class="c-badge c-badge-secondary"></div>
  
<div class="c-badge c-badge-success"></div>
  
<div class="c-badge c-badge-warning"></div>
  
<div class="c-badge c-badge-danger"></div>
  
  
<div class="c-badge c-badge-dark"></div>
  
<div class="c-badge c-badge-cyan"></div>
  
<div class="c-badge c-badge-grape"></div>
  
<div class="c-badge c-badge-indigo"></div>
  
<div class="c-badge c-badge-lime"></div>
  
<div class="c-badge c-badge-orange"></div>
  
<div class="c-badge c-badge-pink"></div>
  
<div class="c-badge c-badge-teal"></div>
  
<div class="c-badge c-badge-violet"></div>
  
<div class="c-badge c-badge-primary-light"></div>
  
<div class="c-badge c-badge-success-light"></div>
  
<div class="c-badge c-badge-warning-light"></div>
  
<div class="c-badge c-badge-danger-light"></div>
  
<div class="c-badge c-badge-cyan-light"></div>
  
<div class="c-badge c-badge-grape-light"></div>
  
<div class="c-badge c-badge-indigo-light"></div>
  
<div class="c-badge c-badge-lime-light"></div>
  
<div class="c-badge c-badge-orange-light"></div>
  
<div class="c-badge c-badge-pink-light"></div>
  
<div class="c-badge c-badge-teal-light"></div>
  
<div class="c-badge c-badge-violet-light"></div>
HTML

Default Badge


Badge with Icon


Empty Badge


Removeable Badge


Badge with Avatar


Badge with Icon


Pill Block

Overview

Types of badges available:

1. Status Badges



2. Numeric Badges



Usage

  • For status information

  • For counts/indication of a running tally


Badge Colors

Cupcake Color Palette


Light Color Set

  • Only use values 3-5

Dark Color Set**

  • Only use values 6-9


General best practices

  • Always use colors that are not used in brand colors, button colors, and common action colors

  • Always use badges in conjunction with a single item so that there is no ambiguity around which item is indicated

  • Always use either the light color set or dark color set for badges and stick to it

  • Always use either the rounded or squared badges and stick to it

Best practices with Status Badges

  • Use 1 to 2 word status indicators for status badges

  • Use appropriate size status badge for a specific requirement

  • Try to use a different shape or color value/set to visually differentiate badges from similar visual elements such as tags

Best practices with Numeric Badges

  • Use only numbers in numeric badges

Examples


Status Badges in tables


Status Badges in cards


Numeric Badges in media list items