Components / Status Badges & Kickers
Live preview — rendered in this site's theme
Status Badges & Kickers
Published
Draft
Failed
v2.4.1
03 — Components
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 Copy-paste source
<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>