Badge

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

Example

Default Badge

With icon Primary Secondary Success Danger Warning Info Light Dark

 
<span class="sgds badge bg-primary"><i class="bi bi-qr-code left"></i>With icon<i class="bi bi-qr-code right"></i></span>
<span class="sgds badge bg-primary">Primary</span>
<span class="sgds badge bg-secondary">Secondary</span>
<span class="sgds badge bg-success">Success</span>
<span class="sgds badge bg-danger">Danger</span>
<span class="sgds badge bg-warning text-dark">Warning</span>
<span class="sgds badge bg-info text-dark">Info</span>
<span class="sgds badge bg-light text-dark">Light</span>
<span class="sgds 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 sgds 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="sgds badge bg-dark">Dark</span></h2>
<h3>H3 Header <span class="sgds badge bg-dark">Dark</span></h3>
<h4>H4 Header <span class="sgds badge bg-dark">Dark</span></h4>
<p>Paragraph <span class="sgds badge bg-secondary">Dev</span></p>

                

Button Badge

Testing 99
Testing 99
New alerts

 
<div class="sgds btn btn-primary">Testing <span class="sgds badge bg-light text-dark">99</span></div>
<div class="sgds btn btn-primary btn-lg">Testing <span class="sgds badge bg-light text-dark">99</span></div>
<button type="button" class="sgds btn btn-primary position-relative">
    Inbox
    <span class="sgds 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="sgds btn btn-primary position-relative">
    Profile
    <span class="sgds 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="sgds 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 2.0.0