Concorde UI component — Badge. Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge> Doc ID: core/components/ui/badge/badge. Keywords: Concorde, supersoniks, core/components/ui/badge/badge, badge, Badge, UI component, sonic-badge, web component. URL: https://concorde.supersoniks.org/crawl/core/components/ui/badge/badge.html.

Badge

Type

<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>
  <sonic-badge type="contrast">Contrast</sonic-badge>

Outline

<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>
    <sonic-badge variant="outline" type="contrast">Contrast</sonic-badge>
  </div>

Ghost

<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>
    <sonic-badge variant="ghost" type="contrast">Contrast</sonic-badge>
  </div>

Size

<sonic-badge size="2xs">2Xs badge</sonic-badge>
  <sonic-badge size="xs">Xs badge</sonic-badge>
  <sonic-badge size="sm">Sm badge</sonic-badge>
  <sonic-badge>Md badge</sonic-badge>
  <sonic-badge size="lg">Lg badge</sonic-badge>
  <sonic-badge size="xl">Xl badge</sonic-badge>
  <sonic-badge size="2xl">2Xl badge</sonic-badge>

Empty badges

<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

<div class="grid grid-cols-3 gap-4" >
        <sonic-badge ellipsis size="sm" variant="outline"  >
        <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
        <sonic-badge ellipsis size="sm" > <sonic-icon slot="prefix" name="info-empty" library="iconoir"></sonic-icon> Lorem ipsum dolor sit consectetur adipiscing elit. Lorem ipsum dolor sit consectetur adipiscing elit.</sonic-badge>
    </div>

Badge in button

<div class="flex flex-wrap gap-4 items-center">
    <sonic-button type="default">
      Messages <sonic-badge slot="suffix" type="danger" size="xs">5</sonic-badge>
    </sonic-button>
    <div class="relative inline-block">
      <sonic-button type="success" class="relative"> Mon compte </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>