Documentation About Radzen
GitHub

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

Introducing Radzen Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful business Blazor apps. Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.
open_in_new Try Now play_circle_outline See in Action


Source Code licensed under MIT

New

Radzen
Blazor Studio

Radzen Blazor Studio is a desktop tool that empowers developers to create beautiful Blazor apps.

Develop your Blazor Server and WebAssembly applications visually with familiar WYSIWYG interface.

open_in_new Try Now play_circle_outline See in Action
An error has occurred. This application may no longer respond until reloaded. Reload 🗙