When to use
Use a badge to communicate a status, typically with a number, related to a child UI element. An example use case would be to display a specific amount of actionable items, for instance messages. As mentioned, a badge is always related to a child element allowing the user to navigate to the area where the status applies to.
Position
The badge can be positioned before or after the child element. It can either place directly next to the child element or with an overlap (top right or top left corner). Usually a badge is attached to the child element with an overlap, creating a clear grouping of the two items.
Size
Badges come in a small, medium and large size to be able to adapt to different context. However, the small size is usually sufficient.