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.

Tone and emphasis

Every badge tone — the semantic ones, .badge--brand among them, and the three categorical hues — comes soft, .badge--solid or .badge--ghost, an outline.

NeutralNeutralNeutral

TerminalTerminalTerminal

ActiveActiveActive

PendingPendingPending

FailedFailedFailed

DraftDraftDraft

PrivatePrivatePrivate

RetailRetailRetail

WholesaleWholesaleWholesale

PartnerPartnerPartner

<div class="sedna-col sedna-gap-1">
    <div class="sedna-row-wrap"><span class="badge">Neutral</span><span class="badge badge--solid">Neutral</span><span class="badge badge--ghost">Neutral</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--brand">Terminal</span><span class="badge badge--brand badge--solid">Terminal</span><span class="badge badge--brand badge--ghost">Terminal</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--go">Active</span><span class="badge badge--go badge--solid">Active</span><span class="badge badge--go badge--ghost">Active</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--warn">Pending</span><span class="badge badge--warn badge--solid">Pending</span><span class="badge badge--warn badge--ghost">Pending</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--danger">Failed</span><span class="badge badge--danger badge--solid">Failed</span><span class="badge badge--danger badge--ghost">Failed</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--info">Draft</span><span class="badge badge--info badge--solid">Draft</span><span class="badge badge--info badge--ghost">Draft</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--secret">Private</span><span class="badge badge--secret badge--solid">Private</span><span class="badge badge--secret badge--ghost">Private</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--cyan">Retail</span><span class="badge badge--cyan badge--solid">Retail</span><span class="badge badge--cyan badge--ghost">Retail</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--orange">Wholesale</span><span class="badge badge--orange badge--solid">Wholesale</span><span class="badge badge--orange badge--ghost">Wholesale</span></div>
    <div class="sedna-row-wrap"><span class="badge badge--teal">Partner</span><span class="badge badge--teal badge--solid">Partner</span><span class="badge badge--teal badge--ghost">Partner</span></div>
</div>

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 — .badge--lg is 12px text, 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="sedna-col sedna-gap-2">
    <div class="sedna-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="sedna-row sedna-baseline">
        <span><span>In a line of text a</span> <span class="badge badge--sm badge--go">badge--sm</span> does not push the line taller,</span>
    </div>
    <div class="sedna-row sedna-baseline">
        <span class="text-lg"><span>Beside a heading a</span> <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>

Severity — an ordered scale

For a scale whose steps rank: an incident priority P1–P5, a CVSS band, a triage tier. The label has to say the rank — “P2”, “High”, “3 of 5” — because a bare coloured pill is a colour, not a position; Progress takes the same ramp through .progress-bar--sev-N.

P1 · Critical P2 · High P3 · Moderate P4 · Low P5 · Planning

<span class="badge badge--sev-1">P1 · Critical</span>
<span class="badge badge--sev-2">P2 · High</span>
<span class="badge badge--sev-3">P3 · Moderate</span>
<span class="badge badge--sev-4">P4 · Low</span>
<span class="badge badge--sev-5">P5 · Planning</span>

With an icon

Sent 12 min Breached

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