OverlayBadge
A badge on the corner of an icon, a button or an avatar.
Basic
Wrap any content. ariaLabel tells screen readers what the number means; it is read together with the button.
Max
max turns big numbers into 99+.
Dot
Without a value the badge is a dot — "something new".
Severities
Every badge severity; danger by default.
Sizes
small, medium, large and xlarge — pick one that fits the content.
Avatar
shape="circle" moves the badge to the edge of a round picture — a status dot or a count.
Zero
A zero hides the badge; showZero keeps it, hidden hides it on purpose.
Design tokens
[dt] changes the overlayBadge tokens — here a thicker ring and an offset.