Badge – Tsunami

Variants

The default is neutral. Use outline for labels that are not a status, such as a customer type.

Draft Wholesale Processing Paid Pending Refunded

<div class="stack" data-direction="row" data-gap="sm">
  <span class="badge">Draft</span>
  <span class="badge" data-variant="outline">Wholesale</span>
  <span class="badge" data-variant="info">Processing</span>
  <span class="badge" data-variant="ok">Paid</span>
  <span class="badge" data-variant="warning">Pending</span>
  <span class="badge" data-variant="danger">Refunded</span>
</div>

Sizes: default and lg

Fulfilled Fulfilled

<div class="stack" data-direction="row" data-gap="sm">
  <span class="badge" data-variant="ok">Fulfilled</span>
  <span class="badge" data-variant="ok" data-size="lg">Fulfilled</span>
</div>

With an icon

The icon sits before the text and uses the same colour.

Unfulfilled Fulfilled On hold Cancelled Wholesale

<div class="stack" data-direction="row" data-gap="sm">
  <span class="badge" data-variant="warning"><i class="icon icon-triangle-alert" aria-hidden="true"></i>Unfulfilled</span>
  <span class="badge" data-variant="ok"><i class="icon icon-truck" aria-hidden="true"></i>Fulfilled</span>
  <span class="badge" data-variant="info"><i class="icon icon-clock" aria-hidden="true"></i>On hold</span>
  <span class="badge" data-variant="danger"><i class="icon icon-circle-x" aria-hidden="true"></i>Cancelled</span>
  <span class="badge" data-variant="outline"><i class="icon icon-tag" aria-hidden="true"></i>Wholesale</span>
</div>

Large with an icon, as a fulfillment card heading

A data-size="lg" badge replaces the heading of a card grouped by status.

Magic Sheets bed sheet, Blue / Twin × 2

Fulfilled

Magic Sheets bed sheet, Blue / King × 1

<div class="stack">
  <div class="card">
    <header class="page-header">
      <div>
        <span class="badge" data-variant="warning" data-size="lg"><i class="icon icon-triangle-alert" aria-hidden="true"></i>Unfulfilled</span>
      </div>
      <div>
        <button type="button" class="btn" data-size="sm">More actions</button>
      </div>
    </header>
    <section>
      <p>Magic Sheets bed sheet, Blue / Twin × 2</p>
    </section>
  </div>
  <div class="card">
    <header>
      <span class="badge" data-variant="ok" data-size="lg"><i class="icon icon-truck" aria-hidden="true"></i>Fulfilled</span>
    </header>
    <section>
      <p>Magic Sheets bed sheet, Blue / King × 1</p>
    </section>
  </div>
</div>

Beside a page title, inside the h1

Put the badge inside the <h1>, after the title. The badge keeps its own font size.

<header class="page-header">
  <div>
    <h1>Order #110963<span class="badge" data-variant="warning">Open</span><span class="badge">Partially fulfilled</span><span class="badge" data-variant="info">Paid</span></h1>
  </div>
</header>

Removable

Add a <button> at the end of the badge, with an aria-label. The page removes the badge on click (this example uses a short inline script).

Gift card: Yes Category: Furniture

<div class="stack" data-direction="row" data-gap="sm" id="badge-filters">
  <span class="badge">Gift card: Yes<button type="button" aria-label="Remove filter Gift card"><i class="icon icon-x" aria-hidden="true"></i></button></span>
  <span class="badge" data-variant="outline">Category: Furniture<button type="button" aria-label="Remove filter Category"><i class="icon icon-x" aria-hidden="true"></i></button></span>
</div>
<script>
  document.getElementById("badge-filters").addEventListener("click", (e) => {
    e.target.closest(".badge > button")?.parentElement.remove();
  });
</script>

Attributes

Attribute / element	Values	Description
`.badge`		Inline label, 20px tall, 12px text, neutral fill.
`data-variant`	`outline`, `ok`, `warning`, `info`, `danger` (omit for neutral)	`outline` has a 1px border and no fill, for labels that are not a status. The rest are status colours.
`data-size`	`lg` (omit for the default 20px)	`lg` is 28px tall with 14px text. Use it as a card heading.
`> .icon`		Icon before the text, sized to the text.
`> button`		Remove button at the end of the badge. Set `type="button"` and an `aria-label`, with an `.icon-x` inside. The page removes the badge.
`h1 > .badge, h2 > .badge, h3 > .badge`		In a heading, the badge sits 8px from the title and is centred on the line.