jube-fork/Jube.App/wwwroot/kendo/examples/mobile-button/badges.html

<div data-role="view" id="button-badge" data-title="Button Badges" data-use-native-scrolling="true">
    <ul data-role="listview" data-type="group">
        <li>
            Inline Buttons
            <ul>
                <li>
                    <i></i> <a data-role="button" data-animated="true" data-badge="9" data-click="changeBadge" >Default Button</a>
                </li>
                <li>
                    <i></i> <a data-role="button" data-badge="3" data-click="changeBadge" class="km-primary" >Primary Button</a>
                </li>
                <li>
                    <i></i> <a data-role="button" data-animated="true" data-badge="33" data-click="changeBadge" disabled >Disabled Button</a>
                </li>
            </ul>
        </li>
        
        <li>
            Justified Buttons
            <ul>
                <li>
                    <i></i> <a data-role="button" data-animated="true" data-badge="9" data-click="changeBadge" class="km-justified" >Default Button</a>
                </li>
                <li>
                    <i></i> <a data-role="button" data-badge="3" data-click="changeBadge" class="km-primary km-justified" >Primary Button</a>
                </li>
                <li>
                    <i></i> <a data-role="button" data-animated="true" data-badge="33" data-click="changeBadge" disabled  class="km-justified" >Disabled Button</a>
                </li>
            </ul>
        </li>
    </ul>
</div>

<style>
#button-badge .button {
    margin-left: 1em;
    text-align: center;
}
#button-home .head,
#facility .head,
#sports .head {
	display: block;
	margin: 1em;
	height: 120px;
    -webkit-background-size: 100% auto;
    background-size: 100% auto;
}
.km-ios .head,
.km-blackberry .head {
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
</style>

<script>
    function changeBadge() {
        this.badge(Math.floor(Math.random()*150));
    }
</script>