diff --git a/docs/components.html b/docs/components.html
index 960dc61..44e85db 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -61,24 +61,24 @@ title: Components · Ratchet
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
-          <a class="btn pull-left">
+          <button class="btn pull-left">
             Left
-          </a>
-          <a class="btn pull-right">
+          </button>
+          <button class="btn pull-right">
             Right
-          </a>
+          </button>
           <h1 class="title">Title</h1>
         </header>
       </div>
 
 {% highlight html %}
 <header class="bar bar-nav">
-  <a class="btn pull-left">
+  <button class="btn pull-left">
     Left
-  </a>
-  <a class="btn pull-right">
+  </button>
+  <button class="btn pull-right">
     Right
-  </a>
+  </button>
   <h1 class="title">Title</h1>
 </header>
 {% endhighlight %}
@@ -113,28 +113,28 @@ title: Components &middot; Ratchet
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
-          <a class="btn btn-link btn-nav pull-left">
+          <button class="btn btn-link btn-nav pull-left">
             <span class="icon icon-left-nav"></span>
             Left
-          </a>
-          <a class="btn btn-link btn-nav pull-right">
+          </button>
+          <button class="btn btn-link btn-nav pull-right">
             Right
             <span class="icon icon-right-nav"></span>
-          </a>
+          </button>
           <h1 class="title">Title</h1>
         </header>
       </div>
 
 {% highlight html %}
 <header class="bar bar-nav">
-  <a class="btn btn-link btn-nav pull-left">
+  <button class="btn btn-link btn-nav pull-left">
     <span class="icon icon-left-nav"></span>
     Left
-  </a>
-  <a class="btn btn-link btn-nav pull-right">
+  </button>
+  <button class="btn btn-link btn-nav pull-right">
     Right
     <span class="icon icon-right-nav"></span>
-  </a>
+  </button>
   <h1 class="title">Title</h1>
 </header>
 {% endhighlight %}
@@ -147,10 +147,10 @@ title: Components &middot; Ratchet
 
       <div class="component-example component-example-fullbleed">
         <header class="bar bar-nav">
-          <a class="btn pull-left">
+          <button class="btn pull-left">
             Left
-          </a>
-          <a class="btn pull-right">
+          </button>
+          <button class="btn pull-right">
             Right
           </a>
           <div class="segmented-control">
@@ -163,12 +163,12 @@ title: Components &middot; Ratchet
 
 {% highlight html %}
 <header class="bar bar-nav">
-  <a class="btn pull-left">
+  <button class="btn pull-left">
     Left
   </a>
-  <a class="btn pull-right">
+  <button class="btn pull-right">
     Right
-  </a>
+  </button>
   <div class="segmented-control">
     <a class="control-item active">One</a>
     <a class="control-item">Two</a>
@@ -287,7 +287,7 @@ title: Components &middot; Ratchet
 
         <!-- Block button in standard bar fixed below top bar -->
         <div class="bar bar-standard bar-header-secondary">
-          <a class="btn btn-block">Block level button</a>
+          <button class="btn btn-block">Block level button</button>
         </div>
       </div>
 
@@ -303,12 +303,12 @@ title: Components &middot; Ratchet
 
 <!-- Block button in standard bar fixed below top bar -->
 <div class="bar bar-standard bar-header-secondary">
-  <a class="btn btn-block">Block level button</a>
+  <button class="btn btn-block">Block level button</button>
 </div>
 
 <!-- Block button in standard bar fixed above the footer -->
 <div class="bar bar-standard bar-footer-secondary">
-  <a class="btn btn-block">Block level button</a>
+  <button class="btn btn-block">Block level button</button>
 </div>
 
 <!-- Icons in standard bar fixed to the bottom of the screen -->
@@ -639,19 +639,19 @@ title: Components &middot; Ratchet
 
     <div class="component-example component-example-fullbleed">
       <ul class="table-view">
-        <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
-        <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
-        <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
-        <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
+        <li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
+        <li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
+        <li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
+        <li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
       </ul>
     </div>
 
 {% highlight html %}
 <ul class="table-view">
