Interface BadgeProps

The element the badge attaches to. The badge is positioned relative to this content.

CSS Class name for additional styles.

The value shown inside the badge, typically a notification counter. When null, undefined or an empty string, the badge is not rendered (only the children are shown).

Value for the data-test-id attribute on the badge element.

Caps a numeric content. When the number is greater than max, ${max}+ is displayed (e.g. max={99} renders 99+ for 100). Ignored when content is a string.

The distance the badge is inset from the corner it attaches to. A number is interpreted as pixels, a string is used as-is (e.g. '0.5rem').

Only applies when overlap is false, i.e. when the badge is positioned within the bounds of the wrapped component. Ignored otherwise.

When true, the badge sits on the corner and half-overflows outside the bounds of the wrapped component (typical for notification counters). When false, the badge sits flush inside the corner.

The corner of the wrapped component the badge attaches to.