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 xlink:href="#icon-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 xlink:href="#icon-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 xlink:href="#icon-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
Placeholder Image
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 xlink:href="#icon-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>