Documentation | Graindashboard UI Kit

Badges

Example

Badges scale to match the size of the immediate parent element by using relative font sizing and em units.

Result
HTML

Example heading New


  <div class="h1">Example heading <span class="badge badge-primary">New</span></div>
  <div class="h2">Example heading <span class="badge badge-primary">New</span></div>
  <div class="h3">Example heading <span class="badge badge-primary">New</span></div>
  <div class="h4">Example heading <span class="badge badge-primary">New</span></div>
  <div class="h5">Example heading <span class="badge badge-primary">New</span></div>
  <div class="h6">Example heading <span class="badge badge-primary">New</span></div>

Badges can be used as part of links or buttons to provide a counter.

Result
HTML


  <button type="button" class="btn btn-primary">
    Notifications <span class="badge badge-lighter ml-1">4</span>
  </button>

Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.

Unless the context is clear (as with the "Notifications" example, where it is understood that the "4" is the number of notifications), consider including additional context with a visually hidden piece of additional text.

Result
HTML


  <button type="button" class="btn btn-primary">
    Profile <span class="badge badge-lighter ml-1">9</span>
    <span class="sr-only">unread messages</span>
  </button>

Contextual variations

Add any of the below mentioned modifier classes to change the appearance of a badge.

Result
HTML

Primary Secondary Success Danger Warning Info Light Dark


  <span class="badge badge-primary">Primary</span>
  <span class="badge badge-secondary">Secondary</span>
  <span class="badge badge-success">Success</span>
  <span class="badge badge-danger">Danger</span>
  <span class="badge badge-warning">Warning</span>
  <span class="badge badge-info">Info</span>
  <span class="badge badge-light">Light</span>
  <span class="badge badge-dark">Dark</span>

Conveying meaning to assistive technologies

Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (e.g. the visible text), or is included through alternative means, such as additional text hidden with the .sr-only class.

Pill badges

Use the .badge-pill modifier class to make badges more rounded (with a larger border-radius and additional horizontal padding).

Result
HTML

Primary Secondary Success Danger Warning Info Light Dark


  <span class="badge badge-pill badge-primary">Primary</span>
  <span class="badge badge-pill badge-secondary">Secondary</span>
  <span class="badge badge-pill badge-success">Success</span>
  <span class="badge badge-pill badge-danger">Danger</span>
  <span class="badge badge-pill badge-warning">Warning</span>
  <span class="badge badge-pill badge-info">Info</span>
  <span class="badge badge-pill badge-light">Light</span>
  <span class="badge badge-pill badge-dark">Dark</span>

Links

Using the contextual .badge-* classes on an <a> element quickly provide actionable badges with hover and focus states.

Result
HTML

Primary Secondary Success Danger Warning Info Light Dark


  <a href="#" class="badge badge-primary">Primary</a>
  <a href="#" class="badge badge-secondary">Secondary</a>
  <a href="#" class="badge badge-success">Success</a>
  <a href="#" class="badge badge-danger">Danger</a>
  <a href="#" class="badge badge-warning">Warning</a>
  <a href="#" class="badge badge-info">Info</a>
  <a href="#" class="badge badge-light">Light</a>
  <a href="#" class="badge badge-dark">Dark</a>

Custom badges and indicators

Graindashboard also includes own badges and indicators for cases like notifications and so on. To properly scale fixed badges, the following classes badge-sm, badge-md and badge-lg are used. In addition, in most cases utility classes are used for indicators.

26 26 26 26 26 26 26 26


  <span class="badge badge-primary badge-sm rounded-circle">26</span>
  <span class="badge badge-secondary badge-sm rounded-circle">26</span>
  <span class="badge badge-success badge-sm rounded-circle">26</span>
  <span class="badge badge-danger badge-sm rounded-circle">26</span>
  <span class="badge badge-warning badge-sm rounded-circle">26</span>
  <span class="badge badge-primary badge-sm darker rounded-circle">26</span>
  <span class="badge badge-light badge-sm rounded-circle">26</span>
  <span class="badge badge-dark badge-sm rounded-circle">26</span>

Example #2

