Badge

Badges can be used to highlight important bits of information such as labels, notifications, and status.

General

Example

Default Badge

With icon Primary Secondary Success Danger Warning Info Light Dark 

 
<span class="cgds badge bg-primary"><i class="bi bi-qr-code left"></i>With icon<i class="bi bi-qr-code right"></i></span>
<span class="cgds badge bg-primary">Primary</span>
<span class="cgds badge bg-secondary">Secondary</span>
<span class="cgds badge bg-success">Success</span>
<span class="cgds badge bg-danger">Danger</span>
<span class="cgds badge bg-warning text-dark">Warning</span>
<span class="cgds badge bg-info text-dark">Info</span>
<span class="cgds badge bg-light text-dark">Light</span>
<span class="cgds badge bg-dark">Dark</span>

Wrapper Badge

H1 Header Dark

H2 Header Dark

H3 Header Dark

H4 Header Dark

Paragraph Dev

 
<h1 class="d-flex align-items-center">H1 Header <span class="ms-4 cgds badge bg-dark"><i class="bi bi-qr-code left"></i>Dark<i class="bi bi-qr-code right"></i></span></h1>
<h2>H2 Header <span class="cgds badge bg-dark">Dark</span></h2>
<h3>H3 Header <span class="cgds badge bg-dark">Dark</span></h3>
<h4>H4 Header <span class="cgds badge bg-dark">Dark</span></h4>
<p>Paragraph <span class="cgds badge bg-secondary">Dev</span></p>

Button Badge

Testing 99
Testing 99

 
<div class="cgds btn btn-primary">Testing <span class="cgds badge bg-light text-dark">99</span></div>
<div class="cgds btn btn-primary btn-lg">Testing <span class="cgds badge bg-light text-dark">99</span></div>
<button type="button" class="cgds btn btn-primary position-relative">
  Inbox
  <span class="cgds position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
      99+<span class="visually-hidden">unread messages</span>
  </span>
</button>
<button type="button" class="cgds btn btn-primary position-relative">
  Profile
  <span class="cgds position-absolute top-0 start-100 translate-middle p-2 bg-danger border border-light rounded-circle">
      <span class="visually-hidden">New alerts</span>
  </span>
</button>
<i class="bi bi-bell position-relative fs-4">
  <span class="cgds position-absolute top-0 start-100 translate-middle p-2 bg-warning border border-light rounded-circle">
    <span class="visually-hidden">New alerts</span>
  </span>
</i>

Anatomy

Badge Anatomy
  1. Icon (situational): Serves to give more context to the badge. E.g., avatar, logo, or icon.
  2. Container: Takes on the length of the text and/or icons within the badge.
  3. Text: Text can be an entity name, description, tag, action, or conversational. Length of the text is expandable
  4. Icon (situational): Input can include a Remove icon.

Spacing

Badge Spacing

Within the badge
Ensure that there is a min of 4px vertical spacing and 8px horizontal spacing within the badge and 6px spacing between icons and text. Base height 24px.

Usage guidelines

Badges should be used:

  1. To give a status update on a piece of information or action.
  2. When you want to highlight something.

Badges should not be used:

  1. When users are likely to confuse a badge with a small button, badges should not be clickable, especially when they appear in the same area of the page as buttons.

Usability guidelines

Avoid long sentences
Minimize badge text length to one- to three-words. Content should be clear and concise, and easy to identify.

Users may confuse badges as buttons
Avoid triggering interaction with a badge as they may be confused as small buttons

Badges should include tooltips, where necessary, to enhance user understanding.
For example, a badge is used in conjunction with an icon.

Badge design tokens

$badge-font-size: .75em !default;
$badge-font-weight: $font-weight-bold !default;
$badge-color: $white !default;
$badge-padding-y: .35em !default;
$badge-padding-x: .65em !default;
$badge-border-radius: $border-radius !default;
Home
Previous version 1.0.3