Badges & Chips

Badges

Formerly known as pills. Used to indicate status. Not meant to be interactive. Can be combined with an icon. You can also combine them with background color utility classes.

Default

Red

Yellow

Green

Teal

Black

Label

HTML

<span class="fizz-badge">Default</span>
<span class="fizz-badge fizz-surface-red">Red</span>
<span class="fizz-badge fizz-surface-yellow">Yellow</span>
<span class="fizz-badge fizz-surface-green">Green</span>
<span class="fizz-badge fizz-surface-teal">Teal</span>
<span class="fizz-badge fizz-surface-inverse">Black</span>
<span class="fizz-badge fizz-surface-yellow fizz-flex-row-inline"><svg
       class="fizz-icon-16  fizz-inline-4 fizz-icon-warning"
       role="img"
       aria-hidden="true"
       width="24"
       height="24">
    <use href="#warning"></use>
  </svg>Label</span>

Small Badges

Formerly the default badge style. You can combine them with background color utility classes.

Default

Black

HTML

<span class="fizz-badge-small">Craft</span>
<span class="fizz-badge-small fizz-surface-inverse">Craft</span>

Icon Badge

Deal

HTML

<div class="fizz-badge-icon">
  <svg class="fizz-icon-24" role="img" aria-hidden="true" width="24" height="24">
      <use href="#deal"></use>
    </svg>
  <span>Deal</span>
</div>

Vertical Icon Badge

Deal

HTML

<div class="fizz-badge-icon-vertical">
  <svg class="fizz-icon-24" role="img" aria-hidden="true" width="24" height="24">
      <use href="#deal"></use>
    </svg>
  <span>Deal</span>
</div>

.fizz-badge-icon-overlay is absolutely positioned to the top/left of its parent container, so the parent needs to include .fizz-position-relative.

Deal

HTML

<div class="fizz-position-relative">
  <div class="fizz-badge-icon-overlay">
    <svg class="fizz-icon-24" role="img" aria-hidden="true" width="24" height="24">
      <use href="#deal"></use>
    </svg>
    <span>Deal</span>
  </div>
  <img src="https://www.fillmurray.com/400/300"
       width="400"
       height="300"
       alt="Placeholder Image">
</div>

Chips

Chips are similar to badges but meant to be interacted with. They can optionally include an icon. You can combine them with background color utility classes.

HTML

<button class="fizz-chip">
  <span>Label</span>
  <svg class="fizz-icon-16"
       xmlns="http://www.w3.org/2000/svg"
       viewBox="0 0 16 16">
    <path
          d="m12.667 4.273-.94-.94L8 7.06 4.273 3.333l-.94.94L7.06 8l-3.727 3.727.94.94L8 8.94l3.727 3.727.94-.94L8.94 8l3.727-3.727Z" />
  </svg>
</button>

<button class="fizz-chip fizz-surface-inverse"><span>Label</span></button>