> From [PageWeave Design](https://pageweave-design.pageweave.site) — a working library for agentic web development. Full index: [llms.txt](https://pageweave-design.pageweave.site/llms.txt)

# Status Badges & Kickers

Semantic states and section markers

- Category: Components
- Tags: badge status kicker label

## Usage

Two micro-patterns that carry enormous wayfinding weight: semantic badges for state, mono kickers for section identity.

## Rules

- Badges: always `badge-sm`, mono, uppercase, tracked. Solid fill only for true states (live/draft/error); outlines for versions and metadata.
- Status never relies on color alone — the word is in the pill.
- Kicker format: `<span class="text-primary">NN</span> — SECTION NAME`. The number is primary, the dash separates, the label dims.
- Use kickers consistently: every index section, every item detail, every rail heading gets one. Numbering runs per-page, not globally.

## HTML source

```html
<div class="flex flex-wrap items-center gap-3">
  <span class="badge badge-success badge-sm border-0 font-mono text-[0.65rem] uppercase tracking-wider">Published</span>
  <span class="badge badge-warning badge-sm border-0 font-mono text-[0.65rem] uppercase tracking-wider">Draft</span>
  <span class="badge badge-error badge-sm border-0 font-mono text-[0.65rem] uppercase tracking-wider">Failed</span>
  <span class="badge badge-outline badge-sm font-mono text-[0.65rem] uppercase tracking-wider">v2.4.1</span>
  <span class="font-mono text-xs uppercase tracking-[0.18em] text-base-content/50">
    <span class="text-primary">03</span> — Components
  </span>
</div>
```