Badge · Panel

Basic Usage

DefaultStroke

<div class="flex flex-wrap gap-2.5">
  <span class="mv-badge">Default</span><span class="mv-badge mv-badge-stroke">Stroke</span>
</div>

Solid

PrimarySecondaryDestructiveWarningSuccessInfoMono

<div class="flex flex-wrap gap-2.5">
  <span class="mv-badge mv-badge-primary">Primary</span><span class="mv-badge mv-badge-secondary">Secondary</span><span class="mv-badge mv-badge-destructive">Destructive</span><span class="mv-badge mv-badge-warning">Warning</span><span class="mv-badge mv-badge-success">Success</span><span class="mv-badge mv-badge-info">Info</span><span class="mv-badge mv-badge-mono">Mono</span>
</div>

Outline

PrimarySecondaryDestructiveWarningSuccessInfoMono

<div class="flex flex-wrap gap-2.5">
  <span class="mv-badge mv-badge-outline mv-badge-primary">Primary</span><span class="mv-badge mv-badge-outline mv-badge-secondary">Secondary</span><span class="mv-badge mv-badge-outline mv-badge-destructive">Destructive</span><span class="mv-badge mv-badge-outline mv-badge-warning">Warning</span><span class="mv-badge mv-badge-outline mv-badge-success">Success</span><span class="mv-badge mv-badge-outline mv-badge-info">Info</span><span class="mv-badge mv-badge-outline mv-badge-mono">Mono</span>
</div>

Light

PrimarySecondaryDestructiveWarningSuccessInfoMono

<div class="flex flex-wrap gap-2.5">
  <span class="mv-badge mv-badge-light mv-badge-primary">Primary</span><span class="mv-badge mv-badge-light mv-badge-secondary">Secondary</span><span class="mv-badge mv-badge-light mv-badge-destructive">Destructive</span><span class="mv-badge mv-badge-light mv-badge-warning">Warning</span><span class="mv-badge mv-badge-light mv-badge-success">Success</span><span class="mv-badge mv-badge-light mv-badge-info">Info</span><span class="mv-badge mv-badge-light mv-badge-mono">Mono</span>
</div>

Circle

PrimarySecondaryDestructiveWarningSuccessInfoMono

<div class="flex flex-wrap gap-2.5">
  <span class="mv-badge mv-badge-outline mv-badge-primary rounded-full">Primary</span><span class="mv-badge mv-badge-outline mv-badge-secondary rounded-full">Secondary</span><span class="mv-badge mv-badge-outline mv-badge-destructive rounded-full">Destructive</span><span class="mv-badge mv-badge-outline mv-badge-warning rounded-full">Warning</span><span class="mv-badge mv-badge-outline mv-badge-success rounded-full">Success</span><span class="mv-badge mv-badge-outline mv-badge-info rounded-full">Info</span><span class="mv-badge mv-badge-outline mv-badge-mono rounded-full">Mono</span>
</div>

Square

1111

2222

3333

4444

5555

6666

7777

<div class="space-y-4">
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-secondary rounded-full">1</span><span class="mv-badge mv-badge-secondary rounded-full">1</span><span class="mv-badge mv-badge-outline mv-badge-secondary rounded-full">1</span><span class="mv-badge mv-badge-light mv-badge-secondary rounded-full">1</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-primary rounded-full">2</span><span class="mv-badge mv-badge-primary rounded-full">2</span><span class="mv-badge mv-badge-outline mv-badge-primary rounded-full">2</span><span class="mv-badge mv-badge-light mv-badge-primary rounded-full">2</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-destructive rounded-full">3</span><span class="mv-badge mv-badge-destructive rounded-full">3</span><span class="mv-badge mv-badge-outline mv-badge-destructive rounded-full">3</span><span class="mv-badge mv-badge-light mv-badge-destructive rounded-full">3</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-warning rounded-full">4</span><span class="mv-badge mv-badge-warning rounded-full">4</span><span class="mv-badge mv-badge-outline mv-badge-warning rounded-full">4</span><span class="mv-badge mv-badge-light mv-badge-warning rounded-full">4</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-success rounded-full">5</span><span class="mv-badge mv-badge-success rounded-full">5</span><span class="mv-badge mv-badge-outline mv-badge-success rounded-full">5</span><span class="mv-badge mv-badge-light mv-badge-success rounded-full">5</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-info rounded-full">6</span><span class="mv-badge mv-badge-info rounded-full">6</span><span class="mv-badge mv-badge-outline mv-badge-info rounded-full">6</span><span class="mv-badge mv-badge-light mv-badge-info rounded-full">6</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-mono rounded-full">7</span><span class="mv-badge mv-badge-mono rounded-full">7</span><span class="mv-badge mv-badge-outline mv-badge-mono rounded-full">7</span><span class="mv-badge mv-badge-light mv-badge-mono rounded-full">7</span>
  </div>
