Badge ToggleButton

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

The ToggleButton provides the badge setting 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.

    <button id="inlineBadgeBtn">
        Inline Badge
    </button>

    <button id="overlayBadgeBtn">
        Overlay Badge
    </button>

    <script>
        $(document).ready(function(){
            $("#inlineBadgeBtn").kendoToggleButton({
                group: "badges",
                badge: {
                    position: "inline",
                    shape: "pill",
                    themeColor: "success",
                    text: "100%"
                }
            })

            $("#overlayBadgeBtn").kendoToggleButton({
                group: "badges",
                badge: {
                    shape: "rectangle",
                    themeColor: "warning",
                    text: "80%"
                }
            })
        })
    </script>

See Also

• Adding Badges to the ToggleButton for Kendo UI for jQuery (Demo)