Concorde UI component — 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 Doc ID: core/components/ui/badge/badge. Keywords: Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component, sonic-button, type, variant, size, default, base-100, neutral, base-content, outline. URL: https://concorde.supersoniks.org/core/components/ui/badge.

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.

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

Variant

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

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

Size

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

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

Prefix and suffix slots

Icons or short text before / after the main label.

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

Empty badges

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

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

Ellipsis

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

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

Badge in button

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

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

API reference