Badge

Small label or count indicator with variant styling (default, secondary, outline, destructive).

Installation

Add the Badge component using the CLI:

shadcnblazor component add badge

Usage

The Badge component displays small labels or count indicators. Use ChildContent for the label text. Set Variant to default, secondary, destructive, outline, or ghost. Set Size for Sm, Md, or Lg.

Badge Secondary Destructive Outline

<div class="flex flex-wrap gap-2">
    <Badge>Badge</Badge>
    <Badge Variant="@Variant.Secondary">Secondary</Badge>
    <Badge Variant="@Variant.Destructive">Destructive</Badge>
    <Badge Variant="@Variant.Outline">Outline</Badge>
</div>

Examples

Variants

Use the Variant parameter to change the variant of the badge.

Default Secondary Destructive Outline Ghost

<div class="flex flex-wrap gap-2">
    <Badge Variant="@Variant.Default">Default</Badge>
    <Badge Variant="@Variant.Secondary">Secondary</Badge>
    <Badge Variant="@Variant.Destructive">Destructive</Badge>
    <Badge Variant="@Variant.Outline">Outline</Badge>
    <Badge Variant="@Variant.Ghost">Ghost</Badge>
</div>

With Icon

You can render an icon inside the badge. Place the icon as the first child for inline-start or as the last child for inline-end.

Verified Bookmark

<div class="flex flex-wrap gap-2">
    <Badge Variant="@Variant.Default">
        <LuBadgeCheck />
        Verified
    </Badge>
    <Badge Variant="@Variant.Secondary">
        <LuBookmark />
        Bookmark
    </Badge>
</div>

With Spinner

You can render a spinner inside the badge for loading states. Use LuLoaderCircle with animate-spin.

Deleting Generating

<div class="flex flex-wrap gap-2">
    <Badge Variant="@Variant.Destructive">
        <LuLoaderCircle class="animate-spin" />
        Deleting
    </Badge>
    <Badge Variant="@Variant.Default">
        <LuLoaderCircle class="animate-spin" />
        Generating
    </Badge>
</div>

Link

Use the BadgeLink component to render a badge as a link for clickable badges that navigate.

Open Link

<BadgeLink Href="#" Variant="@Variant.Link">
    <LuArrowUpRight />
    Open Link
</BadgeLink>

Custom Colors

Customize badge colors by adding custom classes such as bg-green-100 dark:bg-green-900 to the Badge component.

Blue Green Sky Purple Red

<div class="flex flex-wrap gap-2">
    <Badge Variant="@Variant.Default" Class="bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-300 border-transparent">Blue</Badge>
    <Badge Variant="@Variant.Default" Class="bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300 border-transparent">Green</Badge>
    <Badge Variant="@Variant.Default" Class="bg-sky-100 text-sky-800 dark:bg-sky-900 dark:text-sky-300 border-transparent">Sky</Badge>
    <Badge Variant="@Variant.Default" Class="bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-300 border-transparent">Purple</Badge>
    <Badge Variant="@Variant.Default" Class="bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300 border-transparent">Red</Badge>
</div>

API Reference

Badge

A small label or count indicator for highlighting status or metadata.

Properties

Name	Type	Description
`AdditionalAttributes`	`Dictionary<string, Object>`
`ChildContent`	`RenderFragment`	The content of the badge.
`Class`	`string`
`Size`	`Size`	The size of the badge.
`Variant`	`Variant`	The visual style variant of the badge.

Methods

Method	Returns	Description
`Equals`	`bool`
`GetHashCode`	`int`
`GetType`	`Type`
`SetParametersAsync`	`Task`
`ToString`	`string`

Mobile support for API reference coming soon.