New to Telerik UI for ASP.NET MVC? Download free 30-day trial

Badge Button

The Button can accommodate a Badge to enhance the meaning of the text content.

The Button provides the Badge() configuration method for configuring the Button's Badge. The API exposes methods you can use, including shape(), size(), themecolor(), position(), fill(),visible() and align() to customize the appearance of the Badge:

    @(Html.Kendo().Button()
        .Name("button")
        .Content("Click Me!")
        .Badge(b => b
            .Text("success")
            .Shape(BadgeShape.Pill)
            .Size(BadgeSize.Medium)
            .ThemeColor(BadgeColor.Info)
            .Position(BadgePosition.Edge)
            .Align(BadgeAlign.TopEnd)
        )
    )

The Icon() method displays the appropriate Kendo UI for jQuery font icon icon. The icon is rendered inside the badge by a span.k-icon or span.k-svg-icon element.

    @(Html.Kendo().Button()
        .Name("save")
        .Content("Save")
        .Badge(b => b
            .Shape(BadgeShape.Circle)
            .Size(BadgeSize.Large)
            .ThemeColor(BadgeColor.Success)
            .Position(BadgePosition.Edge)
            .Align(BadgeAlign.TopStart)
            .Icon("save")
        )
    )

See Also

In this article