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:

Razor

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

Razor

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

• Adding Badges to the Button HtmlHelper for ASP.NET MVC (Demo)
• Server-Side API