Result
HTML


  <span class="d-inline-block position-relative p-2">
    <span class="indicator indicator-primary indicator-bordered indicator-top-right rounded-circle"></span>
    <i class="gd-bell icon-text"></i>
  </span>

  <span class="d-inline-block position-relative p-2">
    <span class="indicator indicator-secondary indicator-bordered indicator-top-right rounded-circle"></span>
    <i class="gd-bell icon-text"></i>
  </span>

  <span class="d-inline-block position-relative p-2">
    <span class="indicator indicator-success indicator-bordered indicator-top-right rounded-circle"></span>
    <i class="gd-bell icon-text"></i>
  </span>

  <span class="d-inline-block position-relative p-2">
    <span class="indicator indicator-danger indicator-bordered indicator-top-right rounded-circle"></span>
    <i class="gd-bell icon-text"></i>
  </span>

  <span class="d-inline-block position-relative p-2">
    <span class="indicator indicator-warning indicator-bordered indicator-top-right rounded-circle"></span>
    <i class="gd-bell icon-text"></i>
  </span>

  <span class="d-inline-block position-relative p-2">
    <span class="indicator indicator-primary indicator-bordered indicator-top-right rounded-circle"></span>
    <i class="gd-bell icon-text"></i>
  </span>

  <span class="d-inline-block position-relative p-2">
    <span class="indicator indicator-light indicator-bordered indicator-top-right rounded-circle"></span>
    <i class="gd-bell icon-text"></i>
  </span>

  <span class="d-inline-block position-relative p-2">
    <span class="indicator indicator-dark indicator-bordered indicator-top-right rounded-circle"></span>
    <i class="gd-bell icon-text"></i>
  </span>

Example #3

Result
HTML

PN DM DM DM DM


  <span class="badge badge-lg bg-soft-primary position-relative text-primary">
    <span class="indicator indicator-primary indicator-bordered indicator-outside indicator-top-right rounded-circle"></span>
    PN
  </span>

  <span class="badge badge-lg bg-soft-secondary position-relative text-secondary">
    <span class="indicator indicator-secondary indicator-bordered indicator-outside indicator-top-right rounded-circle"></span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-primary-darker position-relative text-primary-darker">
    <span class="indicator indicator-danger indicator-bordered indicator-outside indicator-top-right rounded-circle"></span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-warning position-relative text-warning">
    <span class="indicator indicator-warning indicator-bordered indicator-outside indicator-top-right rounded-circle"></span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-danger position-relative text-danger">
    <span class="indicator indicator-secondary indicator-bordered indicator-outside indicator-top-right rounded-circle"></span>
    DM
  </span>

Example #4

Result
HTML


  <span class="badge badge-lg bg-soft-primary position-relative text-primary">
    <span class="badge-outside badge-md badge-bordered-reverse badge-bottom-right d-flex rounded-circle">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    PN
  </span>

  <span class="badge badge-lg bg-soft-secondary position-relative text-secondary">
    <span class="badge-outside badge-md badge-bordered-reverse badge-bottom-right d-flex rounded-circle">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-primary-darker position-relative text-primary-darker">
    <span class="badge-outside badge-md badge-bordered-reverse badge-bottom-right d-flex rounded-circle">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-warning position-relative text-warning">
    <span class="badge-outside badge-md badge-bordered-reverse badge-bottom-right d-flex rounded-circle">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-light position-relative text-light">
    <span class="badge-outside badge-md badge-bordered-reverse badge-bottom-right d-flex rounded-circle">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    DM
  </span>

Example #5

Result
HTML

26 PN 26 DM 26 DM 26 DM 26 DM


  <span class="badge badge-lg bg-soft-primary position-relative text-primary">
    <span class="badge-outside badge-sm badge-top-right badge-primary rounded-circle">26</span>
    PN
  </span>

  <span class="badge badge-lg bg-soft-secondary position-relative text-secondary">
    <span class="badge-outside badge-sm badge-top-right badge-secondary rounded-circle">26</span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-primary-darker position-relative text-primary-darker">
    <span class="badge-outside badge-sm badge-top-right badge-primary-darker rounded-circle">26</span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-warning position-relative text-warning">
    <span class="badge-outside badge-sm badge-top-right badge-warning rounded-circle">26</span>
    DM
  </span>

  <span class="badge badge-lg bg-soft-light position-relative text-light">
    <span class="badge-outside badge-sm badge-top-right badge-light rounded-circle">26</span>
    DM
  </span>

