Badge

A small label for a status, category or count.

JavaScript off: what the HTML and CSS do on their own.

A small label for a status, category or count.

Usage

razor

<Badge Status="Status.Success">Published</Badge>
<Badge Status="Status.Danger" Variant="BadgeVariant.Solid" Pill>3</Badge>
<Badge Status="Status.Warning" Dot>Pending review</Badge>
<Badge Accent="Accent.Primary" Variant="BadgeVariant.Solid" Pill>12</Badge>

Status

Use Status for what the badge means, or Accent for a color of your own.

Preview Code

Preview

Draft Beta Paid Pending Failed Pro

Code

Statuses.razor

<Row Gap="2" Align="Align.Center" Wrap Justify="Justify.Center">
    <Badge>Draft</Badge>
    <Badge Status="Status.Info">Beta</Badge>
    <Badge Status="Status.Success">Paid</Badge>
    <Badge Status="Status.Warning">Pending</Badge>
    <Badge Status="Status.Danger">Failed</Badge>
    <Badge Accent="Accent.Primary">Pro</Badge>
</Row>

Variants

Use Variant for the weight: Soft (the default), Solid, Outline or Plain.

Preview Code

Preview

Active Active Active Active

Code

Variants.razor

<Row Gap="2" Align="Align.Center" Wrap Justify="Justify.Center">
    <Badge Status="Status.Success">Active</Badge>
    <Badge Status="Status.Success" Variant="BadgeVariant.Solid">Active</Badge>
    <Badge Status="Status.Success" Variant="BadgeVariant.Outline">Active</Badge>
    <Badge Status="Status.Success" Variant="BadgeVariant.Plain">Active</Badge>
</Row>

Dots, counts and icons

Use Dot for a status, Pill for a count and StartIcon for an icon before the text.

Preview Code

Preview

Published In review New 3 12

Code

DotsCounts.razor

<Row Gap="3" Align="Align.Center" Wrap Justify="Justify.Center">
    <Badge Status="Status.Success" Dot>Published</Badge>
    <Badge Status="Status.Warning" Dot>In review</Badge>
    <Badge Status="Status.Info" StartIcon="Lucide.Sparkles">New</Badge>
    <Badge Status="Status.Danger" Variant="BadgeVariant.Solid" Pill>3</Badge>
    <Badge Accent="Accent.Primary" Variant="BadgeVariant.Solid" Pill Size="BadgeSize.Sm">12</Badge>
</Row>

In headings and buttons

Use Size="BadgeSize.Sm" for a count inside a button; a badge sits inline, so it fits a heading too.

Preview Code

Preview

Release notes v2.4

Code

Inline.razor

<Stack Gap="3" Align="Align.Center">
    <Heading Level="3" Size="TextSize.Lg">Release notes <Badge Accent="Accent.Primary">v2.4</Badge></Heading>
    <Button Variant="ButtonVariant.Outline" Accent="Accent.Neutral" StartIcon="Lucide.Inbox">
        Inbox <Badge Accent="Accent.Primary" Variant="BadgeVariant.Solid" Pill Size="BadgeSize.Sm">4</Badge>
    </Button>
</Stack>

Mode support

What works in each mode, Badge
Feature	Off	Static	Live
Everything	Yes	Yes	Yes

Off: JavaScript disabled. Static: a static SSR page with IzzyBlazor's script. Live: an interactive page (Server, WebAssembly or Auto).

Accessibility

It renders a span with no role: screen readers read its text and nothing more.
Status, Accent and Dot are color only, so the text must say what it means ("Overdue", not just a red dot).
A count is read as just the number: put it next to text that says what it counts, as a NavItem or Tab badge is.

Parameters

Badge parameters
Prop	Type	Default
`Status`What the badge means.	`Status`	`Status.Neutral`
`Accent`A color in place of Status's, such as Accent.Primary for a brand-colored count, Accent.Of("#0d9488") or Accent.Token("brand").	`Accent?`
`Variant`Visual weight.	`BadgeVariant`	`BadgeVariant.Soft`
`Size`Size.	`BadgeSize`	`BadgeSize.Md`
`Pill`Fully rounded ends, for counts.	`bool`	`false`
`Dot`A colored dot before the text, for statuses.	`bool`	`false`
`StartIcon`An icon before the text.	`IconData?`
`ChildContent`The text.	`RenderFragment?`

Plus 16 item props and 4 common props.

Full API