<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

Deprecated! Use badge.shape instead.For compatibility badge.appearance maps to badge.shape.

Example

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

badgeStyle java.lang.String

Specifies the structure of a badge. Valid options are solid (default) and outline.

Example

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

color 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 color="color">
</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>

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>

look java.lang.String

Deprecated! Use badge.badgeStyle instead.For compatibility badge.look maps to badge.badgeStyle.

Example

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

max float

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

Example

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

overlay boolean

Deprecated! Use badge.position instead.There is no built in mapping between badge.overlay and badge.position: badge.overlay: false can be achieved by setting badge.position: "inline" or badge.overlay: true can be achieved by setting badge.position: "top end", or not setting it at all.. For compatibility badge.overlay is kept, even though it has no effect on the badge.

Example

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

placement java.lang.String

Specifies position of the badge relative to the edge of the button. Valid placemnt options are: edge, inside, outside.Note: placement configuration requires the badge to be positioned. See badge.position for more details.

Example

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

position java.lang.String

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

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>

type java.lang.String

Deprecated! Use badge.color instead.For compatibility badge.type maps to badge.color.

Example

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

value java.lang.Object

Deprecated! Use badge.text instead.For compatibility badge.value maps to badge.text.

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?