Skip to Main Content

Pelican Design System icon Pelican Design System Badges

Badges

Badges are labels that inform users about some aspect of the data, such as the count of related items.

Edit on GitHub

On this page:

Best Practices

  • Badges take their size from the parent element.
  • Prefer smaller badges over larger ones to prevent them from being confused with buttons.
  • Keep the text in them short and succint, one or two short words.
  • Use them to display a piece of data’s related quality, such as a number of notifications.
  • Remove the <span> with the icon if you don’t need it.
  • Prefer fewer badges on a page element so they don’t create visual noise.
  • A dim variant of the badge may be used by adding the badge-dim class.
  • Badges are no longer dim by default in the Page Title to allow for flexibility.

Usage

Badge Badge Badge Badge Badge Badge Badge Badge

Badge Badge Badge Badge Badge Badge Badge Badge

Badge Badge Badge Badge Badge Badge Badge Badge

Badge Badge Badge Badge Badge Badge Badge Badge 

<p>
  <span class="badge badge-primary">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-secondary">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-accent">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-success">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-warning">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-danger">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-info">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-ui">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
</p>
<p>
  <span class="badge badge-primary badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-secondary badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-accent badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-success badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-warning badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-danger badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-info badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-ui badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
</p>
<p class="h5 mb-4">
  <span class="badge badge-primary">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-secondary">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-accent">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-success">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-warning">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-danger">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-info">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-ui">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
</p>
<p class="h5 mb-4">
  <span class="badge badge-primary badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-secondary badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-accent badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-success badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-warning badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-danger badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-info badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
  <span class="badge badge-ui badge-dim">
    <span class="icon fas fa-tag me-1" aria-hidden="true"></span>Badge
  </span>
</p>

Resources

Previous
Next
Page top