Badge
Components
A badge is a small visual indicator that displays short, dynamic information like counts or status. It typically appears as a colored circle or pill shape, often overlaid on other elements.
Checklist
Reset
Detail
A badge can have a numeric value, or a basic shape
A basic shape like a small circle is effective in conveying one update, while numeric value represents the amount of updates
Color
Badges can represent your standard states - error, success, warning
Be consistent in the details - outlines, shadows, perspective, corners and colours
Offset position
A badge should sit outside it's relevant element to gain attention easier
