From 8746e3523ef4f08f2cb751f69eca8b96258fcc06 Mon Sep 17 00:00:00 2001
From: Marcos Moura <marcosvmmoura@gmail.com>
Date: Wed, 23 Nov 2016 16:52:24 -0200
Subject: [PATCH] create button documentation with the new template

---
 docs/src/components/ApiTable.vue      |   2 +-
 docs/src/pages/components/Buttons.vue | 635 ++++++++++++++++----------
 src/components/mdButton/mdButton.scss |  30 +-
 src/components/mdButton/mdButton.vue  |   4 +-
 src/components/mdCard/mdCard.theme    |   9 +-
 5 files changed, 423 insertions(+), 257 deletions(-)

diff --git a/docs/src/components/ApiTable.vue b/docs/src/components/ApiTable.vue
index 800c352..ab1dfdf 100644
--- a/docs/src/components/ApiTable.vue
+++ b/docs/src/components/ApiTable.vue
@@ -2,7 +2,7 @@
   <div class="api-table">
     <h3 class="md-title">{{ name }}</h3>
 
-    <md-tabs class="md-transparent">
+    <md-tabs :md-dynamic-height="false" class="md-transparent">
       <md-tab class="api-tab" md-label="Properties" v-if="$slots.properties">
         <slot name="properties"></slot>
       </md-tab>
diff --git a/docs/src/pages/components/Buttons.vue b/docs/src/pages/components/Buttons.vue
index 1b65fcf..0fb3339 100644
--- a/docs/src/pages/components/Buttons.vue
+++ b/docs/src/pages/components/Buttons.vue
@@ -1,310 +1,459 @@
 <template>
-  <demo-page label="Components - Button">
-    <div slot="examples">
-      <demo-example label="Flat">
-        <md-button @click="disablePrimaryButton">Default</md-button>
-        <md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
-        <md-button class="md-accent">Accent</md-button>
-        <md-button class="md-warn">Warn</md-button>
-        <md-button class="md-primary" :disabled="!buttonDisabled">Disabled</md-button>
-        <md-button class="md-dense">Dense</md-button>
-      </demo-example>
+  <page-content page-title="Components - Button">
+    <docs-component>
+      <div slot="description">
+        <p>Buttons communicate the action that will occur when the user touches them.</p>
+        <ul class="md-body-2">
+          <li><code>md-primary</code></li>
+          <li><code>md-accent</code></li>
+          <li><code>md-warn</code></li>
+        </ul>
+      </div>
 
-      <demo-example label="Raised">
-        <md-button class="md-raised" @click="disablePrimaryButton">Default</md-button>
-        <md-button class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
-        <md-button class="md-raised md-accent">Accent</md-button>
-        <md-button class="md-raised md-warn">Warn</md-button>
-        <md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
-        <md-button class="md-raised md-dense">Dense</md-button>
-      </demo-example>
+      <div slot="api">
+        <api-table name="md-button">
+          <md-table slot="properties">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Type</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
 
-      <demo-example label="Themed">
-        <md-button class="md-raised md-primary" @click="disablePrimaryButton" v-md-theme="'indigo'">Indigo</md-button>
-        <md-button class="md-raised md-primary" :disabled="buttonDisabled" v-md-theme="'teal'">Teal</md-button>
-        <md-button class="md-raised md-primary" v-md-theme="'green'">Green</md-button>
-        <md-button class="md-raised md-primary" v-md-theme="'white'">White</md-button>
-        <md-button class="md-raised md-primary" :disabled="!buttonDisabled" v-md-theme="'brown'">Brown</md-button>
-        <md-button class="md-raised md-primary md-dense" v-md-theme="'orange'">Orange</md-button>
-      </demo-example>
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>disabled</md-table-cell>
+                <md-table-cell><code>Boolean</code></md-table-cell>
+                <md-table-cell>Disable the button and prevent his actions</md-table-cell>
+              </md-table-row>
 