</div>

Dot

Ghost Solid Outline Light

<div class="space-y-4">
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-secondary"><span class="mv-badge-dot"></span> Ghost</span><span class="mv-badge mv-badge-secondary"><span class="mv-badge-dot"></span> Solid</span><span class="mv-badge mv-badge-outline mv-badge-secondary"><span class="mv-badge-dot"></span> Outline</span><span class="mv-badge mv-badge-light mv-badge-secondary"><span class="mv-badge-dot"></span> Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-primary"><span class="mv-badge-dot"></span> Ghost</span><span class="mv-badge mv-badge-primary"><span class="mv-badge-dot"></span> Solid</span><span class="mv-badge mv-badge-outline mv-badge-primary"><span class="mv-badge-dot"></span> Outline</span><span class="mv-badge mv-badge-light mv-badge-primary"><span class="mv-badge-dot"></span> Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-destructive"><span class="mv-badge-dot"></span> Ghost</span><span class="mv-badge mv-badge-destructive"><span class="mv-badge-dot"></span> Solid</span><span class="mv-badge mv-badge-outline mv-badge-destructive"><span class="mv-badge-dot"></span> Outline</span><span class="mv-badge mv-badge-light mv-badge-destructive"><span class="mv-badge-dot"></span> Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-warning"><span class="mv-badge-dot"></span> Ghost</span><span class="mv-badge mv-badge-warning"><span class="mv-badge-dot"></span> Solid</span><span class="mv-badge mv-badge-outline mv-badge-warning"><span class="mv-badge-dot"></span> Outline</span><span class="mv-badge mv-badge-light mv-badge-warning"><span class="mv-badge-dot"></span> Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-success"><span class="mv-badge-dot"></span> Ghost</span><span class="mv-badge mv-badge-success"><span class="mv-badge-dot"></span> Solid</span><span class="mv-badge mv-badge-outline mv-badge-success"><span class="mv-badge-dot"></span> Outline</span><span class="mv-badge mv-badge-light mv-badge-success"><span class="mv-badge-dot"></span> Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-info"><span class="mv-badge-dot"></span> Ghost</span><span class="mv-badge mv-badge-info"><span class="mv-badge-dot"></span> Solid</span><span class="mv-badge mv-badge-outline mv-badge-info"><span class="mv-badge-dot"></span> Outline</span><span class="mv-badge mv-badge-light mv-badge-info"><span class="mv-badge-dot"></span> Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-mono"><span class="mv-badge-dot"></span> Ghost</span><span class="mv-badge mv-badge-mono"><span class="mv-badge-dot"></span> Solid</span><span class="mv-badge mv-badge-outline mv-badge-mono"><span class="mv-badge-dot"></span> Outline</span><span class="mv-badge mv-badge-light mv-badge-mono"><span class="mv-badge-dot"></span> Light</span>
  </div>
</div>

Icon

Ghost Solid Outline Light

