Blazor Badge

A small graphic for displaying counts, labels, and status indicators with multiple styles and variants.

Badge Style Link to this section

To set a predefined badge style, use the BadgeStyle property, e.g. BadgeStyle="BadgeStyle.Primary".

Primary Secondary Base Info Success Warning Danger Light Dark

Each badge style, except Light and Dark, comes with a set of shades. Use the Shade property, e.g. Shade="Shade.Lighter".

Primary Secondary Base Info Success Warning Danger

Each badge style and shade can be used with different badge variants. Use the Variant property, e.g. Variant="Variant.Outlined".

Flat Outlined Text

Use IsPill="true" for pill-shaped badges.

Flat Outlined

Define custom content with ease.

No Bugs Found

All the tools in one place

With Radzen Blazor subscription you get the full toolkit, including:

Dedicated support backed by proven expertise

Premium themes and theme editor

Ready-to-use UI blocks

Complete app templates

Visual design-time-experience

Start Free See Subscription Plans

On this page