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

Align

configuration

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

top start: positions the badge at top left corner of the container; top right in RTL mode.
top end: positions the badge at top right corner of the container; top left in RTL mode.
bottom start: positions the badge at bottom left corner of the container; bottom right in RTL mode.
bottom end: positions the badge at bottom right corner of the container; bottom right in RTL mode.

align works in conjunction with position.

Note: when using align, make sure the badge container has css position other than static and allows overflow content.

align

String

Default: ''

<button class="k-button">Top Start Badge <span id="badge-top-start"></span></button>
<button class="k-button">Top End Badge <span id="badge-top-end"></span></button>
<button class="k-button">Bottom Start Badge <span id="badge-bottom-start"></span></button>
<button class="k-button">Bottom End Badge <span id="badge-bottom-end"></span></button>
<script>
    $('#badge-top-start').kendoBadge({position: 'edge', align: 'top start', themeColor: 'primary'});
    $('#badge-top-end').kendoBadge({position: 'edge', align: 'top end', themeColor: 'primary'});
    $('#badge-bottom-start').kendoBadge({position: 'edge', align: 'bottom start', themeColor: 'primary'});
    $('#badge-bottom-end').kendoBadge({position: 'edge', align: 'bottom end', themeColor: 'primary'});
</script>