# Badge Button

The Button can accommodate a [Badge](https://docs.telerik.com/aspnet-core/html-helpers/layout/badge/overview) to enhance the meaning of the text content.

The Button provides the `Badge()` configuration method for configuring the Button's Badge. The [API](https://www.telerik.com/aspnet-core-ui/documentation/api/kendo.mvc.ui.fluent/buttonbadgesettingsbuilder) exposes methods you can use, including `size()`, `themecolor()`, `position()`, `fill()`,`visible()` and `align()` to customize the appearance of the Badge:

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

```Razor TagHelper
    <kendo-button name="buttonWithBadge">
        <badge text="+5"
            cutout-border="true"
            visible="true"
            fill="@BadgeFill.Solid"
            rounded="@Rounded.None"
            size="@BadgeSize.Large"
            theme-color="@BadgeColor.Success"
            position="@BadgePosition.Outside"
            align="@BadgeAlign.TopEnd" />
        New registrations
    </kendo-button>
```

The `Icon()` method displays the appropriate [Kendo UI for jQuery font icon](https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web) icon. The icon is rendered inside the badge by a `span.k-icon` or `span.k-svg-icon` element.

```Razor HtmlHelper
    @(Html.Kendo().Button()
        .Name("save")
        .Content("Save")
        .Badge(b => b
            .Rounded(Rounded.Full)
            .Size(BadgeSize.Large)
            .ThemeColor(BadgeColor.Success)
            .Position(BadgePosition.Edge)
            .Align(BadgeAlign.TopStart)
            .Icon("save")
        )
    )
```

```Razor TagHelper
    <kendo-button name="buttonWithBadge">
        <badge icon="save"
            fill="@BadgeFill.Solid"
            rounded="@Rounded.Full"
            size="@BadgeSize.Medium"
            theme-color="@BadgeColor.Success"
            position="@BadgePosition.Edge"
            align="@BadgeAlign.TopStart" />
        Save
    </kendo-button>
```

## See Also

* [Adding Badges to the Button HtmlHelper for ASP.NET Core (Demo)](https://demos.telerik.com/aspnet-core/button/badges)
* [Server-Side API](https://www.telerik.com/aspnet-core-ui/documentation/api/button)