Badge

Inline badges, status dots, and tags.

Variants

Small status labels for counts, categories, and tags.

Primary Secondary Success Warning Danger Info Dark

<span class="na-badge na-badge-primary">Primary</span>
<span class="na-badge na-badge-danger">Danger</span>

Solid variants

Primary Success Warning Danger Info

<span class="na-badge na-badge-solid-primary">Primary</span>

Sizes

xs s m l xl 2xl

<span class="na-badge na-badge-primary na-badge-xs">xs</span>
<span class="na-badge na-badge-primary na-badge-l">l</span>

Dot indicator

Active Pending Processing

<span class="na-badge na-badge-success">
  <span class="na-badge-dot na-badge-dot-success"></span>
  Active
</span>

User status

Online Away Busy Offline

Online (pulse)

<span class="na-status na-status-online">Online</span>
<span class="na-status na-status-away">Away</span>
<span class="na-status na-status-busy">Busy</span>
<span class="na-status na-status-offline">Offline</span>
<span class="na-status na-status-online na-status-pulse">Live</span>

Class reference

Class	Description
`na-badge`	Base badge
`na-badge-primary / secondary / success / warning / danger / info / dark`	Light-tint colour variants
`na-badge-solid-*`	Filled solid variants
`na-badge-xs / s / m / l / xl / 2xl / 3xl`	Size scale
`na-badge-square`	Removes rounded shape
`na-badge-dot`	Inline dot prefix
`na-badge-dot-success / warning / info`	Dot colour
`na-status`	Status pill (for users)
`na-status-online / away / busy / offline`	Status variants
`na-status-pulse`	Animated pulse ring