-      <demo-example label="Links">
-        <md-button href="#/components/button" class="md-raised" @click="disablePrimaryButton">Default</md-button>
-        <md-button href="#/components/button" class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
-        <md-button href="#/components/button" class="md-raised md-accent">Accent</md-button>
-        <md-button href="#/components/button" class="md-raised md-warn">Warn</md-button>
-        <md-button href="#/components/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
-        <md-button href="#/components/button" class="md-raised md-dense">Dense</md-button>
-      </demo-example>
+              <md-table-row>
+                <md-table-cell>type</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Apply a type to button - Doesn't apply for links</md-table-cell>
+              </md-table-row>
 
-      <demo-example label="Icons - Flat">
-        <md-button class="md-icon-button" @click="disablePrimaryButton">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>href</md-table-cell>
+                <md-table-cell><code>String</code></md-table-cell>
+                <md-table-cell>Create a anchor on the button - In this case the generated tag will be &lt;a&gt;</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
 
-        <md-button class="md-icon-button md-primary" :disabled="buttonDisabled">
-          <md-icon>add</md-icon>
-        </md-button>
+          <md-table slot="classes">
+            <md-table-header>
+              <md-table-row>
+                <md-table-head>Name</md-table-head>
+                <md-table-head>Description</md-table-head>
+              </md-table-row>
+            </md-table-header>
 
-        <md-button class="md-icon-button md-accent">
-          <md-icon>add</md-icon>
-        </md-button>
+            <md-table-body>
+              <md-table-row>
+                <md-table-cell>md-raised</md-table-cell>
+                <md-table-cell>Raised button</md-table-cell>
+              </md-table-row>
 
-        <md-button class="md-icon-button md-warn">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>md-icon-button</md-table-cell>
+                <md-table-cell>Create rounded buttons - Need a &lt;md-icon&gt; inside</md-table-cell>
+              </md-table-row>
 
-        <md-button class="md-icon-button" :disabled="!buttonDisabled">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>md-dense</md-table-cell>
+                <md-table-cell>Small dense buttons</md-table-cell>
+              </md-table-row>
 
-        <md-button class="md-icon-button md-dense">
-          <md-icon>add</md-icon>
-        </md-button>
-      </demo-example>
+              <md-table-row>
+                <md-table-cell>md-fab</md-table-cell>
+                <md-table-cell>Create an Floating Action Button</md-table-cell>
+              </md-table-row>
 
-      <demo-example label="Icons - Raised">
-        <md-button class="md-icon-button md-raised" @click="disablePrimaryButton">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>md-mini</md-table-cell>
+                <md-table-cell>Small md-fab</md-table-cell>
+              </md-table-row>
 
-        <md-button class="md-icon-button md-raised md-primary" :disabled="buttonDisabled">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>md-fab-top-left</md-table-cell>
+                <md-table-cell>Position the md-fab absolutely on the top left of his parent</md-table-cell>
+              </md-table-row>
 
-        <md-button class="md-icon-button md-raised md-accent">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>md-fab-top-center</md-table-cell>
+                <md-table-cell>Position the md-fab absolutely on the top center of his parent</md-table-cell>
+              </md-table-row>
 
-        <md-button class="md-icon-button md-raised md-warn">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>md-fab-top-right</md-table-cell>
+                <md-table-cell>Position the md-fab absolutely on the top right of his parent</md-table-cell>
+              </md-table-row>
 
-        <md-button class="md-icon-button md-raised" :disabled="!buttonDisabled">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>md-fab-bottom-left</md-table-cell>
+                <md-table-cell>Position the md-fab absolutely on the bottom left of his parent</md-table-cell>
+              </md-table-row>
 
-        <md-button class="md-icon-button md-raised md-dense">
-          <md-icon>add</md-icon>
-        </md-button>
-      </demo-example>
+              <md-table-row>
+                <md-table-cell>md-fab-bottom-center</md-table-cell>
+                <md-table-cell>Position the md-fab absolutely on the bottom center of his parent</md-table-cell>
+              </md-table-row>
 