Example #6

Result
HTML

DM 2,264 MS 2,264 BS 2,264 BS 2,264 GM 2,264


  <span class="badge badge-pill badge-complex bg-semi-soft-primary text-white">
    <span class="badge badge-sm badge-primary rounded-circle mr-2">DM</span>
    <span>2,264</span>
  </span>
  <span class="badge badge-pill badge-complex bg-semi-soft-secondary text-white">
    <span class="badge badge-sm badge-secondary rounded-circle mr-2">MS</span>
    <span>2,264</span>
  </span>
  <span class="badge badge-pill badge-complex bg-semi-soft-primary-darker text-white">
    <span class="badge badge-sm badge-primary-darker rounded-circle mr-2">BS</span>
    <span>2,264</span>
  </span>
  <span class="badge badge-pill badge-complex bg-semi-soft-warning text-white">
    <span class="badge badge-sm badge-warning rounded-circle mr-2">BS</span>
    <span>2,264</span>
  </span>
  <span class="badge badge-pill badge-complex bg-semi-soft-success text-white">
    <span class="badge badge-sm badge-success rounded-circle">GM</span>
    <span>2,264</span>
  </span>

Example #7

Result
HTML

DM 2,264 MS 2,264 BS 2,264 BS 2,264 GM 2,264


  <span class="badge badge-complex badge-primary">
    <span class="badge badge-sm text-primary bg-white mr-2">DM</span>
    <span>2,264</span>
  </span>
  <span class="badge badge-complex badge-secondary">
    <span class="badge badge-sm text-secondary bg-white mr-2">MS</span>
    <span>2,264</span>
  </span>
  <span class="badge badge-complex badge-primary-darker">
    <span class="badge badge-sm text-primary-darker bg-white mr-2">BS</span>
    <span>2,264</span>
  </span>
  <span class="badge badge-complex badge-warning">
    <span class="badge badge-sm text-warning bg-white mr-2">BS</span>
    <span>2,264</span>
  </span>
  <span class="badge badge-complex badge-light">
    <span class="badge badge-sm text-light bg-white mr-2">GM</span>
    <span>2,264</span>
  </span>

Example #8

Result
HTML


  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-secondary rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-primary-darker rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-danger rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left indicator-warning rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

  <div class="d-inline-block position-relative">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-left bg-light rounded-circle"></span>
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
  </div>

Example #9

Result
HTML


  <div class="d-inline-block position-relative">
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    <span class="badge badge-outside badge-sm badge-bottom-right badge-primary rounded-circle">DM</span>
  </div>

  <div class="d-inline-block position-relative">
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    <span class="badge badge-outside badge-sm badge-bottom-right badge-secondary rounded-circle">MS</span>
  </div>

  <div class="d-inline-block position-relative">
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    <span class="badge badge-outside badge-sm badge-bottom-right badge-primary-darker rounded-circle">BS</span>
  </div>

  <div class="d-inline-block position-relative">
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    <span class="badge badge-outside badge-sm badge-bottom-right badge-warning rounded-circle">BS</span>
  </div>

  <div class="d-inline-block position-relative">
    <img class="avatar-lg rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    <span class="badge badge-outside badge-sm badge-bottom-right bg-light text-white rounded-circle">GM</span>
  </div>

Example #10

Result
HTML

2,264


  <span class="badge badge-complex badge-pill badge-primary">
    <span class="badge badge-sm text-primary bg-white rounded-circle mr-2">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    <span>2,264</span>
  </span>
  <span class="badge badge-complex badge-pill badge-secondary">
    <span class="badge badge-sm text-secondary bg-white rounded-circle mr-2">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    <span>2,264</span>
  </span>
  <span class="badge badge-complex badge-pill badge-primary-darker">
    <span class="badge badge-sm d-primary-darker bg-white rounded-circle mr-2">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    <span>2,264</span>
  </span>
  <span class="badge badge-complex badge-pill badge-warning">
    <span class="badge badge-sm text-warning bg-white rounded-circle mr-2">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    <span>2,264</span>
  </span>
  <span class="badge badge-complex badge-pill badge-light">
    <span class="badge badge-sm text-light bg-white rounded-circle mr-2">
      <img class="img-fluid rounded-circle" src="img/avatar-1.jpg" alt="Image description">
    </span>
    <span>2,264</span>
  </span>

