Badges

tier 2 — classes

.badge is a neutral pill. The semantic modifiers carry the same meaning as the button families; the three categorical hues carry none at all.

Semantic

Use these when the colour means something. They follow the colour-blind toggle.

Neutral Approved Pending Failed Informational Secret

<span class="badge">Neutral</span>
<span class="badge badge-go">Approved</span>
<span class="badge badge-warn">Pending</span>
<span class="badge badge-danger">Failed</span>
<span class="badge badge-info">Informational</span>
<span class="badge badge-secret">Secret</span>

Three sizes

A badge is a label, not a target, so its sizes are a type scale rather than the control heights. It has to sit inside a line of text, a table cell and a card title without setting the line height, which is why .badge-lg is 12px text and not a 36px pill.

badge-sm default badge-lg

In a line of text a badge-sm does not push the line taller,

Beside a heading a badge-lg holds its own.

<div class="dr-col dr-gap-2">
    <div class="dr-row">
        <span class="badge badge-sm">badge-sm</span>
        <span class="badge">default</span>
        <span class="badge badge-lg">badge-lg</span>
    </div>
    <div class="dr-row dr-baseline">
        <span>In a line of text a <span class="badge badge-sm badge-go">badge-sm</span> does not push the line taller,</span>
    </div>
    <div class="dr-row dr-baseline">
        <span class="text-lg">Beside a heading a <span class="badge badge-lg badge-warn">badge-lg</span> holds its own.</span>
    </div>
</div>

Categorical

For distinguishing categories that have no ranking — a type, a queue, a source. Reach for these only after the semantic set, and never to imply good or bad.

<span class="badge badge-cyan">Login</span>
<span class="badge badge-orange">Job</span>
<span class="badge badge-teal">API</span>

With an icon

Sent 12 min Breached

<span class="badge badge-go"><i class="ri-check-line"></i> Sent</span>
<span class="badge badge-warn"><i class="ri-time-line"></i> 12 min</span>
<span class="badge badge-danger"><i class="ri-alert-line"></i> Breached</span>

In a card header and a table cell

The two places badges actually live.

ORD-4209

Pending P3

Action	Outcome	Age
Routing	Applied	4 min
Priority	Rejected	18 min

<div class="card" style="width:100%">
    <div class="card-head">
        <strong>ORD-4209</strong>
        <div class="card-head-right">
            <span class="badge badge-warn">Pending</span>
            <span class="badge">P3</span>
        </div>
    </div>
    <table class="table">
        <thead>
            <tr><th>Action</th><th>Outcome</th><th>Age</th></tr>
        </thead>
        <tbody>
            <tr><td>Routing</td><td><span class="badge badge-go">Applied</span></td><td class="col-muted">4 min</td></tr>
            <tr><td>Priority</td><td><span class="badge badge-danger">Rejected</span></td><td class="col-muted">18 min</td></tr>
        </tbody>
    </table>
</div>