-      <demo-example label="Floating Action Button" height="360">
-        <md-button class="md-fab md-fab-bottom-right">
-          <md-icon>add</md-icon>
-        </md-button>
+              <md-table-row>
+                <md-table-cell>md-fab-bottom-right</md-table-cell>
+                <md-table-cell>Position the md-fab absolutely on the bottom right of his parent</md-table-cell>
+              </md-table-row>
+            </md-table-body>
+          </md-table>
+        </api-table>
+      </div>
 
-        <md-button class="md-fab md-fab-bottom-left md-mini">
-          <md-icon>add</md-icon>
-        </md-button>
+      <div slot="example">
+        <example-box card-title="Flat">
+          <div slot="demo">
+            <md-button>Default</md-button>
+            <md-button class="md-primary">Primary</md-button>
+            <md-button class="md-accent">Accent</md-button>
+            <md-button class="md-warn">Warn</md-button>
+            <md-button class="md-primary" disabled>Disabled</md-button>
+            <md-button class="md-dense">Dense</md-button>
+          </div>
 
-        <md-button class="md-fab">
-          <md-icon>edit</md-icon>
-        </md-button>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-button&gt;Default&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary&quot;&gt;Primary&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-accent&quot;&gt;Accent&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-warn&quot;&gt;Warn&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-dense&quot;&gt;Dense&lt;/md-button&gt;
+            </code-block>
+          </div>
+        </example-box>
 
-        <md-button class="md-fab md-mini">
-          <md-icon>edit</md-icon>
-        </md-button>
+        <example-box card-title="Raised">
+          <div slot="demo">
+            <md-button class="md-raised">Default</md-button>
+            <md-button class="md-raised md-primary">Primary</md-button>
+            <md-button class="md-raised md-accent">Accent</md-button>
+            <md-button class="md-raised md-warn">Warn</md-button>
+            <md-button class="md-raised md-primary" disabled>Disabled</md-button>
+            <md-button class="md-raised md-dense">Dense</md-button>
+          </div>
 
-        <md-button class="md-fab md-primary">
-          <md-icon>email</md-icon>
-        </md-button>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-button class=&quot;md-raised&quot;&gt;Default&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-primary&quot;&gt;Primary&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-accent&quot;&gt;Accent&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-warn&quot;&gt;Warn&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-dense&quot;&gt;Dense&lt;/md-button&gt;
+            </code-block>
+          </div>
+        </example-box>
 
-        <md-button class="md-fab md-primary md-mini">
-          <md-icon>email</md-icon>
-        </md-button>
+        <example-box card-title="Button vs Link vs Router Link">
+          <div slot="demo">
+            <md-button class="md-raised md-primary">Button</md-button>
+            <md-button href="#/components/button" class="md-raised md-primary">Link</md-button>
+            <router-link tag="md-button" to="/components/button" class="md-raised md-primary">Router Link</router-link>
+          </div>
 
-        <md-button class="md-fab md-warn">
-          <md-icon>save</md-icon>
-        </md-button>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-button class=&quot;md-raised md-primary&quot;&gt;Button&lt;/md-button&gt;
+              &lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-primary&quot;&gt;Link&lt;/md-button&gt;
+              &lt;router-link tag=&quot;md-button&quot; to=&quot;/components/button&quot; class=&quot;md-raised md-primary&quot;&gt;Router Link&lt;/router-link&gt;
+            </code-block>
+          </div>
+        </example-box>
 
-        <md-button class="md-fab md-warn md-mini">
-          <md-icon>save</md-icon>
-        </md-button>
+        <example-box card-title="Icons - Flat">
+          <div slot="demo">
+            <md-button class="md-icon-button">
+              <md-icon>more_vert</md-icon>
+            </md-button>
 
-        <md-button class="md-fab md-clean">
-          <md-icon>chat</md-icon>
-        </md-button>
+            <md-button class="md-icon-button md-primary">
+              <md-icon>more_vert</md-icon>
+            </md-button>
 
-        <md-button class="md-fab md-clean md-mini">
-          <md-icon>chat</md-icon>
-        </md-button>
+            <md-button class="md-icon-button md-accent">
+              <md-icon>more_vert</md-icon>
+            </md-button>
 
