Radzen Blazor Components

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.

Badge Style link

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

Primary Secondary Info Success Warning Danger Light Dark

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".

Primary Secondary Info Success Warning Danger
Primary Secondary Info Success Warning Danger
Primary Secondary Info Success Warning Danger
Primary Secondary Info Success Warning Danger

Badge Variant link

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

Flat Outlined Text
Flat Outlined Text
Flat Outlined Text
Flat Outlined Text
Flat Outlined Text

Pill link

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

Child Content link

Define custom content with ease.

bug_report No Bugs Found

Supercharge your Blazor development with Radzen Blazor Studio

Radzen Blazor Studio is a software development environment that empowers developers to design, build and deploy Blazor applications without the traditional hurdles. Write less code and get more done.

open_in_new Learn More
>Radzen Blazor Studio

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

Demos Configuration

Premium Themes

  • Material 3
  • Fluent
  • Material 3 Dark
  • Material Dark
  • Fluent Dark

Free Themes

  • Material
  • Standard
  • Default
  • Humanistic
  • Software
  • Dark
An error has occurred. This app may no longer respond until reloaded. Reload 🗙