Notice: the Design Language has been migrated - You will find the new URL to call the assets from the current Design Language.
See more details regarding this Migration
Badges
Notification badges are used for highlighting totals or messages within items such as baskets, user account areas or applications. They are flexible to show numbers between 1 and 3 digits in length by transforming from a circle for 1 digit to an expandable pill shape for 2+ digits.
2
344
<span class="rc-badge"></span>
<span class="rc-badge">2</span>
<span class="rc-badge">344</span>Copied!
Error
Warning
Success
<span class="rc-badge rc-badge--error">Error</span>
<span class="rc-badge rc-badge--warning">Warning</span>
<span class="rc-badge rc-badge--success">Success</span>Copied!
Non interactive icon
<span class="rc-badge--icon-label rc-icon rc-advice--xs rc-iconography">Help</span>
<span class="rc-badge--icon-label rc-icon rc-user--xs rc-iconography">My Account</span>Copied!