New to Telerik UI for Blazor? Start a free 30-day trial

TelerikBadge

Class

A component that lets you display a small status or count indicator attached to a parent element. Supports edge/inline/inside/outside positioning, top/bottom and start/end alignment, size/rounded/fill mode/theme color options, optional cutout border, and custom child content.

Definition

Namespace:Telerik.Blazor.Components

Assembly:Telerik.Blazor.dll

Syntax:

public class TelerikBadge : BaseComponent, IComponent, IHandleEvent, IHandleAfterRender, IDisposable

Inheritance: objectComponentBaseBaseComponentTelerikBadge

Implements: IComponentIDisposableIHandleAfterRenderIHandleEvent

Constructors

TelerikBadge()

public TelerikBadge()

Methods

BuildRenderTree(RenderTreeBuilder)

protected override void BuildRenderTree(RenderTreeBuilder __builder)

Parameters:__builderRenderTreeBuilder

Overrides: ComponentBase.BuildRenderTree(RenderTreeBuilder)

Properties

ChildContent

RenderFragment

[Parameter]
public RenderFragment? ChildContent { get; set; }

FillMode

string

Defines how the Badge component is filled. Valid values are: Flat Outline Solid.

[Parameter]
public string? FillMode { get; set; }

HorizontalAlign

BadgeHorizontalAlign

Controls if the Badge will render on the left or the right side of the parent element. Valid values are: Start - The Badge renders on the left side of the parent element. End - The Badge renders on the right side of the parent element. By default, the Badge renders on the right side of the parent element.

[Parameter]
public BadgeHorizontalAlign HorizontalAlign { get; set; }

Position

BadgePosition

Controls how the Badge positions in relation to its parent element. Valid values are: Edge - The center of the Badge displays on the edge of the parent element. Inline - The Badge is positioned according to the normal page content flow. Inside - The Badge is positioned entirely inside the parent element. Outside - The Badge is positioned entirely outside the parent element. By default, the center of the Badge displays on the edge of the parent element.

[Parameter]
public BadgePosition Position { get; set; }

Rounded

string

Defines how rounded the borders of the badge are. Valid values are: Small Medium Large Full.

[Parameter]
public string? Rounded { get; set; }

ShowCutoutBorder

bool

Defines if a margin renders between the Badge and the parent element where they overlap.

[Parameter]
public bool ShowCutoutBorder { get; set; }

Size

string

Controls the size of the Badge component. Valid values are: Small Medium Large.

[Parameter]
public string? Size { get; set; }

ThemeColor

string

Defines the color of the Badge component.

[Parameter]
public string? ThemeColor { get; set; }

VerticalAlign

BadgeVerticalAlign

Controls if the Badge will render above or below the parent element. Valid values are: Top - The Badge renders above the parent element. Bottom - The Badge renders below the parent element. By default, the Badge renders on top of the parent element.

[Parameter]
public BadgeVerticalAlign VerticalAlign { get; set; }