Badges

Complete badge system — 13 colour variants × 8 content configurations × 3 sizes + status banners.

Text Only

Small .badge .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Default .badge .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Large .badge .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label

With Dot

Small .badge + <span class="badge__dot"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Default .badge + <span class="badge__dot"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Large .badge + <span class="badge__dot"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label

With Icon Left

Small .badge + <span class="badge__icon"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Default .badge + <span class="badge__icon"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Large .badge + <span class="badge__icon"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label

With Arrow

Small .badge + <span class="badge__arrow"> .badge--{variant}
Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label →
Default .badge + <span class="badge__arrow"> .badge--{variant}
Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label →
Large .badge + <span class="badge__arrow"> .badge--{variant}
Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label → Label →

Dismissible

Small .badge + <button class="badge__dismiss"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Default .badge + <button class="badge__dismiss"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Large .badge + <button class="badge__dismiss"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label

With Avatar

Small .badge + <img class="badge__avatar"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Default .badge + <img class="badge__avatar"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label
Large .badge + <img class="badge__avatar"> .badge--{variant}
Label Label Label Label Label Label Label Label Label Label Label Label Label

With Flag

Small .badge + <span class="badge__flag"> .badge--{variant}
🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label
Default .badge + <span class="badge__flag"> .badge--{variant}
🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label
Large .badge + <span class="badge__flag"> .badge--{variant}
🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label 🇦🇺Label

Icon Only

Small .badge .badge--icon-only .badge--{variant}
Default .badge .badge--icon-only .badge--{variant}
Large .badge .badge--icon-only .badge--{variant}

Status Banners

Message + Badge right .status-banner .status-banner--{variant}
We've just released a new feature New feature
We've just released a new feature New feature →
We've just released a new feature New feature
We've just released a new feature New feature →
There was a problem with that action Fix now
There was a problem with that action Fix now →
Just to let you know this might be a problem Warning
Just to let you know this might be a problem Warning →
You've updated your profile and details Success
You've updated your profile and details Success →
Badge left + Message .status-banner .status-banner--{variant} — badge first
New feature We've just released a new feature →
New feature We've just released a new feature →
Error There was a problem with that action →
Warning Just to let you know this might be a problem →
Success You've updated your profile and details →