-        <md-button class="md-fab" disabled>
-          <md-icon>message</md-icon>
-        </md-button>
+            <md-button class="md-icon-button md-warn">
+              <md-icon>more_vert</md-icon>
+            </md-button>
 
-        <md-button class="md-fab md-mini" disabled>
-          <md-icon>message</md-icon>
-        </md-button>
-      </demo-example>
-    </div>
+            <md-button class="md-icon-button" disabled>
+              <md-icon>more_vert</md-icon>
+            </md-button>
 
-    <div slot="code">
-      <demo-example label="Flat">
-        <code-block lang="html">
-&lt;md-button&gt;Default&lt;/md-button&gt;
-&lt;md-button class=&quot;md-primary&quot;&gt;Primary&lt;/md-button&gt;
-&lt;md-button class=&quot;md-accent&quot;&gt;Accent&lt;/md-button&gt;
-&lt;md-button class=&quot;md-warn&quot;&gt;Warn&lt;/md-button&gt;
-&lt;md-button class=&quot;md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
-&lt;md-button class=&quot;md-dense&quot;&gt;Dense&lt;/md-button&gt;
-        </code-block>
-      </demo-example>
+            <md-button class="md-icon-button md-dense">
+              <md-icon>more_vert</md-icon>
+            </md-button>
+          </div>
 
-      <demo-example label="Raised">
-        <code-block lang="xml">
-&lt;md-button class=&quot;md-raised&quot;&gt;Default&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-primary&quot;&gt;Primary&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-accent&quot;&gt;Accent&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-warn&quot;&gt;Warn&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-dense&quot;&gt;Dense&lt;/md-button&gt;
-        </code-block>
-      </demo-example>
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-button class=&quot;md-icon-button&quot;&gt;
+                &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-      <demo-example label="Themed">
-        <code-block lang="xml">
-&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;Indigo&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;teal&#039;&quot;&gt;Teal&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;green&#039;&quot;&gt;Green&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;white&#039;&quot;&gt;White&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-primary&quot; disabled v-md-theme=&quot;&#039;brown&#039;&quot;&gt;Brown&lt;/md-button&gt;
-&lt;md-button class=&quot;md-raised md-primary md-dense&quot; v-md-theme=&quot;&#039;orange&#039;&quot;&gt;Orange&lt;/md-button&gt;
-        </code-block>
-      </demo-example>
+              &lt;md-button class=&quot;md-icon-button md-primary&quot;&gt;
+                &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-      <demo-example label="Links">
-        <code-block lang="xml">
-&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised&quot;&gt;Default&lt;/md-button&gt;
-&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-primary&quot;&gt;Primary&lt;/md-button&gt;
-&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-accent&quot;&gt;Accent&lt;/md-button&gt;
-&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-warn&quot;&gt;Warn&lt;/md-button&gt;
-&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-primary&quot; disabled&gt;Disabled&lt;/md-button&gt;
-&lt;md-button href=&quot;#/components/button&quot; class=&quot;md-raised md-dense&quot;&gt;Dense&lt;/md-button&gt;
-        </code-block>
-      </demo-example>
+              &lt;md-button class=&quot;md-icon-button md-accent&quot;&gt;
+                &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-      <demo-example label="Icons - Flat">
-          <code-block lang="xml">
-&lt;md-button class=&quot;md-icon-button&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button md-warn&quot;&gt;
+                &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-&lt;md-button class=&quot;md-icon-button md-primary&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button&quot; disabled&gt;
+                &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-&lt;md-button class=&quot;md-icon-button md-accent&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button md-dense&quot;&gt;
+                &lt;md-icon&gt;more_vert&lt;/md-icon&gt;
+              &lt;/md-button&gt;
+            </code-block>
+          </div>
+        </example-box>
 
-&lt;md-button class=&quot;md-icon-button md-warn&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+        <example-box card-title="Icons - Raised">
+          <div slot="demo">
+            <md-button class="md-icon-button md-raised">
+              <md-icon>add</md-icon>
+            </md-button>
 
-&lt;md-button class=&quot;md-icon-button&quot; disabled&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+            <md-button class="md-icon-button md-raised md-primary">
+              <md-icon>add</md-icon>
+            </md-button>
 
