Badge

The Radzen Blazor Badge component is a small graphic that displays important information, like a count or label, within a user interface. It's commonly used to draw attention to something or provide visual feedback to the user.

These demos display badges with various styles (primary/secondary/success/danger/warning/info/light/dark), shades (lighter/light/default/dark/darker), variants (filled/outlined/text), pill shapes, and custom child content for flexible visual indicators.

Badge Style link

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

Badge Shade link

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

Badge Variant link

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

Pill link

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

Child Content link

Define custom content with ease.

All the tools in one place

Save Hours on Every Project

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

support

Dedicated support backed by proven expertise

palette

Premium themes and theme editor

widgets

Ready-to-use UI blocks

dashboard_customize

Complete app templates

format_shapes

Visual design-time-experience

Start Free See Subscription Plans

Radzen Blazor Components, © 2018-2025 Radzen.
Source Code licensed under MIT