By default, Badge is in the top-right corner when attached to a child component such as an icon. Badges visually anchor to the attached component. As the number of alphanumeric characters increases, the badge width expands, but stays in the same place.

Use a badge in the top-right corner to summarize the overall state of the content the badge is anchored to. For example, you may want to provide a quick overview of the number of new or unread items, using numeric values.