diff --git a/docs/components/badge.md b/docs/components/badge.md
index 71b550f3b6..55a6df4f7d 100644
--- a/docs/components/badge.md
+++ b/docs/components/badge.md
@@ -41,10 +41,10 @@ Add any of the below mentioned modifier classes to change the appearance of a ba
 Use the `.badge-pill` modifier class to make badges more rounded (with a larger `border-radius` and additional horizontal `padding`). Useful if you miss the badges from v3.
 
 {% example html %}
-<span class="badge badge-pill tag-default">Default</span>
-<span class="badge badge-pill tag-primary">Primary</span>
-<span class="badge badge-pill tag-success">Success</span>
-<span class="badge badge-pill tag-info">Info</span>
-<span class="badge badge-pill tag-warning">Warning</span>
-<span class="badge badge-pill tag-danger">Danger</span>
+<span class="badge badge-pill badge-default">Default</span>
+<span class="badge badge-pill badge-primary">Primary</span>
+<span class="badge badge-pill badge-success">Success</span>
+<span class="badge badge-pill badge-info">Info</span>
+<span class="badge badge-pill badge-warning">Warning</span>
+<span class="badge badge-pill badge-danger">Danger</span>
 {% endexample %}
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index a043474558..bc7c8b1948 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -25,22 +25,22 @@ The most basic list group is simply an unordered list with list items, and the p
 </ul>
 {% endexample %}
 
-## Tags
+## Badge
 
-Add tags to any list group item to show unread counts, activity, etc.
+Add badges to any list group item to show unread counts, activity, etc.
 
 {% example html %}
 <ul class="list-group">
   <li class="list-group-item">
-    <span class="badge badge-default tag-pill float-xs-right">14</span>
+    <span class="badge badge-default badge-pill float-xs-right">14</span>
     Cras justo odio
   </li>
   <li class="list-group-item">
-    <span class="badge badge-default tag-pill float-xs-right">2</span>
+    <span class="badge badge-default badge-pill float-xs-right">2</span>
     Dapibus ac facilisis in
   </li>
   <li class="list-group-item">
-    <span class="badge badge-default tag-pill float-xs-right">1</span>
+    <span class="badge badge-default badge-pill float-xs-right">1</span>
     Morbi leo risus
   </li>
 </ul>
diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss
index 5196ab65e1..853a46bfc5 100644
--- a/scss/mixins/_buttons.scss
+++ b/scss/mixins/_buttons.scss
@@ -58,21 +58,21 @@
   }
 }
 
-@mixin button-outline-variant($color) {
+@mixin button-outline-variant($color, $color-hover: #fff) {
   color: $color;
   background-image: none;
   background-color: transparent;
   border-color: $color;
 
   @include hover {
-    color: #fff;
+    color: $color-hover;
     background-color: $color;
         border-color: $color;
   }
 
   &:focus,
   &.focus {
-    color: #fff;
+    color: $color-hover;
     background-color: $color;
         border-color: $color;
   }
@@ -80,14 +80,14 @@
   &:active,
   &.active,
   .open > &.dropdown-toggle {
-    color: #fff;
+    color: $color-hover;
     background-color: $color;
         border-color: $color;
 
     &:hover,
     &:focus,
     &.focus {
-      color: #fff;
+      color: $color-hover;
       background-color: darken($color, 17%);
           border-color: darken($color, 25%);
     }