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.
Tone Use the tone property to indicate the intent of the badge.
< Inline gap = " small " >
< Badge tone = " neutral " label = " Draft " />
< Badge tone = " informative " label = " In progress " />
< Badge tone = " accent " label = " Pending " />
< Badge tone = " critical " label = " Rejected " />
< Badge tone = " positive " label = " Resolved " />
< Badge tone = " cautious " label = " Attention " />
</ Inline >
Weight Use "subtle" weight badges by default, and in instances where they may dominate the
screen, such as tables. Reserve "bold" badges for occasions where you must grab
the user's attention.
< Inline gap = " small " >
< Badge weight = " bold " tone = " neutral " label = " Draft " />
< Badge weight = " bold " tone = " informative " label = " In progress " />
< Badge weight = " bold " tone = " accent " label = " Pending " />
< Badge weight = " bold " tone = " critical " label = " Rejected " />
< Badge weight = " bold " tone = " positive " label = " Resolved " />
< Badge weight = " bold " tone = " cautious " label = " Attention " />
</ Inline >
NotificationBadge A notification badge is a visual indicator for numeric values such as tallies and scores.
< NotificationBadge value = { 123 } />
Tone Use the tone property to indicate the intent behind a given value.
< Inline gap = " small " >
< NotificationBadge tone = " neutral " value = { 12 } />
< NotificationBadge tone = " informative " value = { 23 } />
< NotificationBadge tone = " critical " value = { 34 } />
< NotificationBadge tone = " positive " value = { 45 } />
</ Inline >
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.
< NotificationBadge tone = " informative " max = { 99 } value = { 123 } />
IndicatorDot A small decorative indicator used to call attention to an item.
< Inline gap = " large " >
< IndicatorDot tone = " neutral " />
< IndicatorDot tone = " informative " />
< IndicatorDot tone = " critical " />
< IndicatorDot tone = " positive " />
</ Inline >
Label When the intent isn't provided by text, you must supply an "aria-label" for assistive tech users.
< button type = " button " >
< Inline gap = " small " alignY = " center " >
< Text > Action item </ Text >
< IndicatorDot tone = " critical " aria-label = " Contains issues " />
</ Inline >
</ button >
