position String (default: 'inline')

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

  • inline: positions the badge inside the container, next to the text.
  • 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.

position works in conjunction with placement.

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

Example

<button class="k-button">Inline Badge <span id="badge-inline"></span></button>
<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-inline').kendoBadge({position: 'inline'});
    $('#badge-top-start').kendoBadge({position: 'top start'});
    $('#badge-top-end').kendoBadge({position: 'top end'});
    $('#badge-bottom-start').kendoBadge({position: 'bottom start'});
    $('#badge-bottom-end').kendoBadge({position: 'bottom end'});
</script>
In this article
Not finding the help you need? Improve this article