<div class="space-y-4">
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag" aria-hidden="true">
        <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path>
        <circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
      Ghost</span><span class="mv-badge mv-badge-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true">
        <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
        <rect x="2" y="4" width="20" height="16" rx="2"></rect>
      </svg>
      Solid</span><span class="mv-badge mv-badge-outline mv-badge-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus" aria-hidden="true">
        <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path>
        <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
        <path d="M9 15h6"></path>
        <path d="M12 18v-6"></path>
      </svg>
      Outline</span><span class="mv-badge mv-badge-light mv-badge-secondary"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true">
        <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
      </svg>
      Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-destructive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag" aria-hidden="true">
        <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path>
        <circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
      Ghost</span><span class="mv-badge mv-badge-destructive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true">
        <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
        <rect x="2" y="4" width="20" height="16" rx="2"></rect>
      </svg>
      Solid</span><span class="mv-badge mv-badge-outline mv-badge-destructive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus" aria-hidden="true">
        <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path>
        <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
        <path d="M9 15h6"></path>
        <path d="M12 18v-6"></path>
      </svg>
      Outline</span><span class="mv-badge mv-badge-light mv-badge-destructive"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true">
        <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
      </svg>
      Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-warning"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag" aria-hidden="true">
        <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path>
        <circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
      Ghost</span><span class="mv-badge mv-badge-warning"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true">
        <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
        <rect x="2" y="4" width="20" height="16" rx="2"></rect>
      </svg>
      Solid</span><span class="mv-badge mv-badge-outline mv-badge-warning"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus" aria-hidden="true">
        <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path>
        <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
        <path d="M9 15h6"></path>
        <path d="M12 18v-6"></path>
      </svg>
      Outline</span><span class="mv-badge mv-badge-light mv-badge-warning"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true">
        <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
      </svg>
      Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag" aria-hidden="true">
        <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path>
        <circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
      Ghost</span><span class="mv-badge mv-badge-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true">
        <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
        <rect x="2" y="4" width="20" height="16" rx="2"></rect>
      </svg>
      Solid</span><span class="mv-badge mv-badge-outline mv-badge-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus" aria-hidden="true">
        <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path>
        <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
        <path d="M9 15h6"></path>
        <path d="M12 18v-6"></path>
      </svg>
      Outline</span><span class="mv-badge mv-badge-light mv-badge-success"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true">
        <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
      </svg>
      Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag" aria-hidden="true">
        <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path>
        <circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
      Ghost</span><span class="mv-badge mv-badge-info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true">
        <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
        <rect x="2" y="4" width="20" height="16" rx="2"></rect>
      </svg>
      Solid</span><span class="mv-badge mv-badge-outline mv-badge-info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus" aria-hidden="true">
        <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path>
        <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
        <path d="M9 15h6"></path>
        <path d="M12 18v-6"></path>
      </svg>
      Outline</span><span class="mv-badge mv-badge-light mv-badge-info"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true">
        <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
      </svg>
      Light</span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-mono"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-tag" aria-hidden="true">
        <path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"></path>
        <circle cx="7.5" cy="7.5" r=".5" fill="currentColor"></circle>
      </svg>
      Ghost</span><span class="mv-badge mv-badge-mono"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-mail" aria-hidden="true">
        <path d="m22 7-8.991 5.727a2 2 0 0 1-2.009 0L2 7"></path>
        <rect x="2" y="4" width="20" height="16" rx="2"></rect>
      </svg>
      Solid</span><span class="mv-badge mv-badge-outline mv-badge-mono"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-file-plus" aria-hidden="true">
        <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path>
        <path d="M14 2v5a1 1 0 0 0 1 1h5"></path>
        <path d="M9 15h6"></path>
        <path d="M12 18v-6"></path>
      </svg>
      Outline</span><span class="mv-badge mv-badge-light mv-badge-mono"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-activity" aria-hidden="true">
        <path d="M22 12h-2.48a2 2 0 0 0-1.93 1.46l-2.35 8.36a.25.25 0 0 1-.48 0L9.24 2.18a.25.25 0 0 0-.48 0l-2.35 8.36A2 2 0 0 1 4.49 12H2"></path>
      </svg>
      Light</span>
  </div>
</div>

Removable

Ghost Solid Outline Light

