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>
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>

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>


If you are having problems implementing this code, please submit an issue on our Github page.

Github Octocat


If you would like to offer feedback on the design of this component, please send an email requesting access to the Design Language Slack channel.

Slack logo