Badge | Brio

Examples

Basic usage

New

<span class="badge">New</span>

Color

Default Neutral Accent Success Warning Danger

<div class="cluster is-tight">
            <span class="badge">Default</span>
            <span class="badge is-neutral">Neutral</span>
            <span class="badge is-accent">Accent</span>
            <span class="badge is-success">Success</span>
            <span class="badge is-warning">Warning</span>
            <span class="badge is-danger">Danger</span>
        </div>

Shape

Pill Square 3 42 128

<div class="cluster is-tight">
            <span class="badge">Pill</span>
            <span class="badge is-square">Square</span>
            <span class="badge is-circle">3</span>
            <span class="badge is-circle">42</span>
            <span class="badge is-circle">128</span>
        </div>

Interactive

Filter: docs ARIA-disabled link

<div class="cluster is-tight">
            <a class="badge" href="#">Filter: docs</a>
            <button class="badge is-accent" type="button">Apply</button>
            <button class="badge is-danger" type="button" disabled>Disabled</button>
            <a class="badge is-neutral" href="#" aria-disabled="true">ARIA-disabled link</a>
        </div>

Grouping with .cluster

Active v0.1.0 Beta Internal

<div class="cluster is-tight">
            <span class="badge is-success">Active</span>
            <span class="badge is-neutral">v0.1.0</span>
            <span class="badge is-warning">Beta</span>
            <span class="badge is-accent">Internal</span>
        </div>

Overlay with .anchor

New

<div class="cluster">
            <div class="anchor">
                <button class="button" type="button">Inbox</button>
                <span class="badge is-danger is-circle anchor-overlay" aria-label="3 unread"
                    >3</span
                >
            </div>
            <div class="anchor">
                <button class="button" type="button">Drafts</button>
                <span class="badge is-accent anchor-overlay">New</span>
            </div>
        </div>

Dismissible with .dismiss

Draft Priority: high Assigned to me

<div class="cluster is-tight">
            <span class="badge is-neutral" data-dismissible>
                Draft
                <button class="dismiss" type="button" aria-label="Remove draft filter">
                    &times;
                </button>
            </span>
            <span class="badge is-neutral" data-dismissible>
                Priority: high
                <button class="dismiss" type="button" aria-label="Remove priority filter">
                    &times;
                </button>
            </span>
            <span class="badge is-neutral" data-dismissible>
                Assigned to me
                <button class="dismiss" type="button" aria-label="Remove assignment filter">
                    &times;
                </button>
            </span>
        </div>

Source comments

Badge -- small label or indicator

Use as <span> for static labels, <a> or <button> for interactive.

Composed patterns:
  Grouping  <div class="cluster is-tight">…</div>
  Overlay   <div class="anchor">
                <button class="button">…</button>
                <span class="badge is-danger anchor-overlay">3</span>
            </div>
  Dismiss   pair with <button class="dismiss" type="button"> when
            dismissible; no dedicated .badge-dismiss.

Reference

Source: src/css/badge.css

Applies to

.badge

Classes

Class	Kind	Description
`.is-neutral`	variant	Neutral color variant with muted text
`.is-accent`	variant	Accent color variant
`.is-danger`	variant	Danger color variant
`.is-success`	variant	Success color variant
`.is-warning`	variant	Warning color variant
`.is-square`	variant	Tag-style square corners instead of pill
`.is-circle`	variant	Circular shape for counts and step indicators. min-inline-size + min-block-size enforce a square at rest; border-radius (full, from base) makes it round. Inline padding lets wider content (double digits, "128") push the width past the minimum, turning the circle into a pill gracefully. No block padding -- the min-block-size handles vertical centering and avoids aspect-ratio conflicts in flex containers.

Slots

Slot	Description
`.dismiss`	Embedded dismiss button with tighter padding

Tokens

Token	Default	Description
`--badge-bg`	`var(--color-primary-subtle)`	Background color for the badge
`--badge-color`	`var(--color-on-primary-subtle)`	Text color for the badge
`--badge-border-color`	`var(--color-primary-border)`	Border color for the badge
`--badge-border-width`	`var(--border-width-default)`	Border width for the badge
`--badge-radius`	`var(--radius-pill)`	Border radius, defaults to pill shape
`--badge-padding-block`	`var(--ui-pad-block-dense)`	Block-axis inner padding for the badge
`--badge-padding-inline`	`var(--ui-pad-inline-compact)`	Inline-axis inner padding for the badge
`--dismiss-padding-block`	`var(--ui-pad-square-tight)`	Block-axis padding override for an embedded dismiss button
`--dismiss-padding-inline`	`var(--ui-pad-square-tight)`	Inline-axis padding override for an embedded dismiss button