placement String (default: 'edge')

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

  • 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: placement configuration requires the badge to be positioned. See position for more details.

Example

<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-inside').kendoBadge({position: 'top end', placement: 'inside'});
    $('#badge-edge').kendoBadge({position: 'top end', placement: 'edge'});
    $('#badge-outside').kendoBadge({position: 'top end', placement: 'outside'});
</script>
In this article
Not finding the help you need? Improve this article