Badge
Secondary
Destructive
Outline
<div class="flex w-full flex-wrap justify-center gap-2">
<Badge>Badge</Badge>
<Badge Variant="@Badge.BadgeVariant.Secondary">Secondary</Badge>
<Badge Variant="@Badge.BadgeVariant.Destructive">Destructive</Badge>
<Badge Variant="@Badge.BadgeVariant.Outline">Outline</Badge>
</div>Installation
Install the badge component using the command or manual steps.
blazor-shadcn add badgeUsage
@using BlazorShadcn.Components.UI<Badge Variant="@Badge.BadgeVariant.Outline">Badge</Badge>Examples
Variants
Use the Variant parameter to change badge styles.
<Badge>Default</Badge>
<Badge Variant="@Badge.BadgeVariant.Secondary">Secondary</Badge>
<Badge Variant="@Badge.BadgeVariant.Destructive">Destructive</Badge>
<Badge Variant="@Badge.BadgeVariant.Outline">Outline</Badge>
<Badge Variant="@Badge.BadgeVariant.Ghost">Ghost</Badge>
<Badge Variant="@Badge.BadgeVariant.Link" Href="#" onclick="return false;">Link</Badge>With Icon
Verified
Bookmark
<Badge Variant="@Badge.BadgeVariant.Secondary">
<svg data-icon="inline-start" 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">
<path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
<path d="m9 12 2 2 4-4" />
</svg>
Verified
</Badge>
<Badge Variant="@Badge.BadgeVariant.Outline">
Bookmark
<svg data-icon="inline-end" 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">
<path d="M17 3a2 2 0 0 1 2 2v15a1 1 0 0 1-1.496.868l-4.512-2.578a2 2 0 0 0-1.984 0l-4.512 2.578A1 1 0 0 1 5 20V5a2 2 0 0 1 2-2z" />
</svg>
</Badge>With Spinner
Deleting
Generating
<Badge Variant="@Badge.BadgeVariant.Destructive" Class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">
<svg role="status" aria-label="Loading" data-icon="inline-start" 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="animate-spin">
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
Deleting
</Badge>
<Badge Variant="@Badge.BadgeVariant.Secondary">
Generating
<svg role="status" aria-label="Loading" data-icon="inline-end" 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="animate-spin">
<path d="M21 12a9 9 0 1 1-6.219-8.56" />
</svg>
</Badge>Link
<Badge Href="#" onclick="return false;">
Open Link
<svg data-icon="inline-end" 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">
<path d="M7 7h10v10" />
<path d="M7 17 17 7" />
</svg>
</Badge>Custom Colors
Blue
Green
Sky
Purple
Red
<Badge Class="bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">Blue</Badge>
<Badge Class="bg-green-50 text-green-700 dark:bg-green-950 dark:text-green-300">Green</Badge>
<Badge Class="bg-sky-50 text-sky-700 dark:bg-sky-950 dark:text-sky-300">Sky</Badge>
<Badge Class="bg-purple-50 text-purple-700 dark:bg-purple-950 dark:text-purple-300">Purple</Badge>
<Badge Class="bg-red-50 text-red-700 dark:bg-red-950 dark:text-red-300">Red</Badge>