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

Help My Account
<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!