Badges
Small status indicators and labels.
Badge Variants
Primary
Secondary
Success
Danger
Warning
Info
<span class="ui-badge ui-badge--primary">Primary</span>
<span class="ui-badge ui-badge--secondary">Secondary</span>
<span class="ui-badge ui-badge--success">Success</span>
<span class="ui-badge ui-badge--danger">Danger</span>
<span class="ui-badge ui-badge--warning">Warning</span>
<span class="ui-badge ui-badge--info">Info</span>Outline Badges
Primary
Secondary
Success
Danger
<span class="ui-badge ui-badge--outline-primary">Primary</span>
<span class="ui-badge ui-badge--outline-secondary">Secondary</span>
<span class="ui-badge ui-badge--outline-success">Success</span>
<span class="ui-badge ui-badge--outline-danger">Danger</span>Pill Badges
Use the ui-badge--pill modifier for fully rounded badges.
99+
New
Active
<span class="ui-badge ui-badge--primary ui-badge--pill">99+</span>
<span class="ui-badge ui-badge--danger ui-badge--pill">New</span>
<span class="ui-badge ui-badge--success ui-badge--pill">Active</span>Badges with Buttons
Combine badges with buttons to show counts or status.
<button class="ui-btn ui-btn--primary">
Notifications <span class="ui-badge ui-badge--danger">4</span>
</button>
<button class="ui-btn ui-btn--secondary">
Messages <span class="ui-badge ui-badge--primary">12</span>
</button>CSS Classes Reference
| Class | Description |
|---|---|
.ui-badge |
Base badge class |
.ui-badge--{variant} |
primary, secondary, success, danger, warning, info |
.ui-badge--outline-{variant} |
Outline version of each variant |
.ui-badge--pill |
Fully rounded (pill shape) |