just use .badge

components.html

@@ -572,16 +572,16 @@ base_url: "../"
 
     <div class="component-example">
       <a class="btn">Badge button <span class="badge">1</span></a>
-      <a class="btn btn-primary">Badge button <span class="badge-primary">1</span></a>
-      <a class="btn btn-positive">Badge button <span class="badge-positive">1</span></a>
-      <a class="btn btn-negative">Badge button <span class="badge-negative">1</span></a>
+      <a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
+      <a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
+      <a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
     </div>
 
 {% highlight html %}
 <a class="btn">Badge button <span class="badge">1</span></a>
-<a class="btn btn-primary">Badge button <span class="badge-primary">1</span></a>
-<a class="btn btn-positive">Badge button <span class="badge-positive">1</span></a>
-<a class="btn btn-negative">Badge button <span class="badge-negative">1</span></a>
+<a class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></a>
+<a class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></a>
+<a class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></a>
 
 <a class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></a>
 <a class="btn btn-outlined btn-primary">Badge button <span class="badge-primary badge-inverted">1</span></a>
@@ -673,25 +673,25 @@ base_url: "../"
 
     <div class="component-example">
       <span class="badge">1</span>
-      <span class="badge-primary">2</span>
-      <span class="badge-positive">3</span>
-      <span class="badge-negative">4</span>
+      <span class="badge badge-primary">2</span>
+      <span class="badge badge-positive">3</span>
+      <span class="badge badge-negative">4</span>
       <span class="badge badge-inverted">1</span>
-      <span class="badge-primary badge-inverted">2</span>
-      <span class="badge-positive badge-inverted">3</span>
-      <span class="badge-negative badge-inverted">4</span>
+      <span class="badge badge-primary badge-inverted">2</span>
+      <span class="badge badge-positive badge-inverted">3</span>
+      <span class="badge badge-negative badge-inverted">4</span>
     </div>
 
 {% highlight html %}
 <span class="badge">1</span>
-<span class="badge-primary">2</span>
-<span class="badge-positive">3</span>
-<span class="badge-negative">4</span>
+<span class="badge badge-primary">2</span>
+<span class="badge badge-positive">3</span>
+<span class="badge badge-negative">4</span>
 
 <span class="badge badge-inverted">1</span>
-<span class="badge-primary badge-inverted">2</span>
-<span class="badge-positive badge-inverted">3</span>
-<span class="badge-negative badge-inverted">4</span>
+<span class="badge badge-primary badge-inverted">2</span>
+<span class="badge badge-positive badge-inverted">3</span>
+<span class="badge badge-negative badge-inverted">4</span>
 {% endhighlight %}
 
   </article>

dist/ratchet.css

@@ -327,7 +327,7 @@ strong {
   white-space: nowrap;
 }
 
-> a:not(".btn") {
+> a:not(.btn) {
   display: block;
   width: 100%;
   height: 100%;
@@ -405,14 +405,14 @@ strong {
 .table-view .table-view-cell:last-child {
   border-bottom: 0;
 }
-.table-view .table-view-cell > a:not(".btn") {
+.table-view .table-view-cell > a:not(.btn) {
   position: relative;
   display: block;
   padding: inherit;
   margin: -11px -60px -12px -15px;
   color: inherit;
 }
-.table-view .table-view-cell > a:not(".btn"):active {
+.table-view .table-view-cell > a:not(.btn):active {
   background-color: #eee;
 }
 .table-view .table-view-cell p {
@@ -466,11 +466,11 @@ strong {
   padding-left: 59px;
   background-position-x: 59px;
 }
-.table-view-indented .table-view-cell > a:not(".btn") {
+.table-view-indented .table-view-cell > a:not(.btn) {
   margin-left: -59px;
 }
 .table-view-indented .table-view-cell > .pull-left,
-.table-view-indented .table-view-cell > a:not(".btn") .pull-left {
+.table-view-indented .table-view-cell > a:not(.btn) .pull-left {
   position: absolute;
   left: 15px;
   z-index: 1;

lib/sass/bars.scss

@@ -62,7 +62,7 @@
   white-space: nowrap;
 }
 
-> a:not(".btn") {
+> a:not(.btn) {
   display: block;
   width: 100%;
   height: 100%;

lib/sass/table-views.scss

@@ -19,7 +19,7 @@
       border-bottom: 0;
     }
     // If it's a table view of links, make sure the child <a> takes up full table view item tap area (want to avoid selecting child buttons though)
-    > a:not(".btn") {
+    > a:not(.btn) {
       position: relative;
       display: block;
       padding: inherit;
@@ -106,12 +106,12 @@
   padding-left: 59px;
   background-position-x: 59px; // Make room for your left aligned media/icons.
 
-  > a:not(".btn") {
+  > a:not(.btn) {
     margin-left: -59px;
   }
 
   > .pull-left,
-  > a:not(".btn") .pull-left {
+  > a:not(.btn) .pull-left {
     position: absolute;
     left: 15px;
     z-index: 1;