COMPONENTS

Badges

Passive status labels, counts and categories. One badge class identifies the component; theme, accent, size, shape, density, depth, borders and material follow the parent. No attributes are required on individual badges.

Usage

Markup: .badge

Behaviour: Passive labels; no automatic announcements or interaction.

Use a span for a plain label. A badge has no automatic alert/status role, focusability or live announcement. For changing information, choose a live region on its meaningful containing element only when announcements are needed.
Write the status in visible text. Colour alone must not carry its meaning. Counts need context, for example “3 unread messages.” Use native links and buttons for actions; a badge itself is a passive label.
data-variant (primary, success, warning, danger, neutral) and data-appearance (tinted, solid, outline) configure badges on html, any parent, or an optional local exception. Unsupported values keep the nearest valid parent setting. data-fill retains its existing gradient/solid meaning; decorative data-edge does not apply to badges.

Component API and styling module · Inherited appearance settings

One class, no attributes

The default badge is tinted and uses the inherited accent. Use ordinary text around a count to explain it.

Product update New

Unread messages 3

<p>Product update <span class="badge">New</span></p>
<p>Unread messages <span class="badge">3</span></p>

Configure a parent once

Both badges inherit the parent. The same settings can be placed on html for the whole site.

Status colours from parents

A status on a parent applies to all badges inside it. Each label states its meaning in text.

New

Approved

Pending

Overdue

Archived

<div class="row">
  <section data-variant="primary">
    <span class="badge">New</span>
  </section>
  <section data-variant="success">
    <span class="badge">Approved</span>
  </section>
  <section data-variant="warning">
    <span class="badge">Pending</span>
  </section>
  <section data-variant="danger">
    <span class="badge">Overdue</span>
  </section>
  <section data-variant="neutral">
    <span class="badge">Archived</span>
  </section>
</div>

Tinted, solid and outline

Appearance is separate from status and from the shared gradient setting.

Tinted

Solid

Outline

<div class="row" data-variant="success">
  <section data-appearance="tinted">
    <span class="badge">Tinted</span>
  </section>
  <section data-appearance="solid">
    <span class="badge">Solid</span>
  </section>
  <section data-appearance="outline">
    <span class="badge">Outline</span>
  </section>
</div>

Shared size and shape

Size and shape are inherited. Labels can wrap instead of widening a narrow page.

Small

Medium

Large

Square

<div class="row" data-shape="pill">
  <section data-size="small">
    <span class="badge">Small</span>
  </section>
  <section data-size="medium">
    <span class="badge">Medium</span>
  </section>
  <section data-size="large">
    <span class="badge">Large</span>
  </section>
</div>
<p data-shape="square">
    <span class="badge">Square</span></p>

Optional local exceptions

The parent remains the default. Override only the label or subtree that needs to differ; plain buttons keep their existing API.

Approved

Pending review

Paid

<section data-variant="success" data-appearance="solid">
  <p>
    <span class="badge">Approved</span></p>
  <p><span class="badge" data-variant="warning">Pending review</span></p>
  <section data-appearance="outline">
    <p>
    <span class="badge">Paid</span></p>
  </section>
</section>

Inherited glass with a solid exception

Load the optional glass stylesheet. Badges inherit material; solid stops it locally. Unsupported blur falls back to the normal opaque badge.

Glass label

Solid exception

<section data-material="glass" data-theme="dark"
         data-shape="pill" data-variant="primary">
  <p>
    <span class="badge">Glass label</span></p>
  <section data-material="solid">
    <p>
    <span class="badge">Solid exception</span></p>
  </section>
</section>

A count inside a sized action

The badge remains relative to the action text while preserving shared size and an optional local badge override. The button label supplies count context.

<div class="row" data-size="large">
  <button type="button">Messages <span class="badge" data-variant="neutral">3 unread</span></button>
</div>