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
html
            <span class="rc-badge"></span>
<span class="rc-badge">2</span>
<span class="rc-badge">344</span>
        
Error Warning Success
html
            <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
html
            <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>
        

Issues

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

Github Octocat

Feedback

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