Badge
When to use Badge over similar components, and how to choose tone and weight.
Alternatives
- Tag — Use tags to label, categorise or classify items using keywords
Badge
Use badges to highlight an item's status for quick recognition. Badges should contain short easy-to-scan text. Use sentence case for the badge's label.
weight
Use "subtle" weight badges by default, and in instances where they may dominate the screen, such as tables. Use "text" badges for a lower emphasis badge without a background or border. Reserve "bold" badges for occasions where you must grab the user's attention.
NotificationBadge
A notification badge is a visual indicator for numeric values such as tallies and scores.
max
Use the max property where the count is expected to exceed a reasonable
number, and the exact count is not particularly valuable to the user.
IndicatorDot
A small decorative indicator used to call attention to an item.