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

Alignment and Positioning

The Badge provides options for aligning and positioning it in relation to its parent containeran HTML element or an Angular Component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Alignment

The Badge allows you to align it in relation to its parent container.

The available align values are:

  • { vertical: 'top', horizontal: 'end' }(Default) Aligns the Badge to the top-right corner of the container.
  • { vertical: 'top', horizontal: 'start' }Aligns the Badge to the top-left corner of the container.
  • { vertical: 'bottom', horizontal: 'start' }Aligns the Badge to the bottom-left corner of the container.
  • { vertical: 'bottom', horizontal: 'end' }Aligns the Badge to the bottom-right corner of the container.

When you use the Badge without the BadgeContainer, make sure that the CSS position of the HTML element or Angular component which contains a badge is different from static and allows overflow content.

Example
View Source
Edit In Stackblitz  
Change Theme:

Position

The Badge allows you to specify the position of the badge in relation to the edge of its parent container.

The available position values are:

  • edge(Default) The center of the Badge is positioned on the edge of the parent container element.
  • insideThe Badge is positioned entirely inside the edge of the parent container element.
  • outsideThe Badge is positioned entirely outside the edge of the parent container element.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?