diff --git a/public/less/components/_tags.scss b/public/less/components/_tags.scss
index c0aa1bd23a5..0eda40f9a08 100644
--- a/public/less/components/_tags.scss
+++ b/public/less/components/_tags.scss
@@ -37,3 +37,24 @@
   background-color: darken($purple, 10%);
 }
 
+
+// Colors
+// Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
+.label,
+.badge {
+  // Important (red)
+  &-important         { background-color: $errorText; }
+  &-important[href]   { background-color: darken($errorText, 10%); }
+  // Warnings (orange)
+  &-warning           { background-color: $orange; }
+  &-warning[href]     { background-color: darken($orange, 10%); }
+  // Success (green)
+  &-success           { background-color: $successText; }
+  &-success[href]     { background-color: darken($successText, 10%); }
+  // Info (turquoise)
+  &-info              { background-color: $infoText; }
+  &-info[href]        { background-color: darken($infoText, 10%); }
+  // Inverse (black)
+  &-inverse           { background-color: $grayDark; }
+  &-inverse[href]     { background-color: darken($grayDark, 10%); }
+}