CSS only · 2.0.2

Badge

Inline labels and counters. SCSS-only: the root class is ng-badge, the color a semantic token (ng-badge-success…), with style, size and shape modifiers.

Breaking · v2.0.0 The premium look (gradient · ring · micro-glow) is now the default. The .premium modifier is removed. Opt out of the glow with .no-glow.

Badges share the framework color tokens and the same -outline / -soft modifiers as buttons. No JavaScript — they render instantly.

Variants

Solid (default), -outline, -soft, and the subtle modifier for a lighter weight.

Solid Outline Soft Subtle

badge.html

<span class="ng-badge ng-badge-primary">Solid</span>
<span class="ng-badge ng-badge-primary-outline">Outline</span>
<span class="ng-badge ng-badge-primary-soft">Soft</span>
<span class="ng-badge ng-badge-primary subtle">Subtle</span>

Colors

Every color token has a badge — semantic plus the extended palette.

Primary Secondary Success Info Warning Danger Mute Blue Blue Sky Green Lime Aguagreen Indigo Purple Purple Heart Cyan Magenta Yellow Clight Cdark

badge.html

<span class="ng-badge ng-badge-primary">Primary</span>
<span class="ng-badge ng-badge-secondary">Secondary</span>
<span class="ng-badge ng-badge-success">Success</span>
<span class="ng-badge ng-badge-info">Info</span>
<span class="ng-badge ng-badge-warning">Warning</span>
<span class="ng-badge ng-badge-danger">Danger</span>
<span class="ng-badge ng-badge-mute">Mute</span>
<span class="ng-badge ng-badge-blue">Blue</span>
<span class="ng-badge ng-badge-blue-sky">Blue Sky</span>
<span class="ng-badge ng-badge-green">Green</span>
<span class="ng-badge ng-badge-lime">Lime</span>
<span class="ng-badge ng-badge-aguagreen">Aguagreen</span>
<span class="ng-badge ng-badge-indigo">Indigo</span>
<span class="ng-badge ng-badge-purple">Purple</span>
<span class="ng-badge ng-badge-purple-heart">Purple Heart</span>
<span class="ng-badge ng-badge-cyan">Cyan</span>
<span class="ng-badge ng-badge-magenta">Magenta</span>
<span class="ng-badge ng-badge-yellow">Yellow</span>
<span class="ng-badge ng-badge-clight">Clight</span>
<span class="ng-badge ng-badge-cdark">Cdark</span>

Sizes

Full scale xs · sm · default · md · lg. sm and lg are button-aligned (same height as .ng-btn.sm / .ng-btn). Icon size follows --ng-badge-icon-size.

xs sm default md lg

badge.html

<span class="ng-badge ng-badge-primary xs">xs</span>
<span class="ng-badge ng-badge-primary sm">sm</span>
<span class="ng-badge ng-badge-primary">default</span>
<span class="ng-badge ng-badge-primary md">md</span>
<span class="ng-badge ng-badge-primary lg">lg</span>

Shapes

pill (fully rounded), quad (reduced radius) and circle (counters).

Pill Quad 9

badge.html

<span class="ng-badge ng-badge-primary pill">Pill</span>
<span class="ng-badge ng-badge-primary quad">Quad</span>
<span class="ng-badge ng-badge-danger circle">9</span>

Lighting (LED)

The ng-badge-lighting modifier adds a pulsing LED dot (via ::before, colour from currentColor). Tunable with --ng-badge-led-{size,color,gap,glow,glow-size}.

Online Away Offline

badge.html

<span class="ng-badge ng-badge-success-soft ng-badge-lighting">Online</span>
<span class="ng-badge ng-badge-warning-soft ng-badge-lighting">Away</span>
<span class="ng-badge ng-badge-danger-soft ng-badge-lighting">Offline</span>

Anatomy

ng-badge ng-badge-{color} ng-badge-{color}-outline ng-badge-{color}-soft

Modifiers

xs sm md lg pill quad circle subtle ng-badge-lighting

Reference

Generated from the component source (_ng_badge.scss).

Component info

Name	`Badge`
Type	`css`
Version	`2.0.2`
Status	`css`
CSS	`/assets/css/components/_ng_badge.scss`

Classes

.ng-badge .ng-badge- .ng-badge-lighting .ng-btn

Tokens

--ng-badge-bg --ng-badge-border --ng-badge-border-width --ng-badge-color --ng-badge-font-size --ng-badge-font-weight --ng-badge-gap --ng-badge-icon-size --ng-badge-led-color --ng-badge-led-gap --ng-badge-led-glow --ng-badge-led-glow-size --ng-badge-led-size --ng-badge-padding-x --ng-badge-padding-y --ng-badge-radius