-  <li class="table-view-cell">Item 1 <a class="btn">Button</a></li>
-  <li class="table-view-cell">Item 2 <a class="btn btn-primary">Button</a></li>
-  <li class="table-view-cell">Item 3 <a class="btn btn-positive">Button</a></li>
-  <li class="table-view-cell">Item 4 <a class="btn btn-negative">Button</a></li>
+  <li class="table-view-cell">Item 1 <button class="btn">Button</button></li>
+  <li class="table-view-cell">Item 2 <button class="btn btn-primary">Button</button></li>
+  <li class="table-view-cell">Item 3 <button class="btn btn-positive">Button</button></li>
+  <li class="table-view-cell">Item 4 <button class="btn btn-negative">Button</button></li>
 </ul>
 {% endhighlight %}
 
@@ -744,29 +744,29 @@ title: Components &middot; Ratchet
     <p class="component-description">Buttons come in many flavors and should be used for user actions.</p>
 
     <div class="component-example">
-      <a class="btn">Button</a>
-      <a class="btn btn-primary">Button</a>
-      <a class="btn btn-positive">Button</a>
-      <a class="btn btn-negative">Button</a>
-      <a class="btn btn-link">Button</a>
-
-      <a class="btn btn-outlined">Button</a>
-      <a class="btn btn-primary btn-outlined">Button</a>
-      <a class="btn btn-positive btn-outlined">Button</a>
-      <a class="btn btn-negative btn-outlined">Button</a>
+      <button class="btn">Button</button>
+      <button class="btn btn-primary">Button</button>
+      <button class="btn btn-positive">Button</button>
+      <button class="btn btn-negative">Button</button>
+      <button class="btn btn-link">Button</button>
+
+      <button class="btn btn-outlined">Button</a>
+      <button class="btn btn-primary btn-outlined">Button</button>
+      <button class="btn btn-positive btn-outlined">Button</button>
+      <button class="btn btn-negative btn-outlined">Button</button>
     </div>
 
 {% highlight html %}
-<a class="btn">Button</a>
-<a class="btn btn-primary">Button</a>
-<a class="btn btn-positive">Button</a>
-<a class="btn btn-negative">Button</a>
-<a class="btn btn-link">Button</a>
-
-<a class="btn btn-outlined">Button</a>
-<a class="btn btn-primary btn-outlined">Button</a>
-<a class="btn btn-positive btn-outlined">Button</a>
-<a class="btn btn-negative btn-outlined">Button</a>
+<button class="btn">Button</button>
+<button class="btn btn-primary">Button</button>
+<button class="btn btn-positive">Button</button>
+<button class="btn btn-negative">Button</button>
+<button class="btn btn-link">Button</button>
+
+<button class="btn btn-outlined">Button</a>
+<button class="btn btn-primary btn-outlined">Button</button>
+<button class="btn btn-positive btn-outlined">Button</button>
+<button class="btn btn-negative btn-outlined">Button</button>
 {% endhighlight %}
 
   </article>
@@ -777,49 +777,49 @@ title: Components &middot; Ratchet
     <p class="component-description">Ratchicons work inside buttons too.</p>
 
     <div class="component-example">
-      <a class="btn">
+      <button class="btn">
         <span class="icon icon-search"></span>
         Button
-      </a>
-      <a class="btn btn-primary">
+      </button>
+      <button class="btn btn-primary">
         <span class="icon icon-search"></span>
         Button
-      </a>
-      <a class="btn btn-positive">
+      </button>
+      <button class="btn btn-positive">
         <span class="icon icon-search"></span>
         Button
-      </a>
-      <a class="btn btn-negative">
+      </button>
+      <button class="btn btn-negative">
         <span class="icon icon-search"></span>
         Button
-      </a>
-      <a class="btn btn-link">
+      </button>
+      <button class="btn btn-link">
         <span class="icon icon-left"></span>
         Button
-      </a>
+      </button>
     </div>
 
 {% highlight html %}
-<a class="btn">
+<button class="btn">
   <span class="icon icon-search"></span>
   Button
-</a>
-<a class="btn btn-primary">
+</button>
+<button class="btn btn-primary">
   <span class="icon icon-search"></span>
   Button
-</a>
-<a class="btn btn-positive">
+</button>
+<button class="btn btn-positive">
   <span class="icon icon-search"></span>
   Button
-</a>
-<a class="btn btn-negative">
+</button>
+<button class="btn btn-negative">
   <span class="icon icon-search"></span>
   Button
-</a>
-<a class="btn btn-link">
+</button>
+<button class="btn btn-link">
   <span class="icon icon-left"></span>
   Button
-</a>
+</button>
 {% endhighlight %}
 
   </article>
