ASP.NET Core Badge Overview

Telerik UI for ASP.NET Core Ninja image

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.

Next Steps

See Also

In this article