<div class="space-y-4">
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-primary">Ghost<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-primary">Solid<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-outline mv-badge-primary">Outline<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-light mv-badge-primary">Light<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-secondary">Ghost<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-secondary">Solid<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-outline mv-badge-secondary">Outline<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-light mv-badge-secondary">Light<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-destructive">Ghost<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-destructive">Solid<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-outline mv-badge-destructive">Outline<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-light mv-badge-destructive">Light<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-warning">Ghost<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-warning">Solid<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-outline mv-badge-warning">Outline<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-light mv-badge-warning">Light<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-success">Ghost<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-success">Solid<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-outline mv-badge-success">Outline<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-light mv-badge-success">Light<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-info">Ghost<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-info">Solid<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-outline mv-badge-info">Outline<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-light mv-badge-info">Light<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span>
  </div>
  <div class="flex gap-4">
    <span class="mv-badge mv-badge-ghost mv-badge-mono">Ghost<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-mono">Solid<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-outline mv-badge-mono">Outline<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span><span class="mv-badge mv-badge-light mv-badge-mono">Light<!-- -->
      <button class="mv-badge-btn">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-x" aria-hidden="true">
          <path d="M18 6 6 18"></path>
          <path d="m6 6 12 12"></path>
        </svg></button></span>
  </div>
</div>

Size

Extra smallSmallDefaultLarge

<div class="space-y-4">
  <div class="flex flex-wrap items-center gap-4">
    <span class="mv-badge mv-badge-xs mv-badge-outline mv-badge-primary rounded-full">Extra small</span><span class="mv-badge mv-badge-sm mv-badge-outline mv-badge-primary rounded-full">Small</span><span class="mv-badge mv-badge-outline mv-badge-primary rounded-full">Default</span><span class="mv-badge mv-badge-lg mv-badge-outline mv-badge-primary rounded-full">Large</span>
  </div>
  <div class="flex flex-wrap items-center gap-4">
    <span class="mv-badge mv-badge-xs mv-badge-outline mv-badge-secondary rounded-full">Extra small</span><span class="mv-badge mv-badge-sm mv-badge-outline mv-badge-secondary rounded-full">Small</span><span class="mv-badge mv-badge-outline mv-badge-secondary rounded-full">Default</span><span class="mv-badge mv-badge-lg mv-badge-outline mv-badge-secondary rounded-full">Large</span>
  </div>
  <div class="flex flex-wrap items-center gap-4">
    <span class="mv-badge mv-badge-xs mv-badge-outline mv-badge-destructive rounded-full">Extra small</span><span class="mv-badge mv-badge-sm mv-badge-outline mv-badge-destructive rounded-full">Small</span><span class="mv-badge mv-badge-outline mv-badge-destructive rounded-full">Default</span><span class="mv-badge mv-badge-lg mv-badge-outline mv-badge-destructive rounded-full">Large</span>
  </div>
  <div class="flex flex-wrap items-center gap-4">
    <span class="mv-badge mv-badge-xs mv-badge-outline mv-badge-warning rounded-full">Extra small</span><span class="mv-badge mv-badge-sm mv-badge-outline mv-badge-warning rounded-full">Small</span><span class="mv-badge mv-badge-outline mv-badge-warning rounded-full">Default</span><span class="mv-badge mv-badge-lg mv-badge-outline mv-badge-warning rounded-full">Large</span>
  </div>
  <div class="flex flex-wrap items-center gap-4">
    <span class="mv-badge mv-badge-xs mv-badge-outline mv-badge-success rounded-full">Extra small</span><span class="mv-badge mv-badge-sm mv-badge-outline mv-badge-success rounded-full">Small</span><span class="mv-badge mv-badge-outline mv-badge-success rounded-full">Default</span><span class="mv-badge mv-badge-lg mv-badge-outline mv-badge-success rounded-full">Large</span>
  </div>
  <div class="flex flex-wrap items-center gap-4">
    <span class="mv-badge mv-badge-xs mv-badge-outline mv-badge-info rounded-full">Extra small</span><span class="mv-badge mv-badge-sm mv-badge-outline mv-badge-info rounded-full">Small</span><span class="mv-badge mv-badge-outline mv-badge-info rounded-full">Default</span><span class="mv-badge mv-badge-lg mv-badge-outline mv-badge-info rounded-full">Large</span>
  </div>
  <div class="flex flex-wrap items-center gap-4">
    <span class="mv-badge mv-badge-xs mv-badge-outline mv-badge-mono rounded-full">Extra small</span><span class="mv-badge mv-badge-sm mv-badge-outline mv-badge-mono rounded-full">Small</span><span class="mv-badge mv-badge-outline mv-badge-mono rounded-full">Default</span><span class="mv-badge mv-badge-lg mv-badge-outline mv-badge-mono rounded-full">Large</span>
  </div>
</div>