Example #11

Result
HTML

Account Account Account Account


  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-right indicator-secondary rounded-circle"></span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-right indicator-primary-darker rounded-circle"></span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-right indicator-danger rounded-circle"></span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-right indicator-warning rounded-circle"></span>
    Account
  </a>

Example #12

Result
HTML

Account Account Account Account


  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="indicator indicator-bordered indicator-top-right indicator-secondary rounded-circle"></span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="indicator indicator-bordered indicator-top-right indicator-primary-darker rounded-circle"></span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="indicator indicator-bordered indicator-top-right indicator-danger rounded-circle"></span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="indicator indicator-bordered indicator-top-right indicator-warning rounded-circle"></span>
    Account
  </a>

Example #13

Result
HTML

26 Account 26 Account 26 Account 26 Account


  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="badge-outside badge-sm badge-top-right badge-danger rounded-circle">26</span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="badge-outside badge-sm badge-top-right badge-secondary rounded-circle">26</span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="badge-outside badge-sm badge-top-right badge-primary-darker rounded-circle">26</span>
    Account
  </a>
  <a class="btn btn-outline-primary position-relative" href="#">
    <span class="badge-outside badge-sm badge-top-right badge-warning rounded-circle">26</span>
    Account
  </a>

Example #14

Result
HTML

Notifications Notifications Notifications Notifications


  <span class="d-inline-block position-relative pr-3">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-right indicator-secondary rounded-circle"></span>
    Notifications
  </span>
  <span class="d-inline-block position-relative pr-3">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-right indicator-primary-darker rounded-circle"></span>
    Notifications
  </span>
  <span class="d-inline-block position-relative pr-3">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-right indicator-danger rounded-circle"></span>
    Notifications
  </span>
  <span class="d-inline-block position-relative pr-3">
    <span class="indicator indicator-lg indicator-bordered-reverse indicator-top-right indicator-warning rounded-circle"></span>
    Notifications
  </span>

Example #15

Result
HTML

Notifications Notifications Notifications Notifications


  <span class="d-inline-block position-relative pr-3" href="#">
    <span class="indicator indicator-bordered indicator-top-right indicator-secondary rounded-circle"></span>
    Notifications
  </span>
  <span class="d-inline-block position-relative pr-3" href="#">
    <span class="indicator indicator-bordered indicator-top-right indicator-primary-darker rounded-circle"></span>
    Notifications
  </span>
  <span class="d-inline-block position-relative pr-3" href="#">
    <span class="indicator indicator-bordered indicator-top-right indicator-danger rounded-circle"></span>
    Notifications
  </span>
  <span class="d-inline-block position-relative pr-3" href="#">
    <span class="indicator indicator-bordered indicator-top-right indicator-warning rounded-circle"></span>
    Notifications
  </span>

Example #16

Result
HTML

Notifications 26 Notifications 26 Notifications 26


  <span class="position-relative">
    Notifications
    <span class="badge badge-sm badge-danger rounded-circle ml-2">26</span>
  </span>
  <span class="position-relative">
    Notifications
    <span class="badge badge-sm badge-secondary rounded-circle ml-2">26</span>
  </span>
  <span class="position-relative">
    Notifications
    <span class="badge badge-sm badge-primary-darker rounded-circle ml-2">26</span>
  </span>

Example #17

Result
HTML

Notifications 2,264 Notifications 2,264 Notifications 2,264


  <span class="position-relative">
    Notifications
    <span class="badge badge-pill badge-primary ml-2">2,264</span>
  </span>
  <span class="position-relative">
    Notifications
    <span class="badge badge-pill badge-secondary ml-2">2,264</span>
  </span>
  <span class="position-relative">
    Notifications
    <span class="badge badge-pill badge-danger ml-2">2,264</span>
  </span>