LayoutUI
Theme Presets
Browse Components

Badges

Readable status labels.

Basic

Short labels describe status without acting like buttons.

PublishedDraft
View Code
HTML
<div class="cluster">
  <span class="badge">
    Published
  </span>
  <span class="badge badge-neutral">
    Draft
  </span>
</div>

Visual emphasis

Default follows your palette. Neutral is quiet, outline is minimal, and solid adds emphasis. These are visual treatments, not fixed status meanings.

In progressDraftArchivedFeatured
View Code
HTML
<div class="cluster">
  <span class="badge">
    In progress
  </span>
  <span class="badge badge-neutral">
    Draft
  </span>
  <span class="badge badge-outline">
    Archived
  </span>
  <span class="badge badge-solid">
    Featured
  </span>
</div>

Shape

Pills are the default. Use badge-rounded for a compact rectangular treatment; keep shapes consistent for the same kind of label.

Default pillRounded rectangle
View Code
HTML
<div class="cluster">
  <span class="badge">
    Default pill
  </span>
  <span class="badge badge-rounded">
    Rounded rectangle
  </span>
</div>

With an icon

Use a decorative icon alongside visible text. It inherits the badge color and size; no icon runtime is needed.

Verified
View Code
HTML
<span class="badge">
  <svg
    aria-hidden="true"
    focusable="false"
    xmlns="http://www.w3.org/2000/svg"
    viewbox="0 0 24 24"
    fill="none"
    stroke="currentColor"
    stroke-width="1.75"
    stroke-linecap="round"
    stroke-linejoin="round"
  >
    <path d="M12 3q4 3 8 3v6q0 6-8 9-8-3-8-9V6q4 0 8-3ZM8 12l3 3 5-6">
    </path>
  </svg>
  Verified
</span>

Counts

Keep a visible label beside a count. Format capped counts in your application; CSS does not calculate 99+.

Unread messages 8Open tasks 99+
View Code
HTML
<div class="cluster">
  <span>
    Unread messages
    <span class="badge badge-count">
      8
    </span>
  </span>
  <span>
    Open tasks
    <span class="badge badge-neutral badge-count">
      99+
    </span>
  </span>
</div>

Long labels

Prefer short text. Longer labels wrap with a compact corner radius, keeping text clear of the rounded edges.

Waiting for editorial approval
View Code
HTML
<div style="max-inline-size:10rem">
  <span class="badge">
    Waiting for editorial approval
  </span>
</div>

Status updates

For meaningful changes, update the text inside this existing polite status region. Static badges need no live region. No automatic or entrance animation is applied.

Publication: Saved

View Code
HTML
<p role="status">
  Publication:
  <span class="badge">
    Saved
  </span>
</p>

Right-to-left

Native inline layout follows the reading direction. Translate labels yourself.

מאומתטיוטה
View Code
HTML
<div class="cluster" dir="rtl" lang="he">
  <span class="badge">
    <svg
      aria-hidden="true"
      focusable="false"
      xmlns="http://www.w3.org/2000/svg"
      viewbox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="1.75"
      stroke-linecap="round"
      stroke-linejoin="round"
    >
      <path d="M12 3q4 3 8 3v6q0 6-8 9-8-3-8-9V6q4 0 8-3ZM8 12l3 3 5-6">
      </path>
    </svg>
    מאומת
  </span>
  <span class="badge badge-neutral">
    טיוטה
  </span>
</div>

Installation

Download these files into the matching paths in your project, or use Create to assemble a kit. Include each dependency once. Do not also load app.css.

base.cssbadge.css
Add to your page
<link rel="stylesheet" href="/library/assets/base.css">
<link rel="stylesheet" href="/library/assets/badge.css">

8,908 bytes CSS including base · 0 bytes runtime JavaScript

Usage

Label a status

Use .badge on a span for short text such as Published or Draft. Include words or context so color is never the only clue.

Adjust the appearance

Choose .badge-neutral, .badge-outline, or .badge-solid. Pills are the default; use .badge-rounded for a rectangular shape.

Keep it informational

Badges are not buttons or dismissible chips. Use .badge-count for numbers and announce only meaningful status changes.

Building with AI? The AI Manifest has these notes and the full contract. See the AI Guide.