Badge

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

Examples

Badge Secondary Destructive Outline
Verified 8 99 20+
View Code
<!-- Default Variants -->
<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>

<!-- Custom Styled Badge with Icon -->
<c-badge
  variant="secondary"
  badge-classes="bg-blue-500 text-white dark:bg-blue-600"
>
  <docs-lucide-icon icon="badge-check" size="12"></docs-lucide-icon>
  Verified
</c-badge>

<!-- Notification Count Badges -->
<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
>

API Reference

Badge

Prop Type Default
variant 'default' | 'secondary' | 'destructive' | 'outline' 'default'
badge-classes string -