# Badge · MIAN

A compact label for status, counts and categories.

- Id: `badge` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/badge
- Use for: status label, count badge, tag, new label, category label.
- Avoid: Badges on everything, keep them for status and counts.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Variants

```html
<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

```html
<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

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/badge/source