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.
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
- Add the
<TelerikBadge>tag to a container that the Badge will attach to. - Use the Badge
ChildContentto add content. - (optional) Customize the appearance and fine-tune the positioning and alignment of the Telerik Blazor Badge.
Basic configuration of the Blazor Badge
<TelerikButton>
<TelerikBadge>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.
| Parameter | Type | Description |
|---|---|---|
ShowCutoutBorder |
bool |
Controls whether there is a small visual separation between the Badge and the container when they overlap. |
Position |
BadgePosition ( Edge) |
The position of the Badge relative to the container. Read more about Badge positioning. |
HorizontalAlign |
BadgeHorizontalAlign ( End) |
Determines if the left or the right side of the Badge will touch its parent container. Read more about Badge positioning. |
VerticalAlign |
BadgeVerticalAlign ( 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:
| 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
- Explore the Badge Positioning and Alignment Settings
- Customize the Badge Appearance
- Add a Badge to a Container that Cannot Have Children (Knowledge-Base Article)