Badge

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

General

Example

Wrapper Badge

H1 Header Dark

H2 Header Dark

H3 Header Dark

H4 Header Dark

Paragraph Dev

HTML React Web Component 
<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>
 View on React storybook View on Web component storybook

Default Badge

With icon Primary Secondary Success Danger Warning Info Light Dark

HTML React Web Component 
<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>
 View on React storybook View on Web component storybook

Button Badge

Testing 99
Testing 99

HTML React Web Component 
<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>
 View on React storybook View on Web component storybook

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

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

Best practices:

  1. Use badges in conjunction with an icon or tooltip, to avoid ambiguity and enhance user understanding.
  2. Do not mix different sizes of badges within the same content.

Badges should be used when:

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

Badges should not be used when:

  1. 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.
  2. Detailed information need to be conveyed.

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.

Accessibility guidelines

Keyboard accessibility

  1. Informational badges are not in the tab order, are not interactive, and do not receive focus.

Focus indicator

  1. Ensure that focus is on the close icon for dismissible badges.

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;
Last updated 02 October 2024
Home
Latest version 2.3.5