Components / Feedback & Status / Badge
Badge stable
Small status pills — dots, colors and a solid variant.
Draft
Live
Needs action
In review
Pro
3 left
<span class="badge"><i></i>Draft</span> <span class="badge teal"><i></i>Live</span> <span class="badge red"><i></i>Needs action</span> <span class="badge amber"><i></i>In review</span> <span class="badge dark">Pro</span> <span class="badge">3 left</span>
.badge{display:inline-flex;align-items:center;gap:6px;height:23px;padding:0 9px;border-radius:99px;font-size:11.5px;font-weight:500;background:var(--k-bg-soft);color:var(--k-ink-2);border:1px solid var(--k-line);font-family:var(--k-font)}
.badge i{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.dark{background:var(--k-ink);color:var(--k-bg);border-color:var(--k-ink)}
.badge.teal{background:var(--k-accent-bg);color:var(--k-accent-ink);border-color:var(--k-accent-line)}
.badge.red{background:var(--k-danger-bg);color:var(--k-danger-ink);border-color:var(--k-danger-line)}
.badge.amber{background:var(--k-amber-bg);color:var(--k-amber-ink);border-color:var(--k-amber-line)}
Usage
Short status words only. Pair the dot variant with a text label; color alone is not a status.
Accessibility
Status is carried by the text, never by color alone.