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.

ninja-iconThe 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.Start Free Trial

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.

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

<TelerikButton>
    <TelerikBadge VerticalAlign="@BadgeVerticalAlign.Bottom">12</TelerikBadge>
    Notifications
</TelerikButton>

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.

ParameterTypeDescription
ShowCutoutBorderboolControls whether there is a small visual separation between the Badge and the container when they overlap.
PositionBadgePosition
(Edge)
The position of the Badge relative to the container. Read more about Badge positioning.
HorizontalAlignBadgeHorizontalAlign
(End)
Determines if the left or the right side of the Badge will touch its parent container. Read more about Badge positioning.
VerticalAlignBadgeVerticalAlign
(Top)
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:

ParameterTypeDescription
ClassstringDefines the <div class="k-badge"> CSS class rendered on the main wrapping element of the Badge component. Use it for styling customizations.
FillModeTelerik.Blazor.ThemeConstants.Badge.FillMode.SolidControls how the Badge is filled.
RoundedTelerik.Blazor.ThemeConstants.Badge.Rounded.FullDefines how rounded the borders of the Badge are.
SizeTelerik.Blazor.ThemeConstants.Badge.Size.MediumSets the size of the Badge.
ThemeColorTelerik.Blazor.ThemeConstants.Badge.ThemeColor.PrimaryAdjusts the background color of the Badge.

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

Next Steps

See Also