Badge
Small inline status labels. Default style is subtle with a tinted background. Variants include --solid, --outline, and --count. Add a __dot element for a colored status indicator. Accepts role modifiers.
Variants
index.htmlhtml
<span class="ln-badge ln-badge--primary">Subtle</span>
<span class="ln-badge ln-badge--solid ln-badge--primary">Solid</span>
<span class="ln-badge ln-badge--outline ln-badge--primary">Outline</span>SubtleSolidOutline
Roles
index.htmlhtml
<span class="ln-badge ln-badge--success">Success</span>
<span class="ln-badge ln-badge--warning">Warning</span>
<span class="ln-badge ln-badge--danger">Danger</span>
<span class="ln-badge ln-badge--info">Info</span>SuccessWarningDangerInfo
Dotted badges
index.htmlhtml
<span class="ln-badge ln-badge--success"><span class="ln-badge__dot"></span>Online</span>
<span class="ln-badge ln-badge--warning"><span class="ln-badge__dot"></span>Away</span>
<span class="ln-badge ln-badge--danger"><span class="ln-badge__dot"></span>Offline</span>
<span class="ln-badge"><span class="ln-badge__dot"></span>Neutral</span>OnlineAwayOfflineNeutral
Count
index.htmlhtml
<span class="ln-badge ln-badge--count ln-badge--solid ln-badge--danger">42</span>
<span class="ln-badge ln-badge--count ln-badge--primary">8</span>428
Reference
| Class | Description | Responsive |
|---|---|---|
.ln-badge | Inline badge | No |
.ln-badge__dot | Coloured status dot | No |
.ln-badge__icon | Badge icon | No |
.ln-badge--solid | Filled background variant | No |
.ln-badge--outline | Bordered variant | No |
.ln-badge--sm | Small size | No |
.ln-badge--pill | Pill-shaped border radius | No |
.ln-badge--count | Numeric counter variant | No |
.ln-badge--{role} | Role modifier (primary, secondary, success, warning, danger, info) | No |