Badge

Badges are compact inline labels used to surface counts, statuses, tags, and metadata. They support a full palette of semantic and brand colors in filled, outlined, and plain styles, and can be shaped as pills, animated with pulse or bounce, or pinned to a button corner.

Colors

Filled

All color variants in the default filled style.

Default Primary Secondary Positive Negative Alert Info Sage Indigo Earth Forest Plum Lavender Dusk Light Dark

<span class="wf-badge">Default</span>
<span class="wf-badge wf-badge-primary">Primary</span>
<span class="wf-badge wf-badge-secondary">Secondary</span>
<span class="wf-badge wf-badge-positive">Positive</span>
<span class="wf-badge wf-badge-negative">Negative</span>
<!-- ... -->
<span class="wf-badge wf-badge-light">Light</span>
<span class="wf-badge wf-badge-dark">Dark</span>

Outlined & Plain

Outlined wf-badge-outlined

Applies a colored border and an inverted tint background.

Default Primary Secondary Positive Negative Alert Info Sage Indigo Earth Plum Dusk Dark

<span class="wf-badge wf-badge-primary wf-badge-outlined">Primary</span>
<span class="wf-badge wf-badge-positive wf-badge-outlined">Positive</span>
<span class="wf-badge wf-badge-negative wf-badge-outlined">Negative</span>

Plain wf-badge-plain

No background or border - text only in the token color.

Primary Secondary Positive Negative Alert Info Sage Indigo Earth Plum Dusk Dark

<span class="wf-badge wf-badge-primary wf-badge-plain">Primary</span>
<span class="wf-badge wf-badge-positive wf-badge-plain">Positive</span>
<span class="wf-badge wf-badge-negative wf-badge-plain">Negative</span>

Pill Shape

Fully Rounded

Add wf-badge-pill for fully rounded corners. Works with any color or modifier.

Default Primary Secondary Positive Negative Info Outlined Plain

<span class="wf-badge wf-badge-primary wf-badge-pill">Primary</span>
<span class="wf-badge wf-badge-primary wf-badge-outlined wf-badge-pill">Outlined</span>
<span class="wf-badge wf-badge-positive wf-badge-plain wf-badge-pill">Plain</span>

Sizes

Font Size Scale

Five sizes from xs to lg . The default sits between sm and md .

XS SM Default MD LG

<span class="wf-badge wf-badge-primary wf-badge-xs">XS</span>
<span class="wf-badge wf-badge-primary wf-badge-sm">SM</span>
<span class="wf-badge wf-badge-primary">Default</span>
<span class="wf-badge wf-badge-primary wf-badge-md">MD</span>
<span class="wf-badge wf-badge-primary wf-badge-lg">LG</span>

With Icons

Leading & Trailing Icons

Place an <i class="icon ..."> inside the badge before or after the label. The gap adjusts automatically.

Published Rejected Pending Review Draft Featured Linked

<!-- Leading icon -->
<span class="wf-badge wf-badge-primary">
  <i class="icon check circle" aria-hidden="true"></i>Published
</span>

<!-- Trailing icon -->
<span class="wf-badge wf-badge-secondary">
  Draft<i class="icon pencil" aria-hidden="true"></i>
</span>

Dot Badge

Notification Dot

wf-badge-dot renders a circular dot with no text. Combine with a size modifier to adjust its diameter.

<span class="wf-badge wf-badge-negative wf-badge-dot wf-badge-xs"></span>
<span class="wf-badge wf-badge-negative wf-badge-dot wf-badge-sm"></span>
<span class="wf-badge wf-badge-negative wf-badge-dot"></span>
<span class="wf-badge wf-badge-negative wf-badge-dot wf-badge-md"></span>
<span class="wf-badge wf-badge-negative wf-badge-dot wf-badge-lg"></span>

Animations

Pulse wf-badge-pulse

Repeating glow ring matched to the badge color. Useful for live counts or urgent statuses.

3 Live

<span class="wf-badge wf-badge-negative wf-badge-pulse">3</span>
<span class="wf-badge wf-badge-primary wf-badge-pill wf-badge-pulse">Live</span>
<span class="wf-badge wf-badge-alert wf-badge-dot wf-badge-pulse"></span>

Bounce wf-badge-bounce

Repeating vertical bounce. Draws the eye to new activity or notifications.

New 12

<span class="wf-badge wf-badge-primary wf-badge-bounce">New</span>
<span class="wf-badge wf-badge-negative wf-badge-pill wf-badge-bounce">12</span>
<span class="wf-badge wf-badge-positive wf-badge-dot wf-badge-md wf-badge-bounce"></span>

Multi Badge

Multi-Badge Content

Multi badges can be created with the wf-badge . Use the wf-badge-pill modifier to round the corners. Arrows are optional.

New Wojo Framework 4.0 is out! See what’s new Wojo Framework 4.0 is out! See what’s new New

<span class="wf-badge wf-badge-primary wf-badge-text">
  Scheduled for Q3 release cycle
</span>

Attached Badge

Corner Notification

Add wf-badge-attached to position the badge absolutely in the top-right corner of its parent. The parent must have position: relative .

<button class="wf-btn wf-btn-secondary">
    Inbox <span class="wf-badge wf-badge-primary wf-badge-attached">4</span>
</button>
<button class="wf-btn wf-btn-secondary">
    Alerts <span class="wf-badge wf-badge-negative wf-badge-pill wf-badge-attached wf-badge-pulse">9</span>
</button>
<button class="wf-btn wf-btn-secondary">
    Updates <span class="wf-badge wf-badge-positive wf-badge-dot wf-badge-attached wf-badge-bounce"></span>
</button>

Class Reference

All modifier classes available on .wf-badge

Class Name	Type	Description
wf-badge	Base	Inline-flex badge with the default surface background and border radius.
wf-badge-*	Color	Filled color variant: primary · secondary · positive · negative · alert · info · sage · indigo · earth · forest · plum · lavender · dusk · light · dark · transparent .
wf-badge-outlined	Modifier	Adds a colored border and reduces the background to an inverted tint.
wf-badge-plain	Modifier	Removes background and border; renders text only in the token color.
wf-badge-pill	Shape	Fully rounded corners ( border-radius: 999rem ).
wf-badge-text	Shape	Allows multi-line text content; loosens internal padding.
wf-badge-dot	Dot	Circular dot with no text. Sizes: xs · sm , default, md · lg .
wf-badge-xs / -sm / -md / -lg	Size	Font size scale: xs (0.5rem) → sm → default (0.75rem) → md → lg (1rem).
wf-badge-*	Animation	Repeating glow pulse pulse and vertical bounce matched to the badge color.
wf-badge-attached	Position	Absolute top-right corner. Requires position: relative on the parent element.