Overview

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

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.

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.
• 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 Component
• API Reference of the Badge Container Component