CSS only

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.

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

Three sizes via sm / lg (medium is the default).

Small Medium Large

badge.html

<span class="ng-badge ng-badge-primary sm">Small</span>
<span class="ng-badge ng-badge-primary">Medium</span>
<span class="ng-badge ng-badge-primary lg">Large</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>

Anatomy

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

Modifiers

sm lg pill quad circle subtle

Reference

Generated from the component source (_ng_badge.scss).

Component info

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

Classes

.ng-badge .ng-badge-

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-padding-x --ng-badge-padding-y --ng-badge-radius