The Badge is anchored to the top-right corner when attached to a child component such as a button. As the number of alphanumeric characters increases, the badge width expands but stays in the same place.

Use a badge 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.

To place a badge inline instead of in the top-right corner of an element, don't pass children to the badge.

• Using a badge inline with text clarifies which part of the content the badge relates to.
• Highlight specific details within the content to draw the user’s attention, such as using a badge inside a tab.

Specify the maximum displayed number with the max prop. If value exceeds max, it will clamp the value and append a (+) suffix.

• Without a max value, the component limits the value to three digits by default, displaying 999+ for any values over 999.

The value property can accept both a number and a string. When you pass a string, the badge will not clamp the value.

A dot badge is a circular dot that notifies users of changes in state.

• Be consistent with the badge's position in a group of elements.
• If there is a 3:1 contrast between the badge and the element it is attached to, the badge can be anchored to the element's contents.
• If the icon graphic has number on the right top, don't anchor the badge directly to it to avoid blocking the number.

Similarly to a regular badge, you can place a dot badge inline. To do this, do not pass children to the badge.