# Badge

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/badge

The badge is a small label for statuses, categories, and "new" markers. It is a [CSS-only component](/docs/start#components): there is no Astro file because a `<span>` with the `.badge` class is already the whole API.

<p>
  <span class="badge">default</span>&ensp;
  <span class="badge badge-primary">primary</span>&ensp;
  <span class="badge badge-success">success</span>&ensp;
  <span class="badge badge-danger">danger</span>&ensp;
  <span class="badge badge-warning">warning</span>
</p>

<div class="docs_oversizedTable">

| File                               | Description                    | Source      |
| ---------------------------------- | ------------------------------ | ----------- |
| `component.badge.css`              | All badge styles               | [Github][1] |
| `--badge-*` block in `settings.ui.css` | Interface tokens (see table below) | [Github][2] |

</div>

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.badge.css
[2]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/settings.ui.css

## Playground

<Playground
  client:visible
  template={'<span class="{classes}">{label}</span>'}
  baseClasses="badge"
  controls={[
    { heading: "Variation", items: [
      { type: "select", name: "color", label: "Color", default: "", options: [
        { label: "Default", value: "" },
        { label: "Primary", value: "badge-primary" },
        { label: "Success", value: "badge-success" },
        { label: "Danger", value: "badge-danger" },
        { label: "Warning", value: "badge-warning" },
      ]},
    ]},
    { heading: "Content", items: [
      { type: "text", name: "label", label: "Label", default: "new" },
    ]},
  ]}
/>

## HTML

```html
<span class="badge">default</span>
<span class="badge badge-success">shipped</span>
```

### Available modifiers

<div class="docs_oversizedTable">

| Class                        | Description                       |
| ---------------------------- | --------------------------------- |
| `.badge`                     | Default style. Neutral colors.    |
| `.badge` + `.badge-primary`  | Primary colors.                   |
| `.badge` + `.badge-success`  | Positive feedback. Greens.        |
| `.badge` + `.badge-danger`   | Negative feedback. Reds.          |
| `.badge` + `.badge-warning`  | Warning. Oranges.                 |

</div>

One-off colors work like every other variant in mCSS: override the local custom property.

```html
<span class="badge" style="--badge-background-color: rebeccapurple">custom</span>
```

### Custom properties

The following custom properties are available in [`settings.ui.css`](/docs/tokens#interface-tokens):

<div class="docs_oversizedTable">

| Property                             | Description                    |
| ------------------------------------ | ------------------------------ |
| `--badge-font-size`                  | Font size.                     |
| `--badge-border-radius`              | Border radius.                 |
| `--badge-color`                      | Default text color.            |
| `--badge-background-color`           | Default background color.      |
| `--badge-primary-color`              | Primary variant text color.    |
| `--badge-primary-background-color`   | Primary variant background.    |
| `--badge-success-color`              | Success variant text color.    |
| `--badge-success-background-color`   | Success variant background.    |
| `--badge-danger-color`               | Danger variant text color.     |
| `--badge-danger-background-color`    | Danger variant background.     |
| `--badge-warning-color`              | Warning variant text color.    |
| `--badge-warning-background-color`   | Warning variant background.    |

</div>