Working together for the ultimate brand experience

Royal Canin Design Language

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!