Overview

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

Example
View Source
Edit In Stackblitz  
Change Theme:

Alignment

The Badge allows you to set different alignments relative to its parent container.

The available align keys are:

  • horizontal Defines the possible horizontal alignment of the Badge.
    • startUses the start point of the parent element.
    • end(Default)Uses the end point of the parent element.
  • vertical Defines the possible vertical alignment of the Badge.
    • top(Default)Uses the top point of the parent element.
    • bottomUses the bottom point of the parent element.

When using the Badge component without the BadgeContainer component, make sure the HTML element or React component that 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.
  • insideThe badge is positioned entirely inside the parent container.
  • outsideThe badge is positioned entirely outside the parent container.
Example
View Source
Edit In Stackblitz  
Change Theme:

In this article

Not finding the help you need?