Badges

Badges are used to classify, label, sort or organize items using keywords that describe them.

Badges

Used to classify, label, organize or sort content

Read-Only
Selectable
Dismissible
Status


Label Label
HTML
<span class="badge badge-gray">Label</span>
HTML
<span class="badge badge-gray">
  <i class="fa-regular fa-user-doctor text-black"></i>
  Label
</span>
Label Label
HTML
<span class="badge badge-gray">
  Label
  <i class="fa-solid fa-arrow-up"></i>
</span>
HTML
<span class="badge badge-gray">
  <i class="fa-solid fa-arrow-up"></i>
  Label
</span>
Label
HTML
<span class="badge badge-gray">
  Label
  <i class="fa-solid fa-xmark"></i>
</span>
Label
HTML
<span class="badge badge-gray">
  <i class="fa-solid fa-circle-small text-med-gray"></i>
  Label
</span>




Label Label
HTML
<span class="badge badge-primary">Label</span>
HTML
<span class="badge badge-primary">
  <i class="fa-regular fa-user-doctor"></i>
  Label
</span>
Label Label
HTML
<span class="badge badge-primary">
  Label
  <i class="fa-solid fa-arrow-up"></i>
</span>
HTML
<span class="badge badge-primary">
  <i class="fa-solid fa-arrow-up"></i>
  Label
</span>
Label
HTML
<span class="badge badge-primary">
  Label
  <i class="fa-solid fa-xmark"></i>
</span>
Label
HTML
<span class="badge badge-primary">
  <i class="fa-solid fa-circle-small"></i>
  Label
</span>


Label Label
HTML
<span class="badge badge-red">Label</span>
HTML
<span class="badge badge-red">
  <i class="fa-regular fa-user-doctor"></i>
  Label
</span>
Label Label
HTML
<span class="badge badge-red">
  Label
  <i class="fa-solid fa-arrow-up"></i>
</span>
HTML
<span class="badge badge-red">
  <i class="fa-solid fa-arrow-up"></i>
  Label
</span>
Label
HTML
<span class="badge badge-red">
  Label
  <i class="fa-solid fa-xmark"></i>
</span>
Label
HTML
<span class="badge badge-red">
  <i class="fa-solid fa-circle-small"></i>
  Label
</span>


Label Label
HTML
<span class="badge badge-orange">Label</span>
HTML
<span class="badge badge-orange">
  <i class="fa-regular fa-user-doctor"></i>
  Label
</span>
Label Label
HTML
<span class="badge badge-orange">
  Label
  <i class="fa-solid fa-arrow-up"></i>
</span>
HTML
<span class="badge badge-orange">
  <i class="fa-solid fa-arrow-up"></i>
  Label
</span>
Label
HTML
<span class="badge badge-orange">
  Label
  <i class="fa-solid fa-xmark"></i>
</span>
Label
HTML
<span class="badge badge-orange">
  <i class="fa-solid fa-circle-small"></i>
  Label
</span>


Label Label
HTML
<span class="badge badge-green">Label</span>
HTML
<span class="badge badge-green">
  <i class="fa-regular fa-user-doctor"></i>
  Label
</span>
Label Label
HTML
<span class="badge badge-green">
  Label
  <i class="fa-solid fa-arrow-up"></i>
</span>
HTML
<span class="badge badge-green">
  <i class="fa-solid fa-arrow-up"></i>
  Label
</span>
Label
HTML
<span class="badge badge-green">
  Label
  <i class="fa-solid fa-xmark"></i>
</span>
Label
HTML
<span class="badge badge-green">
  <i class="fa-solid fa-circle-small"></i>
  Label
</span>


Label Label
HTML
<span class="badge badge-blue">Label</span>
HTML
<span class="badge badge-blue">
  <i class="fa-regular fa-user-doctor"></i>
  Label
</span>
Label Label
HTML
<span class="badge badge-blue">
  Label
  <i class="fa-solid fa-arrow-up"></i>
</span>
HTML
<span class="badge badge-blue">
  <i class="fa-solid fa-arrow-up"></i>
  Label
</span>
Label
HTML
<span class="badge badge-blue">
  Label
  <i class="fa-solid fa-xmark"></i>
</span>
Label
HTML
<span class="badge badge-blue">
  <i class="fa-solid fa-circle-small"></i>
  Label
</span>


Label Label
HTML
<span class="badge badge-purple">Label</span>
HTML
<span class="badge badge-purple">
  <i class="fa-regular fa-user-doctor"></i>
  Label
</span>
Label Label
HTML
<span class="badge badge-purple">
  Label
  <i class="fa-solid fa-arrow-up"></i>
</span>
HTML
<span class="badge badge-purple">
  <i class="fa-solid fa-arrow-up"></i>
  Label
</span>
Label
HTML
<span class="badge badge-purple">
  Label
  <i class="fa-solid fa-xmark"></i>
</span>
Label
HTML
<span class="badge badge-purple">
  <i class="fa-solid fa-circle-small"></i>
  Label
</span>