-&lt;md-button class=&quot;md-icon-button md-dense&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
-        </code-block>
-      </demo-example>
+            <md-button class="md-icon-button md-raised md-accent">
+              <md-icon>add</md-icon>
+            </md-button>
 
-      <demo-example label="Icons - Raised">
-        <code-block lang="xml">
-&lt;md-button class=&quot;md-icon-button md-raised&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+            <md-button class="md-icon-button md-raised md-warn">
+              <md-icon>add</md-icon>
+            </md-button>
 
-&lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+            <md-button class="md-icon-button md-raised" disabled>
+              <md-icon>add</md-icon>
+            </md-button>
 
-&lt;md-button class=&quot;md-icon-button md-raised md-accent&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+            <md-button class="md-icon-button md-raised md-dense">
+              <md-icon>add</md-icon>
+            </md-button>
+          </div>
 
-&lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-button class=&quot;md-icon-button md-raised&quot;&gt;
+                &lt;md-icon&gt;add&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-&lt;md-button class=&quot;md-icon-button md-raised&quot; disabled&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button md-raised md-primary&quot;&gt;
+                &lt;md-icon&gt;add&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-&lt;md-button class=&quot;md-icon-button md-raised md-dense&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
-        </code-block>
-      </demo-example>
+              &lt;md-button class=&quot;md-icon-button md-raised md-accent&quot;&gt;
+                &lt;md-icon&gt;add&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-      <demo-example label="Floating Action Button">
-        <code-block lang="xml">
-&lt;md-button class=&quot;md-fab md-fab-bottom-right&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button md-raised md-warn&quot;&gt;
+                &lt;md-icon&gt;add&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-&lt;md-button class=&quot;md-fab md-fab-bottom-left md-mini&quot;&gt;
-  &lt;md-icon&gt;add&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button md-raised&quot; disabled&gt;
+                &lt;md-icon&gt;add&lt;/md-icon&gt;
+              &lt;/md-button&gt;
 
-&lt;md-button class=&quot;md-fab&quot;&gt;
-  &lt;md-icon&gt;edit&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button md-raised md-dense&quot;&gt;
+                &lt;md-icon&gt;add&lt;/md-icon&gt;
+              &lt;/md-button&gt;
+            </code-block>
+          </div>
+        </example-box>
 
-&lt;md-button class=&quot;md-fab md-mini&quot;&gt;
-  &lt;md-icon&gt;edit&lt;/md-icon&gt;
-&lt;/md-button&gt;
+        <example-box card-title="Floating Action Button">
+          <div class="fab-holder" slot="demo">
+            <div>
+              <md-button class="md-fab">
+                <md-icon>edit</md-icon>
+              </md-button>
 
-&lt;md-button class=&quot;md-fab md-primary&quot;&gt;
-  &lt;md-icon&gt;email&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              <md-button class="md-fab md-primary">
+                <md-icon>email</md-icon>
+              </md-button>
 
-&lt;md-button class=&quot;md-fab md-primary md-mini&quot;&gt;
-  &lt;md-icon&gt;email&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              <md-button class="md-fab md-warn">
+                <md-icon>save</md-icon>
+              </md-button>
 
-&lt;md-button class=&quot;md-fab md-warn&quot;&gt;
-  &lt;md-icon&gt;save&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              <md-button class="md-fab md-clean">
+                <md-icon>dialpad</md-icon>
+              </md-button>
 
-&lt;md-button class=&quot;md-fab md-warn md-mini&quot;&gt;
-  &lt;md-icon&gt;save&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              <md-button class="md-fab" disabled>
+                <md-icon>message</md-icon>
+              </md-button>
+            </div>
 
-&lt;md-button class=&quot;md-fab md-clean&quot;&gt;
-  &lt;md-icon&gt;chat&lt;/md-icon&gt;
-&lt;/md-button&gt;
+            <div>
+              <md-button class="md-fab md-mini">
+                <md-icon>edit</md-icon>
+              </md-button>
 
