New to Kendo UI for jQuery? Start a free 30-day trial

Items.badge

configuration

If set to true a default overlay badge will be displayed. If set to a string, an ovelay with content set to the specified string will be displayed. Can be set to a JavaScript object which represents the configuration of the Badge widget.

items.badge

Boolean|String|Number|Object

<div style="padding: 10px; background: #cccccc;">
    <div id="buttonGroup"></div>
</div>

<script>
    $("#buttonGroup").kendoButtonGroup({
        items: [
            {
                text: "foo",
                badge: {
                    text: 1234,
                    max: 99,
                    themeColor: "warning",
                    position: "inline"
                }
            },
            {
                text: "bar",
                badge: {
                    icon: "plus",
                    themeColor: "success",
                    cutoutBorder: true
                }
            }
        ]
    });
</script>

items.badge.align

String

Specifies position of the badge relative to button. Valid position options are: top start, top end, bottom start, bottom end.

items.badge.align works in conjunction with items.badge.position.

Default: ''

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Save",
            badge: {
                text: "NEW",
                position: "edge",
                align: "top end"
            }
        },
        {
            text: "Delete",
            badge: {
                text: "5",
                position: "edge",
                align: "bottom start"
            }
        }
    ]
});
</script>

items.badge.cutoutBorder

Boolean

Specifies wether or not to render additional "cutout" border around the badge.

Default: false

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Save",
            badge: {
                text: "1",
                cutoutBorder: true
            }
        },
        {
            text: "Delete",
            badge: {
                text: "2",
                cutoutBorder: false
            }
        }
    ]
});
</script>

items.badge.fill

String

Sets a value controlling how the color is applied to the badge. When undefined (the default), the theme controls the fill mode. Can also be set to the following string values:

"solid"
"outline"

Default: undefined

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Solid Badge",
            badge: {
                text: "5",
                fill: "solid"
            }
        },
        {
            text: "Outline Badge",
            badge: {
                text: "10",
                fill: "outline"
            }
        }
    ]
});
</script>

items.badge.icon

String

Defines the name for an existing icon in a Kendo UI theme or SVG content. The icon is rendered inside the badge by a span.k-icon or span.k-svg-icon element.

Default: ''

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Alert",
            badge: {
                icon: "warning"
            }
        },
        {
            text: "Success",
            badge: {
                icon: "check"
            }
        }
    ]
});
</script>

items.badge.max

Number

If text is a number, it will cap that number.

Default: Infinity

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Messages",
            badge: {
                text: 150,
                max: 99
            }
        },
        {
            text: "Notifications",
            badge: {
                text: 25,
                max: 50
            }
        }
    ]
});
</script>

items.badge.position

String

Specifies position of the badge relative to the edge of the button. Valid placemnt options are: inline, edge, inside, outside.

Note: position configuration, other than inline requires the badge to be aligned. See items.badge.align for more details.

Default: 'edge'

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Inline",
            badge: {
                text: "NEW",
                position: "inline"
            }
        },
        {
            text: "Edge",
            badge: {
                text: "5",
                position: "edge",
                align: "top end"
            }
        },
        {
            text: "Inside",
            badge: {
                text: "!",
                position: "inside",
                align: "top start"
            }
        }
    ]
});
</script>

items.badge.shape

String

Specifies the shape of the badge. Valid options are rectangle, rounded, pill, circle, dot.

Default: 'rounded'

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Rectangle",
            badge: {
                text: "1",
                shape: "rectangle"
            }
        },
        {
            text: "Rounded",
            badge: {
                text: "2",
                shape: "rounded"
            }
        },
        {
            text: "Circle",
            badge: {
                text: "3",
                shape: "circle"
            }
        },
        {
            text: "Dot",
            badge: {
                shape: "dot"
            }
        }
    ]
});
</script>

items.badge.size

String

Sets a value controlling the size of the badge. When undefined (the default), the theme controls the size. Can also be set to the following string values:

"small"
"medium"
"large"

Default: undefined

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Small",
            badge: {
                text: "S",
                size: "small"
            }
        },
        {
            text: "Medium",
            badge: {
                text: "M",
                size: "medium"
            }
        },
        {
            text: "Large",
            badge: {
                text: "L",
                size: "large"
            }
        }
    ]
});
</script>

items.badge.template

String|Function

The template which renders the content of the badge.

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Custom Template",
            badge: {
                template: (data) => `<strong>${data.value}</strong>`,
                text: "NEW"
            }
        },
        {
            text: "Function Template",
            badge: {
                template: function(data) {
                    return `<i class="k-icon k-i-star"></i> ${data.value}`;
                },
                text: "5"
            }
        }
    ]
});
</script>

items.badge.text

String|Number

The text of the badge. Valid input includes string, number or object with toString method. Default is empty string.

Default: ''

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "String Text",
            badge: {
                text: "NEW"
            }
        },
        {
            text: "Number Text",
            badge: {
                text: 42
            }
        },
        {
            text: "Object Text",
            badge: {
                text: { toString: function() { return "OBJ"; } }
            }
        }
    ]
});
</script>

items.badge.themeColor

String

Specifies the color of the component. If undefined (the default), the theme controls the default color.

Valid options are inherit, default, primary, secondary, tertiary, info, success, warning, error, inverted.

Default: undefined

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Primary",
            badge: {
                text: "1",
                themeColor: "primary"
            }
        },
        {
            text: "Success",
            badge: {
                text: "2",
                themeColor: "success"
            }
        },
        {
            text: "Warning",
            badge: {
                text: "3",
                themeColor: "warning"
            }
        },
        {
            text: "Error",
            badge: {
                text: "4",
                themeColor: "error"
            }
        }
    ]
});
</script>

items.badge.visible

Boolean

If set to false the badge will not be displayed.

Default: true

<div id="buttonGroup"></div>
<script>
$("#buttonGroup").kendoButtonGroup({
    items: [
        {
            text: "Visible Badge",
            badge: {
                text: "SHOW",
                visible: true
            }
        },
        {
            text: "Hidden Badge",
            badge: {
                text: "HIDE",
                visible: false
            }
        }
    ]
});
</script>