@@ -828,22 +828,22 @@ title: Components &middot; Ratchet
     <h3 class="component-title">Buttons with badges</h3>
 
     <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 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>
+      <button class="btn">Badge button <span class="badge">1</span></button>
+      <button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
+      <button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
+      <button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
     </div>
 
 {% highlight html %}
-<a class="btn">Badge button <span class="badge">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 badge-primary badge-inverted">1</span></a>
-<a class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></a>
-<a class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></a>
+<button class="btn">Badge button <span class="badge">1</span></button>
+<button class="btn btn-primary">Badge button <span class="badge badge-primary">1</span></button>
+<button class="btn btn-positive">Badge button <span class="badge badge-positive">1</span></button>
+<button class="btn btn-negative">Badge button <span class="badge badge-negative">1</span></button>
+
+<button class="btn btn-outlined">Badge button <span class="badge badge-inverted">1</span></button>
+<button class="btn btn-outlined btn-primary">Badge button <span class="badge badge-primary badge-inverted">1</span></button>
+<button class="btn btn-outlined btn-positive">Badge button <span class="badge badge-positive badge-inverted">1</span></button>
+<button class="btn btn-outlined btn-negative">Badge button <span class="badge badge-negative badge-inverted">1</span></button>
 {% endhighlight %}
 
   </article>
@@ -852,27 +852,27 @@ title: Components &middot; Ratchet
     <h3 class="component-title">Block buttons</h3>
 
     <div class="component-example">
-      <a class="btn btn-block">Block button</a>
-      <a class="btn btn-primary btn-block">Block button</a>
-      <a class="btn btn-positive btn-block">Block button</a>
-      <a class="btn btn-negative btn-block">Block button</a>
-
-      <a class="btn btn-block btn-outlined">Block button</a>
-      <a class="btn btn-primary btn-block btn-outlined">Block button</a>
-      <a class="btn btn-positive btn-block btn-outlined">Block button</a>
-      <a class="btn btn-negative btn-block btn-outlined">Block button</a>
+      <button class="btn btn-block">Block button</button>
+      <button class="btn btn-primary btn-block">Block button</button>
+      <button class="btn btn-positive btn-block">Block button</button>
+      <button class="btn btn-negative btn-block">Block button</button>
+
+      <button class="btn btn-block btn-outlined">Block button</button>
+      <button class="btn btn-primary btn-block btn-outlined">Block button</button>
+      <button class="btn btn-positive btn-block btn-outlined">Block button</button>
+      <button class="btn btn-negative btn-block btn-outlined">Block button</button>
     </div>
 
 {% highlight html %}
-<a class="btn btn-block">Block button</a>
-<a class="btn btn-primary btn-block">Block button</a>
-<a class="btn btn-positive btn-block">Block button</a>
-<a class="btn btn-negative btn-block">Block button</a>
-
-<a class="btn btn-block btn-outlined">Block button</a>
-<a class="btn btn-primary btn-block btn-outlined">Block button</a>
-<a class="btn btn-positive btn-block btn-outlined">Block button</a>
-<a class="btn btn-negative btn-block btn-outlined">Block button</a>
+<button class="btn btn-block">Block button</button>
+<button class="btn btn-primary btn-block">Block button</button>
+<button class="btn btn-positive btn-block">Block button</button>
+<button class="btn btn-negative btn-block">Block button</button>
+
+<button class="btn btn-block btn-outlined">Block button</button>
+<button class="btn btn-primary btn-block btn-outlined">Block button</button>
+<button class="btn btn-positive btn-block btn-outlined">Block button</button>
+<button class="btn btn-negative btn-block btn-outlined">Block button</button>
 {% endhighlight %}
 
   </article>
@@ -961,7 +961,7 @@ title: Components &middot; Ratchet
         <input type="text" placeholder="Full name">
         <input type="search" placeholder="Search">
         <textarea rows="5"></textarea>
-        <a class="btn btn-positive btn-block">Choose existing</a>
+        <button class="btn btn-positive btn-block">Choose existing</button>
       </form>
     </div>
 
@@ -970,7 +970,7 @@ title: Components &middot; Ratchet
   <input type="text" placeholder="Full name">
   <input type="search" placeholder="Search">
   <textarea rows="5"></textarea>
-  <a class="btn btn-positive btn-block">Choose existing</a>
+  <button class="btn btn-positive btn-block">Choose existing</button>
 </form>
 {% endhighlight %}