Overview

The Badge component provides options for aligning and positioning in relation to its parent container - HTML element or Angular Component.

Example
View Source
Edit In Stackblitz  
Change Theme:

Align

The Badge allows you to set an alignment, relative to its parent container.

The available align values are:

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

When using the Badge component without the BadgeContainer component, make sure the HTML element or Angular component which contains a badge has css position other than 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 relative 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?