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).
IComponent
IHandleEvent
IHandleAfterRender
RadzenComponent.SetParametersAsync
RadzenComponent.OnAfterRenderAsync
RadzenComponent.RaiseContextMenu
RadzenComponent.RaiseMouseEnter
RadzenComponent.AddContextMenu
RadzenComponent.RaiseMouseLeave
RadzenComponent.OnBecameInvisible
RadzenComponent.DefaultCulture
RadzenComponent.IsJSRuntimeAvailable
ComponentBase.OnInitializedAsync
ComponentBase.OnParametersSet
ComponentBase.OnParametersSetAsync
ComponentBase.StateHasChanged
ComponentBase.ShouldRender
ComponentBase.OnAfterRender
ComponentBase.InvokeAsync
ComponentBase.DispatchExceptionAsync
ComponentBase.RendererInfo
ComponentBase.Assets
ComponentBase.AssignedRenderMode
Namespace: Radzen.Blazor
Assembly: Radzen.Blazor.dll
public class RadzenBadge : RadzenComponent, IComponent, IHandleEvent, IHandleAfterRenderBasic 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" />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).
public RadzenBadge()Gets or sets the semantic color style of the badge. Determines the badge's color based on its purpose (Primary, Success, Danger, Warning, etc.).
public BadgeStyle BadgeStyle { get; set; }| Type | Description |
|---|---|
| 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.). |
Gets or sets the custom child content to render inside the badge. When set, overrides the Text property for displaying custom markup.
public RenderFragment ChildContent { get; set; }| Type | Description |
|---|---|
| RenderFragment | Gets or sets the custom child content to render inside the badge. When set, overrides the Text property for displaying custom markup. |
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.
public bool IsPill { get; set; }| Type | Description |
|---|---|
| bool | 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. |
Gets or sets the color intensity shade for the badge. Works in combination with BadgeStyle to adjust the color darkness/lightness.
public Shade Shade { get; set; }| Type | Description |
|---|---|
| Shade | Gets or sets the color intensity shade for the badge. Works in combination with BadgeStyle to adjust the color darkness/lightness. |
Gets or sets the text content displayed in the badge. Typically used for short text like numbers, single words, or abbreviations.
public string Text { get; set; }| Type | Description |
|---|---|
| string | Gets or sets the text content displayed in the badge. Typically used for short text like numbers, single words, or abbreviations. |
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).
public Variant Variant { get; set; }| Type | Description |
|---|---|
| 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). |