# Badge

Source: https://iriscss.com/documentation/components/badge/

A small pill for counts and labels. Its size follows the text around it.

```html
<h3>Inbox <span class="badge">12</span></h3>
<p>Status: <span class="badge success">Paid</span></p>
<button>Messages <span class="badge danger">3</span></button>
```

## Colors

Badges are secondary by default. A [color class](https://iriscss.com/documentation/modifiers/colors/index.html.md) changes the color.

```html
<p>
  <span class="badge primary">Primary</span>
  <span class="badge secondary">Secondary</span>
  <span class="badge contrast">Contrast</span>
  <span class="badge accent">Accent</span>
  <span class="badge info">Info</span>
  <span class="badge success">Success</span>
  <span class="badge warning">Warning</span>
  <span class="badge danger">Danger</span>
  <span class="badge link">Link</span>
</p>
```

## Outlined

```html
<p>
  <span class="badge primary outlined">Primary</span>
  <span class="badge info outlined">Info</span>
  <span class="badge danger outlined">Danger</span>
</p>
```

## As a link

```html
<p><a href="#" class="badge info">css</a> <a href="#" class="badge info">html</a></p>
```

## Variables

| Variable | Default | Note |
| --- | --- | --- |
| `--i-badge-font-size` | `0.75em` | Relative to the surrounding text, so a badge fits headings and buttons |
| `--i-badge-padding-block` | `0.125em` |  |
| `--i-badge-trimmed-padding-block` | `0.4em` | Used where text-box trims the line to the cap height, for the same height |
| `--i-badge-padding-inline` | `0.5em` |  |