Blazor Badge Overview

The Blazor Badge component is a visual element that displays additional information, such as a status indicator, notification icon, short text, and others.

The Badge comes with built-in customization features that allow the developer to fine-tune the positioning and alignment of the component, change the background color and the fill mode, and to enable or disable the cutout border.

Telerik UI for Blazor Ninja image

The Badge component is part of Telerik UI for Blazor, a professional grade UI library with 110+ native components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Creating Blazor Badge

  1. Add the <TelerikBadge> tag to a container that the Badge will attach to.
  2. Use the Badge ChildContent to add content.
  3. (optional) Customize the appearance and fine-tune the positioning and alignment of the Telerik Blazor Badge.

Basic configuration of the Blazor Badge


Positioning and Alignment

You can control how the Badge is positioned relative to its associated container. Read more about the Blazor Badge positioning...

Badge Parameters

The Blazor Badge provides various parameters that allow you to configure the component. Also check the Badge API Reference for a full list of properties.

Parameter Type Description
ShowCutoutBorder bool Controls whether there is a small visual separation between the Badge and the container when they overlap.
Position BadgePosition
The position of the Badge relative to the container. Read more about Badge positioning.
HorizontalAlign BadgeHorizontalAlign
Determines if the left or the right side of the Badge will touch its parent container. Read more about Badge positioning.
VerticalAlign BadgeVerticalAlign
Determines if the Badge will touch the parent container with its top or bottom side. Read more about Badge positioning.

Styling and Appearance

The following parameters enable you to customize the appearance of the Blazor Badge:

Parameter Type Description
Class string Defines the <div class="k-badge"> CSS class rendered on the main wrapping element of the Badge component. Use it for styling customizations.
FillMode Telerik.Blazor.ThemeConstants.Badge.FillMode.Solid Controls how the Badge is filled.
Rounded Telerik.Blazor.ThemeConstants.Badge.Rounded.Full Defines how rounded the borders of the Badge are.
Size Telerik.Blazor.ThemeConstants.Badge.Size.Medium Sets the size of the Badge.
ThemeColor Telerik.Blazor.ThemeConstants.Badge.ThemeColor.Primary Adjusts the background color of the Badge.

You can find more information for customizing the Badge appearance in the Appearance article.

Next Steps

See Also

In this article