Badge ToggleButton

The ToggleButton can incorporate a Badge to enhance the meaning of the text content.

The ToggleButton provides the Badge() configuration method for configuring the ToggleButton's Badge. The API exposes several methods that you can use to customize the appearance of the Badge:

• Shape()—Specifies the shape of the badge. The default value is Rounded.
• 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.

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

    <kendo-togglebutton name="toggleButton">
        <badge text="+5"
            cutout-border="true"
            visible="true"
            fill="@BadgeFill.Solid"
            shape="@BadgeShape.Rectangle"
            size="@BadgeSize.Large"
            theme-color="@BadgeColor.Success"
            position="@BadgePosition.Outside"
            align="@BadgeAlign.TopEnd" />
        Text ToggleButton
    </kendo-togglebutton>

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

    <kendo-button name="toggleButton">
        <badge icon="save"
               shape="@BadgeShape.Circle"
               size="@BadgeSize.Medium"
               theme-color="@BadgeColor.Success"
               position="@BadgePosition.Edge"
               align="@BadgeAlign.TopStart" />
        Text ToggleButton
    </kendo-button>

See Also

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