Badge
Displays a badge or a component that looks like a badge.
Examples
View Code
Hide 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
>