Components

Badge

The smallest shape in the library: a count or a short status.

On this page

Styles and colors
Rounded
Inside other components

3 active

<span class="pui-badge pui-solid pui-error">3</span>
<span class="pui-badge pui-soft pui-success">active</span>

Styles and colors

A badge takes the same styles and colors as everything else:

Solid Soft Outline

<span class="pui-badge pui-solid pui-theme">Solid</span>
<span class="pui-badge pui-soft pui-theme">Soft</span>
<span class="pui-badge pui-outline pui-theme">Outline</span>

Rounded

<span class="pui-badge pui-solid pui-error pui-rounded-full">9</span>

Inside other components

<button class="pui-btn pui-outline pui-surface">
  Inbox
  <span class="pui-badge pui-solid pui-theme pui-rounded-full">12</span>
</button>