Badge

Displays a badge or a component that looks like a badge.

Examples

Default

Badge Secondary Destructive Outline
Verified 8 99 20+ 
<div class="flex flex-col items-center gap-4">
  <div class="flex w-full flex-wrap gap-2">
    <c-badge>Badge</c-badge>
    <c-badge variant="secondary">Secondary</c-badge>
    <c-badge variant="destructive">Destructive</c-badge>
    <c-badge variant="outline">Outline</c-badge>
  </div>
  <div class="flex w-full flex-wrap gap-2">
    <c-badge
      variant="secondary"
      badge-classes="bg-blue-500 text-white dark:bg-blue-600"
    >
      <c-lucide-icon icon="badge-check" size="12"></c-lucide-icon>
      Verified
    </c-badge>
    <c-badge
      badge-classes="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
      >8</c-badge
    >
    <c-badge
      variant="destructive"
      badge-classes="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
      >99</c-badge
    >
    <c-badge
      variant="outline"
      badge-classes="h-5 min-w-5 rounded-full px-1 font-mono tabular-nums"
      >20+</c-badge
    >
  </div>
</div>

API Reference

Badge

Prop Type Default Description
variant 'default' | 'secondary' | 'destructive' | 'outline' 'default' Visual style variant
badge-classes string - Additional CSS classes for the element