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

Position

configuration

Specifies position of the badge relative to the edge of the container. Valid options are:

inline: positions the badge inside the container, next to the text.
edge: the center of the badge is positioned on the edge of the container.
inside: the badge is entirely positioned inside the container.
outside: the badge is entirely positioned oustide the container.

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

position

String

Default: 'inline'

<button class="k-button">Inline badge <span id="badge-inline"></span></button>
<button class="k-button">Inside badge <span id="badge-inside"></span></button>
<button class="k-button">Edge badge <span id="badge-edge"></span></button>
<button class="k-button">Outside badge <span id="badge-outside"></span></button>
<script>
    $('#badge-inline').kendoBadge({position: 'inline', themeColor: 'primary'});
    $('#badge-inside').kendoBadge({align: 'top end', position: 'inside', themeColor: 'primary'});
    $('#badge-edge').kendoBadge({align: 'top end', position: 'edge', themeColor: 'primary'});
    $('#badge-outside').kendoBadge({align: 'top end', position: 'outside', themeColor: 'primary'});
</script>