<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

appearance java.lang.String

Specifies the shape of the badge - rectangle or pill.

Example

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

look java.lang.String

Specifies the look of the badge - flat or outline.

Example

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

overlay boolean

If set to false the badge is displayed inside the button.

Example

<kendo:button-badge overlay="overlay">
</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>

type java.lang.String

Specifies the type of the badge - primary, secondary, info, success, warning and error.

Example

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

value java.lang.Object

The value of the badge

Example

<kendo:button-badge value="value">
</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?