New to Telerik UI for ASP.NET MVCStart a free 30-day trial

ASP.NET MVC Badge Overview

The Telerik UI Badge HtmlHelper for ASP.NET MVC is a server-side wrapper 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.

Razor
    <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>

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.

Razor
    <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>

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.

Razor
    <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>

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.

Razor
    @(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>

Functionality and Features

  • Appearance—Use different configuration settings that control the styling of the component.

Next Steps

See Also