-&lt;md-button class=&quot;md-fab md-clean md-mini&quot;&gt;
-  &lt;md-icon&gt;chat&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              <md-button class="md-fab md-primary md-mini">
+                <md-icon>email</md-icon>
+              </md-button>
 
-&lt;md-button class=&quot;md-fab&quot; disabled&gt;
-  &lt;md-icon&gt;message&lt;/md-icon&gt;
-&lt;/md-button&gt;
+              <md-button class="md-fab md-warn md-mini">
+                <md-icon>save</md-icon>
+              </md-button>
 
-&lt;md-button class=&quot;md-fab md-mini&quot; disabled&gt;
-  &lt;md-icon&gt;message&lt;/md-icon&gt;
-&lt;/md-button&gt;
-        </code-block>
-      </demo-example>
-    </div>
+              <md-button class="md-fab md-clean md-mini">
+                <md-icon>dialpad</md-icon>
+              </md-button>
 
-    <div slot="api">
+              <md-button class="md-fab md-mini" disabled>
+                <md-icon>message</md-icon>
+              </md-button>
+            </div>
 
-    </div>
-  </demo-page>
+            <md-button class="md-fab md-fab-bottom-left">
+              <md-icon>save</md-icon>
+            </md-button>
+
+            <md-button class="md-fab md-primary md-fab-bottom-center">
+              <md-icon>dialpad</md-icon>
+            </md-button>
+
+            <md-button class="md-fab md-fab-bottom-right">
+              <md-icon>add</md-icon>
+            </md-button>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;div&gt;
+                &lt;md-button class=&quot;md-fab&quot;&gt;
+                  &lt;md-icon&gt;edit&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-button class=&quot;md-fab md-primary&quot;&gt;
+                  &lt;md-icon&gt;email&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-button class=&quot;md-fab md-warn&quot;&gt;
+                  &lt;md-icon&gt;save&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-button class=&quot;md-fab md-clean&quot;&gt;
+                  &lt;md-icon&gt;dialpad&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-button class=&quot;md-fab&quot; disabled&gt;
+                  &lt;md-icon&gt;message&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+              &lt;/div&gt;
+
+              &lt;div&gt;
+                &lt;md-button class=&quot;md-fab md-mini&quot;&gt;
+                  &lt;md-icon&gt;edit&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-button class=&quot;md-fab md-primary md-mini&quot;&gt;
+                  &lt;md-icon&gt;email&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-button class=&quot;md-fab md-warn md-mini&quot;&gt;
+                  &lt;md-icon&gt;save&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-button class=&quot;md-fab md-clean md-mini&quot;&gt;
+                  &lt;md-icon&gt;dialpad&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+
+                &lt;md-button class=&quot;md-fab md-mini&quot; disabled&gt;
+                  &lt;md-icon&gt;message&lt;/md-icon&gt;
+                &lt;/md-button&gt;
+              &lt;/div&gt;
+
+              &lt;md-button class=&quot;md-fab md-fab-bottom-left&quot;&gt;
+                &lt;md-icon&gt;save&lt;/md-icon&gt;
+              &lt;/md-button&gt;
+
+              &lt;md-button class=&quot;md-fab md-primary md-fab-bottom-center&quot;&gt;
+                &lt;md-icon&gt;dialpad&lt;/md-icon&gt;
+              &lt;/md-button&gt;
+
+              &lt;md-button class=&quot;md-fab md-fab-bottom-right&quot;&gt;
+                &lt;md-icon&gt;add&lt;/md-icon&gt;
+              &lt;/md-button&gt;
+            </code-block>
+          </div>
+        </example-box>
+
+        <example-box card-title="Themes">
+          <div slot="demo">
+            <md-button class="md-primary" v-md-theme="'indigo'">Indigo</md-button>
+            <md-button class="md-raised md-primary" v-md-theme="'teal'">Teal</md-button>
+            <md-button class="md-icon-button md-primary" v-md-theme="'orange'">
+              <md-icon>add</md-icon>
+            </md-button>
+            <md-button class="md-icon-button md-raised md-primary" v-md-theme="'green'">
+              <md-icon>message</md-icon>
+            </md-button>
+            <md-button class="md-fab md-primary" v-md-theme="'brown'">
+              <md-icon>dialpad</md-icon>
+            </md-button>
+          </div>
+
+          <div slot="code">
+            <code-block lang="xml">
+              &lt;md-button class=&quot;md-primary&quot; v-md-theme=&quot;&#039;indigo&#039;&quot;&gt;Indigo&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-raised md-primary&quot; v-md-theme=&quot;&#039;teal&#039;&quot;&gt;Teal&lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button md-primary&quot; v-md-theme=&quot;&#039;orange&#039;&quot;&gt;
+                &lt;md-icon&gt;add&lt;/md-icon&gt;
+              &lt;/md-button&gt;
+              &lt;md-button class=&quot;md-icon-button md-raised md-primary&quot; v-md-theme=&quot;&#039;green&#039;&quot;&gt;
+                &lt;md-icon&gt;message&lt;/md-icon&gt;
+              &lt;/md-button&gt;
+              &lt;md-button class=&quot;md-fab md-primary&quot; v-md-theme=&quot;&#039;brown&#039;&quot;&gt;
+                &lt;md-icon&gt;dialpad&lt;/md-icon&gt;
+              &lt;/md-button&gt;
+            </code-block>
+          </div>
+        </example-box>
+      </div>
+    </docs-component>
+  </page-content>
 </template>
 
