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.
  • 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.

Usage

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-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">
    <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-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>

Resources

Previous
Next
Page top