# Badges

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

The ToggleButton provides the `Badge()` configuration method for configuring the ToggleButton's Badge. The [API](https://www.telerik.com/aspnet-mvc/documentation/api/kendo.mvc.ui.fluent/buttonbadgesettingsbuilder) exposes several methods that you can use to customize the appearance of the Badge:

* `Rounded()`—Specifies the border radius of the component.
* `Size()`—Sets the proportions of the badge. The default size is `Medium`
* `ThemeColor()`—Configures the default theme color for the badge. The default value is `Primary`.
* `Position()`—Defines the position of the Badge of the badge. The default value is `Inline`.
* `Fill()`—Species the fill mode of the badge. The default value is `Solid`.
* `Visible()`—Configures the visible state of the badge.
* `Align()`—Defines the alignment of the badge.
* `CutoutBorder()`—Specifies wether or not to render additional cutout border around the badge.

```Razor HtmlHelper
    @(Html.Kendo().ToggleButton()
        .Name("toggleButton")
        .Content("Text ToggleButton")
        .Badge(badge => badge
            .Text("+5")
            .CutoutBorder(true)
            .Rounded(Rounded.None)
            .Size(BadgeSize.Large)
            .ThemeColor(BadgeColor.Success)
            .Position(BadgePosition.Outside)
            .Align(BadgeAlign.TopEnd)
        )
    )
```

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().ToggleButton()
        .Name("toggleButton")
        .Content("Text ToggleButton")
        .Badge(badge => badge
            .Rounded(Rounded.Full)
            .Size(BadgeSize.Large)
            .ThemeColor(BadgeColor.Success)
            .Position(BadgePosition.Edge)
            .Align(BadgeAlign.TopStart)
            .Icon("save")
        )
    )
```

## See Also

* [Adding Badges to the ToggleButton HtmlHelper for ASP.NET MVC (Demo)](https://demos.telerik.com/aspnet-mvc/togglebutton/badges)
* [Server-Side API](https://www.telerik.com/aspnet-mvc/documentation/api/togglebutton)