+<style lang="scss" scoped>
+  .disabled-button {
+    margin-left: 8px;
+  }
+
+  .fab-holder {
+    height: 300px;
+  }
+</style>
+
 <script>
   export default {
     data() {
       return {
-        buttonDisabled: false
+        buttonDisabled: true
       };
     },
     methods: {
diff --git a/src/components/mdButton/mdButton.scss b/src/components/mdButton/mdButton.scss
index 8189f76..0c4dd4d 100644
--- a/src/components/mdButton/mdButton.scss
+++ b/src/components/mdButton/mdButton.scss
@@ -145,27 +145,41 @@ $button-icon-size: 40px;
       box-shadow: $material-shadow-5dp;
     }
 
-    &.md-fab-top-right {
-      position: absolute;
-      top: 16px;
-      right: 16px;
-    }
-
     &.md-fab-top-left {
       position: absolute;
       top: 16px;
       left: 16px;
     }
 
-    &.md-fab-bottom-right {
+    &.md-fab-top-center {
       position: absolute;
+      top: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.md-fab-top-right {
+      position: absolute;
+      top: 16px;
       right: 16px;
-      bottom: 16px;
     }
 
     &.md-fab-bottom-left {
       position: absolute;
+      bottom: 16px;
       left: 16px;
+    }
+
+    &.md-fab-bottom-center {
+      position: absolute;
+      bottom: 16px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.md-fab-bottom-right {
+      position: absolute;
+      right: 16px;
       bottom: 16px;
     }
 
diff --git a/src/components/mdButton/mdButton.vue b/src/components/mdButton/mdButton.vue
index df9de2a..926c2e7 100644
--- a/src/components/mdButton/mdButton.vue
+++ b/src/components/mdButton/mdButton.vue
@@ -18,8 +18,8 @@
           disabled: isDisabled
         },
         on: {
-          click: () => {
-            this.$emit('click');
+          click: ($event) => {
+            this.$emit('click', $event);
           }
         }
       };
diff --git a/src/components/mdCard/mdCard.theme b/src/components/mdCard/mdCard.theme
index 7e3d48a..367a201 100644
--- a/src/components/mdCard/mdCard.theme
+++ b/src/components/mdCard/mdCard.theme
@@ -3,9 +3,12 @@
   &.md-card {
     background-color: #{'BACKGROUND-COLOR-A100'};
 
-    .md-icon-button {
-      .md-icon {
-        color: #{'BACKGROUND-CONTRAST-0.54'};
+    .md-card-header,
+    .md-card-actions {
+      .md-icon-button {
+        .md-icon {
+          color: #{'BACKGROUND-CONTRAST-0.54'};
+        }
       }
     }