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 container—an 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 fromstaticand allowsoverflowcontent.
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.inside—The Badge is positioned entirely inside the edge of the parent container element.outside—The Badge is positioned entirely outside the edge of the parent container element.
Example
View Source
Edit In Stackblitz
Change Theme:
