<kendo:button-badge>

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.

Example

<kendo:button>
    <kendo:button-badge></kendo:button-badge>
</kendo:button>

Configuration Attributes

align java.lang.String

Specifies alignment of the badge relative to button. Valid position options are: top start, top end, bottom start, bottom end. works in conjunction with badge.position.

Example

<kendo:button-badge align="align">
</kendo:button-badge>

cutoutBorder boolean

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

Example

<kendo:button-badge cutoutBorder="cutoutBorder">
</kendo:button-badge>

fill java.lang.String

Specifies how theme colors apply to a badge. Valid options are solid (default) and outline.

Example

<kendo:button-badge fill="fill">
</kendo:button-badge>

icon java.lang.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.

Example

<kendo:button-badge icon="icon">
</kendo:button-badge>

max float

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

Example

<kendo:button-badge max="max">
</kendo:button-badge>

position java.lang.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 badge.align for more details.

Example

<kendo:button-badge position="position">
</kendo:button-badge>

shape java.lang.String

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

Example

<kendo:button-badge shape="shape">
</kendo:button-badge>

size java.lang.String

Specifies the size of the badge. Valid options are small, medium and large.

Example

<kendo:button-badge size="size">
</kendo:button-badge>

template java.lang.String

The template which renders the content of the badge.

Example

<kendo:button-badge template="template">
</kendo:button-badge>

text java.lang.Object

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

Example

<kendo:button-badge text="text">
</kendo:button-badge>

themeColor java.lang.String

Specifies the color of the component. Valid options are inherit, default, primary, secondary, tertiary, info, success, warning, error, dark, light, inverted.

Example

<kendo:button-badge themeColor="themeColor">
</kendo:button-badge>

visible boolean

If set to false the badge will not be displayed.

Example

<kendo:button-badge visible="visible">
</kendo:button-badge>

Event Attributes

template String

The template which renders the content of the badge.

Example

<kendo:button-badge template="handle_template">
</kendo:button-badge>
<script>
    function handle_template(e) {
        // Code to handle the template event.
    }
</script>

Event Tags

kendo:button-badge-template

The template which renders the content of the badge.

Example

<kendo:button-badge>
    <kendo:button-badge-template>
        <script>
            function(e) {
                // Code to handle the template event.
            }
        </script>
    </kendo:button-badge-template>
</kendo:button-badge>
In this article
Not finding the help you need?