Badge

Also known as

Tag, Label, Chip

Badge is a numeric or alpha character annotation. It appears either in the top-right corner of an element, or inline.

Density
Mode

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.