Badge

Inline pill indicator for counts, statuses, or tags. Defaults to a fully rounded pill; .is-square swaps to the global border radius.

Live

Combinations (pill)

Live

3 primary warning danger success

HTML

<p style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<span class="badge">3</span>
<span class="badge is-primary">primary</span>
<span class="badge is-warning">warning</span>
<span class="badge is-danger">danger</span>
<span class="badge is-success">success</span>
</p>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-badge')
);

Playground

Square modifier

Live

3 NEW BETA

HTML

<p style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<span class="badge is-square">3</span>
<span class="badge is-primary is-square">NEW</span>
<span class="badge is-warning is-square">BETA</span>
</p>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-badge')
);

Playground

Inline with text

Live

Inbox 12 Mentions 3

HTML

<p>
Inbox <span class="badge is-primary">12</span>
&nbsp;Mentions <span class="badge is-danger">3</span>
</p>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-badge')
);

Playground

Light variant on combinations (.is-<combo>.is-light)

Live

primary warning danger success

HTML

<p style="display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center;">
<span class="badge is-primary is-light">primary</span>
<span class="badge is-warning is-light">warning</span>
<span class="badge is-danger is-light">danger</span>
<span class="badge is-success is-light">success</span>
</p>

Minimal sass

@use '@adnap/krysalicss' with (
  $feature-list: ('base-reset', 'base-global', 'element-badge')
);

Playground

Markup

<span class="badge is-primary">12</span>
<span class="badge is-danger is-square">NEW</span>

When to use

Counts (unread items, notifications) and short status tags (NEW, BETA, ALPHA).
Pair with aria-label when the visible content is ambiguous out of context (e.g. a bare number).
For longer status messages or banners use Alert.

Accessibility

The badge is a non-interactive inline indicator, not a control surface.
Its rendered box is well under the WCAG 2.5.8 (24 × 24 px AA) and 2.5.5 (44 × 44 px AAA) touch-target floors by design — height tracks $line-height so it sits flush in body copy.
Do not wrap a badge in <a> or <button>. For an interactive pill, use Button with the badge's visual modifiers, or re-scope $selector to your own interactive component.
When the visible content is ambiguous out of context (e.g. a bare number, NEW), pair the badge with aria-label so screen readers announce the meaning.

Variables

Variable	Default	Notes
`$selector`	`'.badge'`	Class only.
`$square-selector`	`'.is-square'`	Modifier swapping pill for global radius.
`$padding-x`	`$size-extra-small` (0.5rem)	Horizontal padding only: height is line-height-driven.
`$line-height`	`1.25rem`	Drives effective height.
`$font-size`	`0.75rem`	Compact text size for inline use.
`$border-radius`	`999px`	Pill default.
`$square-border-radius`	`$global-border-radius` (5px)	Used by `.is-square`.

See Combinations and light variants for $enable-light, $default-combination, and $controls — cross-cutting plumbing common to every theme-aware component.

Override example

@use '@adnap/krysalicss/element/badge' with (
  $selector: '.tag',
  $font-size: 0.8rem,
  $padding-x: 0.6rem,
);

Tokens consumed

Token	Used for
`--kc-default-bg` / `--kc-default-fg`	Plain `.badge` (shared with `.is-default`).
`--kc-{label}-bg` / `--kc-{label}-fg`	Each combination modifier.
`--kc-{label}-light-bg` / `--kc-{label}-light-fg`	`.is-<combo>.is-light` soft-tint variant. Emitted per theme so the tint tracks the active surface.