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.

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.

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.

Suggested Links

• API Reference of the Badge
• API Reference of the BadgeContainer