# Badge

Badges are **compact, non-interactive** labels for status, counts, or categories. They mirror **`sonic-button`** styling (`type`, `variant`, `size`) without focus rings or click handling—use a button when the control should be actionable.

## Type

`default` — subtle background (`base-100`). `neutral` — dark fill (`base-content`) with light text, useful on light backgrounds.

<sonic-code>
  <template>
    <div class="flex flex-wrap gap-2">
      <sonic-badge>Default</sonic-badge>
      <sonic-badge type="primary">Primary</sonic-badge>
      <sonic-badge type="neutral">Neutral</sonic-badge>
      <sonic-badge type="warning">Warning</sonic-badge>
      <sonic-badge type="info">Info</sonic-badge>
      <sonic-badge type="success">Success</sonic-badge>
      <sonic-badge type="danger">Danger</sonic-badge>
    </div>
  </template>
</sonic-code>

## Variant

Default **`variant`** is filled. **`outline`** — border and text in the `type` color. **`ghost`** — text only, no padding (except in forced-colors mode).

<sonic-code>
  <template>
    <div class="grid gap-3">
      <div class="flex items-center flex-wrap gap-3">
        <sonic-badge variant="outline">Default</sonic-badge>
        <sonic-badge variant="outline" type="primary">Primary</sonic-badge>
        <sonic-badge variant="outline" type="neutral">Neutral</sonic-badge>
        <sonic-badge variant="outline" type="warning">Warning</sonic-badge>
        <sonic-badge variant="outline" type="info">Info</sonic-badge>
        <sonic-badge variant="outline" type="success">Success</sonic-badge>
        <sonic-badge variant="outline" type="danger">Danger</sonic-badge>
      </div>
      <div class="flex items-center flex-wrap gap-3">
        <sonic-badge variant="ghost">Default</sonic-badge>
        <sonic-badge variant="ghost" type="primary">Primary</sonic-badge>
        <sonic-badge variant="ghost" type="neutral">Neutral</sonic-badge>
        <sonic-badge variant="ghost" type="warning">Warning</sonic-badge>
        <sonic-badge variant="ghost" type="info">Info</sonic-badge>
        <sonic-badge variant="ghost" type="success">Success</sonic-badge>
        <sonic-badge variant="ghost" type="danger">Danger</sonic-badge>
      </div>
    </div>
  </template>
</sonic-code>

## Size

Default size is `md` (omit the `size` attribute). Typography and padding follow `sonic-button`.

<sonic-code>
  <template>
    <div class="flex flex-wrap items-center gap-2">
      <sonic-badge size="2xs">2Xs</sonic-badge>
      <sonic-badge size="xs">Xs</sonic-badge>
      <sonic-badge size="sm">Sm</sonic-badge>
      <sonic-badge>Md</sonic-badge>
      <sonic-badge size="lg">Lg</sonic-badge>
      <sonic-badge size="xl">Xl</sonic-badge>
      <sonic-badge size="2xl">2Xl</sonic-badge>
    </div>
  </template>
</sonic-code>

## Prefix and suffix slots

Icons or short text before / after the main label.

<sonic-code>
  <template>
    <sonic-badge type="info" size="sm">
      <sonic-icon slot="prefix" name="airplane" library="iconoir"></sonic-icon>
      Boarding
    </sonic-badge>
    <sonic-badge type="success">
      Landed
      <sonic-icon slot="suffix" name="check" library="iconoir"></sonic-icon>
    </sonic-badge>
  </template>
</sonic-code>

## Empty badges

Badge with no text (visual dot). `min-width` / `min-height` keep a readable shape.

<sonic-code>
  <template>
    <div class="flex items-center flex-wrap gap-3">
      <sonic-badge type="danger" size="2xs"></sonic-badge>
      <sonic-badge type="danger" size="xs"></sonic-badge>
      <sonic-badge type="danger" size="sm"></sonic-badge>
      <sonic-badge type="danger"></sonic-badge>
      <sonic-badge type="danger" size="lg"></sonic-badge>
      <sonic-badge type="danger" size="xl"></sonic-badge>
      <sonic-badge type="danger" size="2xl"></sonic-badge>
    </div>
  </template>
</sonic-code>

## Ellipsis

With `ellipsis`, long labels truncate. The parent must constrain width (`max-width`, grid, etc.).

<sonic-code>
  <template>
    <div class="grid grid-cols-2 gap-4 max-w-xl">
      <sonic-badge ellipsis size="sm" variant="outline">
        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
        CN 001 · CDG → JFK · Gate change: now boarding at gate B12, terminal 2E
      </sonic-badge>
      <sonic-badge ellipsis size="sm">
        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon>
        CN 001 · CDG → JFK · Gate change: now boarding at gate B12, terminal 2E
      </sonic-badge>
    </div>
  </template>
</sonic-code>

## Badge in button

Count inside a button (`slot="suffix"`) or a badge absolutely positioned on a button / icon.

<sonic-code>
  <template>
    <div class="flex flex-wrap gap-4 items-center">
      <sonic-button type="default">
        Departures <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
      </sonic-button>
      <div class="relative inline-block">
        <sonic-button type="success" class="relative">Crew</sonic-button>
        <sonic-badge
          type="danger"
          size="xs"
          class="absolute right-1 top-0 pe-none transform -translate-y-1/2"
          >12</sonic-badge
        >
      </div>
      <div class="relative inline-block">
        <sonic-button type="neutral" shape="circle" variant="outline">
          <sonic-icon library="iconoir" name="user"></sonic-icon>
        </sonic-button>
        <sonic-badge
          type="danger"
          size="xs"
          class="absolute right-1 bottom-1 pe-none transform translate-y-1/2 translate-x-1/2"
          >33</sonic-badge
        >
      </div>
      <div class="relative inline-block">
        <sonic-button type="neutral" shape="circle" variant="outline">
          <sonic-icon library="iconoir" name="user"></sonic-icon>
        </sonic-button>
        <sonic-badge
          type="danger"
          size="xs"
          class="absolute right-2 bottom-2 pe-none transform translate-y-1/2 translate-x-1/2"
        ></sonic-badge>
      </div>
    </div>
  </template>
</sonic-code>

## API reference

| Attribute | Values | Description |
|----------|---------|-------------|
| `type` | `default` (default) · `primary` · `neutral` · `warning` · `info` · `success` · `danger` | Semantic color (`--sc-*` tokens) |
| `variant` | `default` (default) · `outline` · `ghost` | Filled, bordered, or text-only |
| `size` | `2xs` … `2xl` (default `md`) · `inherit` | Typography and padding (aligned with **`sonic-button`**) |
| `ellipsis` | boolean | Single-line truncation; parent must constrain width |

| Slot | Description |
|------|-------------|
| *(default)* | Main label |
| `prefix` | Icon or short text before the label |
| `suffix` | Icon or short text after the label |