ASP.NET Core Badge Overview
The Badge is part of Telerik UI for ASP.NET Core, a
professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.
The Telerik UI Badge TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI Badge widget.
The Badge is an absolutely positioned element that is used to decorate buttons, navigation menus, or other components in the application when the visual notification is needed.
The component allows you to customize its content through templates, to control its appearance and rendering by setting different sizes, colors, and more.
Initializing the Badge
The following example demonstrates how to define a Badge.
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
@(Html.Kendo().Badge()
.Name("badge")
.Text("42")
)
</a>
@addTagHelper *, Kendo.Mvc
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
<kendo-badge name="badge" text="42">
</kendo-badge>
</a>
Basic Configuration
The Badge provides a variety of options for positioning and alignment. The following example shows how to render the Badge outside at the top right corner of the parent container.
<span class='k-icon k-i-envelop'>
@(Html.Kendo().Badge()
.Name("badge")
.Text("+2")
.ThemeColor(BadgeColor.Primary)
.Position(BadgePosition.Outside)
.Align(BadgeAlign.TopEnd)
.Rounded(Rounded.Full)
.Size(BadgeSize.Medium)
)
</span>
@addTagHelper *, Kendo.Mvc
<span class='k-icon k-i-envelop'>
<kendo-badge name="badge"
text="+2"
theme-color="BadgeColor.Primary"
position="BadgePosition.Outside"
align="BadgeAlign.TopEnd"
rounded="Rounded.Full"
size="BadgeSize.Medium">
</kendo-badge>
</span>
Using a Template
You can customize the Badge content through the Template() method. This feature is useful when the Badge content depends on a specific condition, such as user permissions, the value of a global variable, or today's date.
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
@(Html.Kendo().Badge()
.Name("badge")
.Text("42")
.Template("#= this._text > 10 ? '9+' : this._text #")
.Rounded(Rounded.Full)
)
</a>
<a class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md">
<kendo-badge name="badge"
text="42"
rounded="Rounded.Full"
template="#= this._text > 10 ? '9+' : this._text #">
</kendo-badge>
</a>
Using Badge as a Label
You can integrate the Badge into other UI components. The following example demonstrates how to use it as a label in the Grid client column templates.
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound("OrderID").HtmlAttributes(new { @class = "templateCell" }).ClientTemplateId("orderTemplate");
})
.Events(ev => ev.DataBound("initBadges"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
<script type="kendo-template" id="orderTemplate">
#if(OrderID <= 10){#
@(Html.Kendo().Badge()
.Name("flag#=OrderID#")
.ThemeColor(BadgeColor.Success)
.Text("New")
.ToClientTemplate()
)
#}#
#if(OrderID > 10){#
@(Html.Kendo().Badge()
.Name("flag#=OrderID#")
.ThemeColor(BadgeColor.Error)
.Text("Old")
.ToClientTemplate()
)
#}#
</script>
@addTagHelper *, Kendo.Mvc
@(Html.Kendo().Grid<OrderViewModel>()
.Name("grid")
.Columns(columns => {
columns.Bound("OrderID").HtmlAttributes(new { @class = "templateCell" }).ClientTemplateId("orderTemplate");
})
.Events(ev => ev.DataBound("initBadges"))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("Orders_Read", "Grid"))
)
)
<script type="text/html" id="orderTemplate">
#if(OrderID <= 10){#
<kendo-badge name="flag#=OrderID#"
theme-color="BadgeColor.Success"
text="New"
is-in-client-template="true">
</kendo-badge>
#}#
#if(OrderID > 10){#
<kendo-badge name="flag#=OrderID#"
theme-color="BadgeColor.Error"
text="Old"
is-in-client-template="true">
</kendo-badge>
#}#
</script>
function initBadges(e) {
$(".templateCell").each(function(){
eval($(this).children("script").last().html());
});
}
Functionality and Features
- Appearance—Use different configuration settings that control the styling of the component.