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 HtmlHelper 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
Not finding the help you need? Improve this article