Class RadzenBadge
A small label component used to display counts, statuses, or short text labels with semantic color coding. RadzenBadge is a compact visual indicator commonly used for notification counts, status indicators, tags, or highlighting important information. Supports multiple styles (Primary, Secondary, Success, Info, Warning, Danger, Light, Dark) for semantic coloring, variants (Filled, Flat, Outlined, Text) for different appearances, and shapes (standard rectangular or pill-shaped via IsPill). Content can be simple text via Text property or custom content via ChildContent. Can be absolutely positioned to overlay other elements (e.g., notification icon with count). Often used inline with text, on buttons (to show counts), or overlaid on icons (notification badges).
Inherited Members
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
Syntax
public class RadzenBadge : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposableExamples
Basic badge with text:
<RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="New" />Notification count badge:
<div style="position: relative; display: inline-block;">
<RadzenIcon Icon="notifications" />
<RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="3" IsPill="true"
Style="position: absolute; top: -8px; right: -8px;" />
</div>Status badge with custom variant:
<RadzenBadge BadgeStyle="BadgeStyle.Success" Variant="Variant.Flat" Text="Active" IsPill="true" />Constructors
RadzenBadge()
A small label component used to display counts, statuses, or short text labels with semantic color coding. RadzenBadge is a compact visual indicator commonly used for notification counts, status indicators, tags, or highlighting important information. Supports multiple styles (Primary, Secondary, Success, Info, Warning, Danger, Light, Dark) for semantic coloring, variants (Filled, Flat, Outlined, Text) for different appearances, and shapes (standard rectangular or pill-shaped via IsPill). Content can be simple text via Text property or custom content via ChildContent. Can be absolutely positioned to overlay other elements (e.g., notification icon with count). Often used inline with text, on buttons (to show counts), or overlaid on icons (notification badges).
Declaration
public RadzenBadge()Examples
Basic badge with text:
<RadzenBadge BadgeStyle="BadgeStyle.Primary" Text="New" />Notification count badge:
<div style="position: relative; display: inline-block;">
<RadzenIcon Icon="notifications" />
<RadzenBadge BadgeStyle="BadgeStyle.Danger" Text="3" IsPill="true"
Style="position: absolute; top: -8px; right: -8px;" />
</div>Status badge with custom variant:
<RadzenBadge BadgeStyle="BadgeStyle.Success" Variant="Variant.Flat" Text="Active" IsPill="true" />Properties
BadgeStyle
Gets or sets the semantic color style of the badge. Determines the badge's color based on its purpose (Primary, Success, Danger, Warning, etc.).
Declaration
[Parameter]
public BadgeStyle BadgeStyle { get; set; }Property Value
| Type | Description |
|---|---|
| BadgeStyle | The badge style. Default is Primary. |
ChildContent
Gets or sets the custom child content to render inside the badge. When set, overrides the Text property for displaying custom markup.
Declaration
[Parameter]
public RenderFragment ChildContent { get; set; }Property Value
| Type | Description |
|---|---|
| RenderFragment | The child content render fragment. |
IsPill
Gets or sets whether the badge should have rounded pill-shaped ends instead of rectangular corners. Pill badges have a more modern, capsule-like appearance and are often used for tags or status indicators.
Declaration
[Parameter]
public bool IsPill { get; set; }Property Value
| Type | Description |
|---|---|
| bool |
|
Shade
Gets or sets the color intensity shade for the badge. Works in combination with BadgeStyle to adjust the color darkness/lightness.
Declaration
[Parameter]
public Shade Shade { get; set; }Property Value
| Type | Description |
|---|---|
| Shade | The color shade. Default is Default. |
Text
Gets or sets the text content displayed in the badge. Typically used for short text like numbers, single words, or abbreviations.
Declaration
[Parameter]
public string Text { get; set; }Property Value
| Type | Description |
|---|---|
| string | The badge text. |
Variant
Gets or sets the design variant that controls the badge's visual appearance. Options include Filled (solid background), Flat (subtle background), Outlined (border only), and Text (minimal styling).
Declaration
[Parameter]
public Variant Variant { get; set; }Property Value
| Type | Description |
|---|---|
| Variant | The badge variant. Default is Filled. |
Methods
BuildRenderTree(RenderTreeBuilder)
A small label component used to display counts, statuses, or short text labels with semantic color coding. RadzenBadge is a compact visual indicator commonly used for notification counts, status indicators, tags, or highlighting important information. Supports multiple styles (Primary, Secondary, Success, Info, Warning, Danger, Light, Dark) for semantic coloring, variants (Filled, Flat, Outlined, Text) for different appearances, and shapes (standard rectangular or pill-shaped via IsPill). Content can be simple text via Text property or custom content via ChildContent. Can be absolutely positioned to overlay other elements (e.g., notification icon with count). Often used inline with text, on buttons (to show counts), or overlaid on icons (notification badges).
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)Parameters
| Type | Name | Description |
|---|---|---|
| RenderTreeBuilder | __builder |
Overrides
GetComponentCssClass()
Gets the component CSS class.
Declaration
protected override string GetComponentCssClass()Returns
| Type | Description |
|---|---|
| string |