Badge
A compact label for status, counts and categories.
Variants
Default
Secondary
Soft
Outline
<span class="mn-badge">Default</span>
<span class="mn-badge mn-secondary">Secondary</span>
<span class="mn-badge mn-badge-soft">Soft</span>
<span class="mn-badge mn-badge-outline">Outline</span>Status
Active
Pending
Failed
Queued
Draft
<span class="mn-badge mn-badge-soft mn-success"><span class="mn-dot"></span>Active</span>
<span class="mn-badge mn-badge-soft mn-warning"><span class="mn-dot"></span>Pending</span>
<span class="mn-badge mn-badge-soft mn-danger"><span class="mn-dot"></span>Failed</span>
<span class="mn-badge mn-badge-soft mn-info"><span class="mn-dot"></span>Queued</span>
<span class="mn-badge mn-badge-outline mn-neutral">Draft</span>Counts
99+
<button class="mn-btn mn-btn-outline" aria-label="Inbox, 12 unread"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 13h5l1.5 2h5L16 13h5"/><path d="M5 5h14l2 8v6a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-6Z"/></svg> Inbox <span class="mn-badge mn-badge-sm">12</span></button>
<span class="mn-badge mn-danger mn-badge-lg">99+</span>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/badge.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-badge | Solid badge, primary by default. |
| mn-badge-soft · mn-badge-outline | Variants. |
| mn-badge-sm · mn-badge-lg | Sizes. |
| mn-dot | A status dot inside a badge. |
| mn-* colour roles | Any role. |
Accessibility
- Badges are plain text. If a badge is a count on an icon button, include it in the button's aria-label.