diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 8fe3443a60ba75552cd97e81bb3f9aee3a6b7657..d2bea9209d7dcc4a6c0c65ed42221c329e5d28fe 100644
--- a/docs/templates/pages/base-css.mustache
+++ b/docs/templates/pages/base-css.mustache
@@ -1205,6 +1205,11 @@
         <td><a class="btn btn-danger" href="#">{{_i}}Danger{{/i}}</a></td>
         <td><code>.btn-danger</code></td>
         <td>{{_i}}Indicates a dangerous or potentially negative action{{/i}}</td>
+      </tr>
+	  <tr>
+        <td><a class="btn btn-dark" href="#">{{_i}}Dark{{/i}}</a></td>
+        <td><code>.btn-dark</code></td>
+        <td>{{_i}}Indicates a potential abort or black magic{{/i}}</td>
       </tr>
     </tbody>
   </table>
diff --git a/less/button-groups.less b/less/button-groups.less
index 4b0523df2952ee19d89a1e447e8104ab1e12f2df..d8957c52d7f61d56225416aedf902804bd626fb5 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -133,7 +133,8 @@
 .btn-primary,
 .btn-danger,
 .btn-info,
-.btn-success {
+.btn-success,
+.btn-dark {
   .caret {
     border-top-color: @white;
     .opacity(75);
diff --git a/less/buttons.less b/less/buttons.less
index 880d1f64a4360e8621c83d19fd8eee7733d26923..4c508d7fe02a79c113017a66600086d3bd65e6d4 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -107,7 +107,9 @@
 .btn-success,
 .btn-success:hover,
 .btn-info,
-.btn-info:hover {
+.btn-info:hover,
+.btn-dark,
+.btn-dark:hover {
   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
   color: @white;
 }
@@ -116,7 +118,8 @@
 .btn-warning.active,
 .btn-danger.active,
 .btn-success.active,
-.btn-info.active {
+.btn-info.active,
+.btn-dark.active {
   color: rgba(255,255,255,.75);
 }
 
@@ -141,6 +144,10 @@
 .btn-info {
   .buttonBackground(#5bc0de, #2f96b4);
 }
+// Dark appears as black
+.btn-dark {
+  .buttonBackground(#454545, #262626);
+}
 
 
 // Cross-browser Jank