From 4707a26748db58204032ddae3d8c0582801d72a6 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 21:55:21 +0100
Subject: [PATCH 1/6] Allow children for buttons and use it as link where there
 is href prop

---
 components/button/index.jsx  | 30 ++++++++++++++++--------------
 components/button/style.scss | 30 +++++++++++++++++++-----------
 spec/components/button.jsx   |  9 +++++++++
 spec/style.scss              |  8 ++------
 4 files changed, 46 insertions(+), 31 deletions(-)

diff --git a/components/button/index.jsx b/components/button/index.jsx
index c18a0910..05a43bae 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -39,26 +39,28 @@ class Button extends React.Component {
 
   render () {
     let className = style[this.props.kind];
-    const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, ...others} = this.props;
+    const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, href, ...others} = this.props;
+    const element = href ? 'a' : 'button';
+
     if (this.props.className) className += ` ${this.props.className}`;
     if (!primary && !accent) className += ` ${style.primary}`;
     if (primary) className += ` ${style.primary}`;
     if (accent) className += ` ${style.accent}`;
     if (mini) className += ` ${style.mini}`;
 
-    return (
-      <button
-        data-react-toolbox='button'
-        {...others}
-        className={className}
-        disabled={this.props.disabled || this.props.loading}
-        onMouseDown={this.handleMouseDown}
-      >
-        { ripple ? <Ripple ref='ripple' loading={loading}/> : null }
-        { icon ? <FontIcon className={style.icon} value={icon}/> : null }
-        { label ? <abbr className={style.label}>{label}</abbr> : null }
-        { tooltip ? <Tooltip label={tooltip}/> : null }
-      </button>
+    const props = {
+      ...others,
+      href,
+      className,
+      disabled: this.props.disabled || this.props.loading,
+      onMouseDown: this.handleMouseDown
+    };
+
+    return React.createElement(element, props,
+      ripple ? <Ripple ref='ripple' loading={loading}/> : null,
+      tooltip ? <Tooltip label={tooltip}/> : null,
+      icon ? <FontIcon className={style.icon} value={icon}/> : null,
+      label ? label : this.props.children
     );
   }
 }
diff --git a/components/button/style.scss b/components/button/style.scss
index 4cb89d86..fb5ae8fa 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -7,7 +7,9 @@
   display: inline-block;
   height: $button-height;
   flex-direction: row;
+  align-content: center;
   align-items: center;
+  justify-content: center;
   color: $button-default-text-color;
   text-align: center;
   text-decoration: none;
@@ -16,18 +18,29 @@
   border: 0;
   outline: none;
   transition: box-shadow .2s $animation-curve-fast-out-linear-in,
-                background-color .2s $animation-curve-default,
-                color .2s $animation-curve-default;
-  align-content: center;
-  justify-content: center;
-
+              background-color .2s $animation-curve-default,
+              color .2s $animation-curve-default;
   &::-moz-focus-inner {
     border: 0;
   }
+  > span {
+    @include typo-button();
+    display: inline-block;
+    line-height: $button-height;
+    vertical-align: middle;
+  }
+  > svg {
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    margin-right: .5 * $unit;
+    font-size: 120%;
+    vertical-align: middle;
+    fill: currentColor;
+  }
   > * {
     pointer-events: none;
   }
-
   [data-react-toolbox="ripple"] {
     overflow: hidden;
   }
@@ -50,11 +63,6 @@
   cursor: auto;
 }
 
-.label {
-  @include typo-button();
-  line-height: $button-height;
-}
-
 .flat {
   @extend %button;
   @extend %squared;
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index ee576e68..fa71b106 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -1,10 +1,19 @@
 import React from 'react';
 import Button from '../../components/button';
 
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
 const ButtonTest = () => (
   <section>
     <h5>Buttons</h5>
     <p>lorem ipsum...</p>
+    <Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
+      <GithubIcon /> Github Profile
+    </Button>
     <Button kind='raised' primary label='Bookmark' icon='bookmark' />
     <Button kind='flat' accent label='Inbox' icon='inbox' />
     <Button kind='floating' primary icon='add' />
diff --git a/spec/style.scss b/spec/style.scss
index 1f7edc4f..7dda066e 100644
--- a/spec/style.scss
+++ b/spec/style.scss
@@ -5,12 +5,12 @@
 $offset: 1.8 * $unit;
 
 .app {
-  padding: (8.2 * $unit) $offset $offset $offset;
+  padding: (8.2 * $unit) $offset $offset;
   background-color: #f5f5f5;
   > section {
     padding: $offset;
     margin-bottom: $offset;
-    background-color: white;
+    background-color: #fff;
     box-shadow: 0 1px 2px rgba(0,0,0, 0.25);
     > h5 {
       color: rgb(48, 63, 159);
@@ -48,7 +48,3 @@ $offset: 1.8 * $unit;
     }
   }
 }
-
-.logo {
-  // height: $unit;
-}

From 709cc3746ebe2141c289dd378f8471c86f166bd9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 21:55:32 +0100
Subject: [PATCH 2/6] Use i tagname for icons

---
 components/font_icon/index.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/font_icon/index.jsx b/components/font_icon/index.jsx
index 2e6583d5..ab9acedd 100644
--- a/components/font_icon/index.jsx
+++ b/components/font_icon/index.jsx
@@ -5,9 +5,9 @@ const FontIcon = props => {
   let className = style[props.value];
   if (props.className) className += ` ${props.className}`;
   return (
-    <span data-react-toolbox='icon' {...props} className={className}>
+    <i data-react-toolbox='icon' {...props} className={className}>
       {props.children}
-    </span>
+    </i>
   );
 };
 

From 3e91b97a875ca79751e24a8e8df6bf3347dc8b87 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Mon, 16 Nov 2015 21:56:20 +0100
Subject: [PATCH 3/6] Set raised button for first test example

---
 spec/components/button.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index fa71b106..c492c58d 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -11,7 +11,7 @@ const ButtonTest = () => (
   <section>
     <h5>Buttons</h5>
     <p>lorem ipsum...</p>
-    <Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
+    <Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
       <GithubIcon /> Github Profile
     </Button>
     <Button kind='raised' primary label='Bookmark' icon='bookmark' />

From 2d4dceff6431d5c661ca04bdebb46239260ed166 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 17 Nov 2015 00:18:58 +0100
Subject: [PATCH 4/6] Add icons for cards in landing docs page

---
 docs/app/components/layout/home/index.jsx     | 29 +++++++++++++++++--
 .../components/layout/home/modules/authors.js |  8 ++---
 2 files changed, 31 insertions(+), 6 deletions(-)

diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index 41a66040..af26e52e 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -6,6 +6,18 @@ import Navigation from '../../navigation';
 import style from './style';
 import authors from './modules/authors';
 
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
+const TwitterIcon = () => (
+  <svg viewBox="0 0 274 223">
+    <g><path d="M273.39,26.301 C263.331,30.762 252.521,33.777 241.175,35.133 C252.756,28.191 261.649,17.199 265.837,4.102 C255,10.529 242.996,15.197 230.22,17.713 C219.988,6.812 205.411,0 189.279,0 C158.302,0 133.188,25.113 133.188,56.088 C133.188,60.484 133.685,64.765 134.641,68.87 C88.025,66.531 46.696,44.201 19.032,10.267 C14.204,18.551 11.438,28.186 11.438,38.465 C11.438,57.924 21.341,75.092 36.391,85.15 C27.196,84.859 18.548,82.336 10.985,78.135 C10.981,78.369 10.981,78.604 10.981,78.84 C10.981,106.016 30.315,128.686 55.974,133.838 C51.267,135.12 46.312,135.805 41.196,135.805 C37.582,135.805 34.068,135.454 30.644,134.799 C37.781,157.083 58.495,173.299 83.039,173.752 C63.843,188.795 39.658,197.762 13.38,197.762 C8.853,197.762 4.388,197.497 0,196.979 C24.822,212.893 54.305,222.178 85.98,222.178 C189.148,222.178 245.564,136.711 245.564,62.592 C245.564,60.16 245.51,57.741 245.402,55.336 C256.36,47.428 265.87,37.549 273.39,26.301" /></g>
+  </svg>
+);
+
 const Home = () => (
   <article>
     <header className={style.header}>
@@ -48,8 +60,21 @@ const Home = () => (
       {
         authors.map((author, index) => {
           author.actions.map((action) => {
-            const url = `https:\\\\${ action.label }.com\\${ author.subtitle }`;
-            action.onClick = () => { window.open(url.toLowerCase(), '_blank'); };
+            if (action.id === 'github') {
+              action.style = {color: '#000'};
+              action.children = [
+                <GithubIcon key={`gicon-${author.subtitle}`} />,
+                <span key={`glabel-${author.subtitle}`}>Github</span>
+              ];
+              action.id = null;
+            } else {
+              action.style = {color: '#55acee'};
+              action.children = [
+                <TwitterIcon key={`ticon-${author.subtitle}`} />,
+                <span key={`tlabel-${author.subtitle}`}>Twitter</span>
+              ];
+              action.id = null;
+            }
           });
           return <Card key={index} {...author} />;
         })
diff --git a/docs/app/components/layout/home/modules/authors.js b/docs/app/components/layout/home/modules/authors.js
index 3aac70d0..fb837973 100644
--- a/docs/app/components/layout/home/modules/authors.js
+++ b/docs/app/components/layout/home/modules/authors.js
@@ -3,8 +3,8 @@ export default [
     title: 'Javi Velasco',
     subtitle: 'javivelasco',
     actions: [
-      { label: 'Github' },
-      { label: 'Twitter' }
+      { id: 'github', href: 'http://github.com/javivelasco', target: '_blank' },
+      { id: 'twitter', href: 'http://twitter.com/javivelasco', target: '_blank' }
     ],
     image: '/images/javivelasco.jpg',
     text: 'Software gardener • Film, music & comic lover • Frontend Engineer at SocialBro  • Any biographer in the room?',
@@ -14,8 +14,8 @@ export default [
     title: 'Javi Jimenez',
     subtitle: 'soyjavi',
     actions: [
-      { label: 'Github' },
-      { label: 'Twitter' }
+      { id: 'github', href: 'http://github.com/soyjavi', target: '_blank' },
+      { id: 'twitter', href: 'http://twitter.com/soyjavi', target: '_blank' }
     ],
     image: '/images/soyjavi.jpg',
     text: 'Creative Doer · A complicated #human who builds stuff · #author · #opensource lover · #traveller · with a dark past being CEO & CTO',

From ab40974ea97d0b17ddf328da651e74bb3ab68ee9 Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 17 Nov 2015 00:45:20 +0100
Subject: [PATCH 5/6] Adapt docs to new buttons

---
 components/button/readme.md                           | 11 +++++++++++
 .../components/layout/main/components/playground.scss |  1 -
 .../layout/main/modules/examples/button_example_1.txt |  9 +++++++++
 docs/app/components/markdown/style.scss               |  2 +-
 4 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/components/button/readme.md b/components/button/readme.md
index a094928a..29f1af3a 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -6,8 +6,17 @@ A [button](https://www.google.com/design/spec/components/buttons.html) clearly c
 ```jsx
 import Button from 'react-toolbox/lib/button';
 
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
 const TestButtons = () => (
   <div>
+    <Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
+      <GithubIcon /> Github Profile
+    </Button>
     <Button label="Flat button" />
     <Button kind="raised" label="Raised" />
     <Button kind="raised" label="Raised accent" accent icon="favorite" />
@@ -32,3 +41,5 @@ const TestButtons = () => (
 | `onClick`  | `Function` |  | Callback called when the button is clicked.|
 | `primary`  | `false` | | If true, component will have the primary color.|
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
+
+The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
diff --git a/docs/app/components/layout/main/components/playground.scss b/docs/app/components/layout/main/components/playground.scss
index 343f3419..14c41ded 100644
--- a/docs/app/components/layout/main/components/playground.scss
+++ b/docs/app/components/layout/main/components/playground.scss
@@ -1,6 +1,5 @@
 @import "../config";
 
-
 .editor, .preview {
   position: absolute;
   right: 0;
diff --git a/docs/app/components/layout/main/modules/examples/button_example_1.txt b/docs/app/components/layout/main/modules/examples/button_example_1.txt
index 60db342d..282ec374 100644
--- a/docs/app/components/layout/main/modules/examples/button_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/button_example_1.txt
@@ -1,5 +1,14 @@
+const GithubIcon = () => (
+  <svg viewBox="0 0 284 277">
+    <g><path d="M141.888675,0.0234927555 C63.5359948,0.0234927555 0,63.5477395 0,141.912168 C0,204.6023 40.6554239,257.788232 97.0321356,276.549924 C104.12328,277.86336 106.726656,273.471926 106.726656,269.724287 C106.726656,266.340838 106.595077,255.16371 106.533987,243.307542 C67.0604204,251.890693 58.7310279,226.56652 58.7310279,226.56652 C52.2766299,210.166193 42.9768456,205.805304 42.9768456,205.805304 C30.1032937,196.998939 43.9472374,197.17986 43.9472374,197.17986 C58.1953153,198.180797 65.6976425,211.801527 65.6976425,211.801527 C78.35268,233.493192 98.8906827,227.222064 106.987463,223.596605 C108.260955,214.426049 111.938106,208.166669 115.995895,204.623447 C84.4804813,201.035582 51.3508808,188.869264 51.3508808,134.501475 C51.3508808,119.01045 56.8936274,106.353063 65.9701981,96.4165325 C64.4969882,92.842765 59.6403297,78.411417 67.3447241,58.8673023 C67.3447241,58.8673023 79.2596322,55.0538738 106.374213,73.4114319 C117.692318,70.2676443 129.83044,68.6910512 141.888675,68.63701 C153.94691,68.6910512 166.09443,70.2676443 177.433682,73.4114319 C204.515368,55.0538738 216.413829,58.8673023 216.413829,58.8673023 C224.13702,78.411417 219.278012,92.842765 217.804802,96.4165325 C226.902519,106.353063 232.407672,119.01045 232.407672,134.501475 C232.407672,188.998493 199.214632,200.997988 167.619331,204.510665 C172.708602,208.913848 177.243363,217.54869 177.243363,230.786433 C177.243363,249.771339 177.078889,265.050898 177.078889,269.724287 C177.078889,273.500121 179.632923,277.92445 186.825101,276.531127 C243.171268,257.748288 283.775,204.581154 283.775,141.912168 C283.775,63.5477395 220.248404,0.0234927555 141.888675,0.0234927555" /></g>
+  </svg>
+);
+
 const ButtonsTest = () => (
   <div>
+    <Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
+      <GithubIcon /> Github Profile
+    </Button>
     <Button label="Flat button" />
     <Button kind="raised" label="Raised" />
     <Button kind="raised" label="Raised accent" accent icon="favorite" />
diff --git a/docs/app/components/markdown/style.scss b/docs/app/components/markdown/style.scss
index af402429..f3fecbc4 100644
--- a/docs/app/components/markdown/style.scss
+++ b/docs/app/components/markdown/style.scss
@@ -63,7 +63,7 @@ $documentation-table-font-size: 1.4 * $unit;
     text-align: left;
     > button {
       height: $documentation-playground-button-height;
-      > abbr {
+      > span {
         font-size: $documentation-playground-button-font-size;
         line-height: $documentation-playground-button-height;
       }

From 26cecdc23fa3ea39b544c290b183d0b0dfe6874e Mon Sep 17 00:00:00 2001
From: Javi Velasco <javier.velasco86@gmail.com>
Date: Tue, 17 Nov 2015 21:49:27 +0100
Subject: [PATCH 6/6] Change button properties and support toggle icon buttons

---
 README.md                                     |  2 +-
 components/button/__test__/index.spec.jsx     | 13 +++--
 components/button/_config.scss                | 11 ++--
 components/button/index.jsx                   | 24 +++++----
 components/button/readme.md                   | 32 +++++++----
 components/button/style.scss                  | 53 +++++++++++++++++--
 components/drawer/readme.md                   |  2 +-
 components/navigation/readme.md               |  4 +-
 components/snackbar/index.jsx                 |  1 -
 components/snackbar/readme.md                 |  2 +-
 components/tooltip/readme.md                  |  2 +-
 docs/app/components/layout/home/index.jsx     |  2 +-
 docs/app/components/layout/install/install.md |  2 +-
 docs/app/components/layout/main/index.jsx     |  4 +-
 .../modules/examples/button_example_1.txt     | 23 +++++---
 .../modules/examples/drawer_example_1.txt     |  2 +-
 .../modules/examples/navigation_example_1.txt |  4 +-
 .../modules/examples/snackbar_example_1.txt   |  2 +-
 .../modules/examples/tooltip_example_1.txt    |  2 +-
 spec/components/button.jsx                    | 25 +++++----
 spec/components/dialog.jsx                    |  6 +--
 spec/components/drawer.jsx                    |  6 +--
 spec/components/snackbar.jsx                  |  2 +-
 spec/components/tooltip.jsx                   |  6 +--
 spec/root.jsx                                 |  2 +-
 25 files changed, 156 insertions(+), 78 deletions(-)

diff --git a/README.md b/README.md
index 43a14e04..6a9bf531 100644
--- a/README.md
+++ b/README.md
@@ -27,7 +27,7 @@ import React from 'react';
 import Button from 'react-toolbox/lib/button';
 
 const CustomButton = () => (
-  <Button label="Hello world" kind="raised" accent />
+  <Button label="Hello world" raised accent />
 );
 
 export default CustomButton;
diff --git a/components/button/__test__/index.spec.jsx b/components/button/__test__/index.spec.jsx
index 764e3493..e540b9f0 100644
--- a/components/button/__test__/index.spec.jsx
+++ b/components/button/__test__/index.spec.jsx
@@ -7,12 +7,11 @@ describe('Button', function () {
   let button;
 
   describe('#render', function () {
-
-    it('uses flat and primary styles by default', function () {
+    it('uses flat and neutral styles by default', function () {
       button = utils.shallowRenderComponent(Button);
 
       expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.primary);
+      expect(button.props.className).toContain(style.neutral);
     });
 
     it('renders accent button with accent style', function () {
@@ -22,11 +21,11 @@ describe('Button', function () {
       expect(button.props.className).toContain(style.accent);
     });
 
-    it('1 renders mini button with mini style', function () {
-      button = utils.shallowRenderComponent(Button, { mini: true });
+    it('renders mini button with mini style', function () {
+      button = utils.shallowRenderComponent(Button, { floating: true, mini: true });
 
-      expect(button.props.className).toContain(style.flat);
-      expect(button.props.className).toContain(style.primary);
+      expect(button.props.className).toContain(style.floating);
+      expect(button.props.className).toContain(style.neutral);
       expect(button.props.className).toContain(style.mini);
     });
 
diff --git a/components/button/_config.scss b/components/button/_config.scss
index 15e0ef0b..d7804671 100644
--- a/components/button/_config.scss
+++ b/components/button/_config.scss
@@ -1,18 +1,21 @@
+$button-neutral-color: unquote("rgb(#{$color-white})") !default;
+$button-neutral-color-contrast: unquote("rgb(#{$palette-grey-900})") !default;
+$button-neutral-color-hover: unquote("rgba(#{$palette-grey-900}, 0.20)") !default;
+$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
+$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
+$button-primary-color: unquote("rgb(#{$color-primary})") !default;
 $button-accent-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
 $button-accent-color-hover: unquote("rgba(#{$color-accent}, 0.20)") !default;
 $button-accent-color: unquote("rgb(#{$color-accent})") !default;
-$button-border-radius: 0.2 * $unit;
 $button-default-text-color: unquote("rgb(#{$color-black})") !default;
 $button-disabled-text-color: unquote("rgba(#{$color-black}, 0.26)") !default;
 $button-flat-color-hover: unquote("rgba(#{$color-black}, 0.26)") !default;
+$button-border-radius: 0.2 * $unit;
 $button-floating-font-size: $unit * 2.4;
 $button-floating-height-mini: $unit * 4;
 $button-floating-mini-font-size: $button-floating-height-mini / 2.25;
 $button-floating-height: $unit * 5.6;
 $button-height: $unit * 3.6;
-$button-primary-color-contrast: unquote("rgb(#{$color-primary-contrast})") !default;
-$button-primary-color-hover: unquote("rgba(#{$color-primary}, 0.20)") !default;
-$button-primary-color: unquote("rgb(#{$color-primary})") !default;
 $button-solid-background-color: unquote("rgba(#{$palette-grey-500}, 0.20)") !default;
 $button-solid-disabled-background-color: unquote("rgba(#{$color-black}, 0.12)") !default;
 $button-squared-icon-margin: $unit * .6;
diff --git a/components/button/index.jsx b/components/button/index.jsx
index 05a43bae..2e314a3d 100644
--- a/components/button/index.jsx
+++ b/components/button/index.jsx
@@ -10,13 +10,16 @@ class Button extends React.Component {
     accent: React.PropTypes.bool,
     className: React.PropTypes.string,
     disabled: React.PropTypes.bool,
+    flat: React.PropTypes.bool,
+    floating: React.PropTypes.bool,
     icon: React.PropTypes.string,
-    kind: React.PropTypes.string,
     label: React.PropTypes.string,
     loading: React.PropTypes.bool,
     mini: React.PropTypes.bool,
     primary: React.PropTypes.bool,
+    raised: React.PropTypes.bool,
     ripple: React.PropTypes.bool,
+    toggle: React.PropTypes.bool,
     tooltip: React.PropTypes.string,
     type: React.PropTypes.string
   };
@@ -24,11 +27,14 @@ class Button extends React.Component {
   static defaultProps = {
     accent: false,
     className: '',
-    kind: 'flat',
+    flat: false,
+    floating: false,
     loading: false,
     mini: false,
     primary: false,
-    ripple: true
+    raised: false,
+    ripple: true,
+    toggle: false
   };
 
   handleMouseDown = (event) => {
@@ -38,14 +44,14 @@ class Button extends React.Component {
   };
 
   render () {
-    let className = style[this.props.kind];
-    const {label, icon, loading, ripple, primary, accent, mini, kind, tooltip, href, ...others} = this.props;
+    const {accent, flat, floating, href, icon, label, loading, mini,
+           primary, raised, ripple, toggle, tooltip, ...others} = this.props;
     const element = href ? 'a' : 'button';
+    const level = primary ? 'primary' : accent ? 'accent' : 'neutral';
+    const shape = flat ? 'flat' : raised ? 'raised' : floating ? 'floating' : toggle ? 'toggle' : 'flat';
+    let className = `${style[shape]} ${style[level]}`;
 
     if (this.props.className) className += ` ${this.props.className}`;
-    if (!primary && !accent) className += ` ${style.primary}`;
-    if (primary) className += ` ${style.primary}`;
-    if (accent) className += ` ${style.accent}`;
     if (mini) className += ` ${style.mini}`;
 
     const props = {
@@ -58,7 +64,7 @@ class Button extends React.Component {
 
     return React.createElement(element, props,
       ripple ? <Ripple ref='ripple' loading={loading}/> : null,
-      tooltip ? <Tooltip label={tooltip}/> : null,
+      tooltip ? <Tooltip className={style.tooltip} label={tooltip}/> : null,
       icon ? <FontIcon className={style.icon} value={icon}/> : null,
       label ? label : this.props.children
     );
diff --git a/components/button/readme.md b/components/button/readme.md
index 29f1af3a..0d73910d 100644
--- a/components/button/readme.md
+++ b/components/button/readme.md
@@ -14,14 +14,20 @@ const GithubIcon = () => (
 
 const TestButtons = () => (
   <div>
-    <Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
-      <GithubIcon /> Github Profile
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
     </Button>
-    <Button label="Flat button" />
-    <Button kind="raised" label="Raised" />
-    <Button kind="raised" label="Raised accent" accent icon="favorite" />
-    <Button className="primary" kind="floating" icon="add" />
-    <Button mini kind="floating" icon="add" accent />
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating accent mini />
+    <Button icon='mood' toggle />
+    <Button toggle primary>
+      <GithubIcon />
+    </Button>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
   </div>
 );
 ```
@@ -30,16 +36,22 @@ const TestButtons = () => (
 
 | Name      | Type      | Default         | Description|
 |:-----|:-----|:-----|:-----|
-| `accent`    | `Bool`    | `false` | Indicates if the button should have accent color.|
+| `accent`    | `Boolean`   | `false` | Indicates if the button should have accent color.|
 | `className` | `String`  | `''` | Set a class to style the Component.|
 | `disabled`  | `Boolean` | `false` | If true, component will be disabled.|
+| `flat`      | `Boolean`  | `false` | If true, the button will have a flat look. |
+| `floating`  | `Boolean`  | `false` | If true, the button will have a floating look. |
 | `icon`      | `String`  |  | Value of the icon (See icon component). |
-| `kind`      | `String`  | `flat`  | Type of the component, overwrite this property if you need set a different stylesheet.|
 | `label`     | `String`  |  | The text string to use for the name of the button.|
 | `loading`   | `Boolean`  | `false` | If true, component will be disabled and show a loading animation.|
 | `mini`  | `Boolean` | `false`  | To be used with floating button. If true the button will be smaller.|
 | `onClick`  | `Function` |  | Callback called when the button is clicked.|
-| `primary`  | `false` | | If true, component will have the primary color.|
+| `primary`  | `false` | `false` | Indicates if the button should have primary color.|
+| `raised`   | `Boolean`  | `false` | If true, the button will have a raised look. |
 | `ripple`  | `Boolean`  | `true`    | If true, component will have a ripple effect on click.|
+| `toggle`   | `Boolean`  | `false` | If true, the button will have a toggle icon look. |
+| `tooptip`   | `String`  |  | The value will be shown as a tooltip when the button is hovered. |
+
+By default it will have neutral colors and a flat aspect even though the `flat` property is `false` by default. Also, some properties exclude others, for example a button cannot be `flat` and `raised` at the same time. 
 
 The `Button` component also accept children so if you want to provide a custom component and text instead of a `label` and `icon` you can do it too. Just check the examples.
diff --git a/components/button/style.scss b/components/button/style.scss
index fb5ae8fa..a8cb4334 100644
--- a/components/button/style.scss
+++ b/components/button/style.scss
@@ -23,7 +23,7 @@
   &::-moz-focus-inner {
     border: 0;
   }
-  > span {
+  > span:not(.tooltip) {
     @include typo-button();
     display: inline-block;
     line-height: $button-height;
@@ -33,7 +33,6 @@
     display: inline-block;
     width: 1em;
     height: 1em;
-    margin-right: .5 * $unit;
     font-size: 120%;
     vertical-align: middle;
     fill: currentColor;
@@ -55,6 +54,9 @@
     font-size: 120%;
     vertical-align: middle;
   }
+  > svg {
+    margin-right: .5 * $unit;
+  }
 }
 
 %disabled {
@@ -78,6 +80,33 @@
   }
 }
 
+.toggle {
+  @extend %button;
+  @extend %toggle;
+  width: $button-height;
+  background: transparent;
+  border-radius: 50%;
+  &:hover {
+    background: $button-flat-color-hover;
+  }
+  &:focus:not(:active) {
+    background: $button-flat-color-hover;
+  }
+  &[disabled] {
+    @extend %disabled;
+  }
+  .icon {
+    font-size: 120%;
+    vertical-align: middle;
+  }
+  .icon {
+    line-height: $button-height;
+  }
+  [data-react-toolbox="ripple"] {
+    border-radius: 50%;
+  }
+}
+
 .raised {
   @extend %button;
   @extend %squared;
@@ -129,7 +158,7 @@
     color: $button-primary-color-contrast;
     background: $button-primary-color;
   }
-  &.flat {
+  &.flat, &.toggle {
     color: $button-primary-color;
     &:hover {
       background: $button-primary-color-hover;
@@ -145,7 +174,7 @@
     color: $button-accent-color-contrast;
     background-color: $button-accent-color;
   }
-  &.flat {
+  &.flat, &.toggle {
     color: $button-accent-color;
     &:hover {
       background: $button-accent-color-hover;
@@ -156,6 +185,22 @@
   }
 }
 
+.neutral:not([disabled]) {
+  &.raised, &.floating {
+    color: $button-neutral-color-contrast;
+    background-color: $button-neutral-color;
+  }
+  &.flat, &.toggle {
+    color: $button-neutral-color-contrast;
+    &:hover {
+      background: $button-neutral-color-hover;
+    }
+    &:focus:not(:active) {
+      background: $button-neutral-color-hover;
+    }
+  }
+}
+
 .mini.floating {
   width: $button-floating-height-mini;
   height: $button-floating-height-mini;
diff --git a/components/drawer/readme.md b/components/drawer/readme.md
index 51ca8bc9..e1add337 100644
--- a/components/drawer/readme.md
+++ b/components/drawer/readme.md
@@ -18,7 +18,7 @@ class DrawerTest extends React.Component {
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
+        <Button label='Show Drawer' raised accent onClick={this.handleToggle} />
         <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
diff --git a/components/navigation/readme.md b/components/navigation/readme.md
index 5c41537d..72c0b9df 100644
--- a/components/navigation/readme.md
+++ b/components/navigation/readme.md
@@ -12,8 +12,8 @@ const links = [
 ];
 
 const actions = [
-  { label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
-  { label: 'Location', kind: 'raised', accent: true, icon: 'room'}
+  { label: 'Alarm', raised: true, icon: 'access-alarm'},
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 
 const NavigationTest = () => (
diff --git a/components/snackbar/index.jsx b/components/snackbar/index.jsx
index 06bc6324..4e7b9cec 100644
--- a/components/snackbar/index.jsx
+++ b/components/snackbar/index.jsx
@@ -30,7 +30,6 @@ class Snackbar extends React.Component {
       return (
         <Button
           className={style.button}
-          kind='flat'
           label={this.props.action}
           onClick={this.props.onClick}
         />
diff --git a/components/snackbar/readme.md b/components/snackbar/readme.md
index ddeec156..80dbde85 100644
--- a/components/snackbar/readme.md
+++ b/components/snackbar/readme.md
@@ -18,7 +18,7 @@ class SnackbarTest extends React.Component {
   render () {
     return (
       <section>
-        <Button label='Show Snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show Snackbar' raised onClick={this.handleClick} />
         <Snackbar
           action='Nice'
           icon='question-answer'
diff --git a/components/tooltip/readme.md b/components/tooltip/readme.md
index 75d86e87..a2dff7fb 100644
--- a/components/tooltip/readme.md
+++ b/components/tooltip/readme.md
@@ -10,7 +10,7 @@ import Tooltip from 'react-toolbox/lib/tooltip';
 const TooltipTest = () => (
   <div>
     <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
-    <Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
+    <Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
   </div>
 );
 ```
diff --git a/docs/app/components/layout/home/index.jsx b/docs/app/components/layout/home/index.jsx
index af26e52e..1167bc34 100644
--- a/docs/app/components/layout/home/index.jsx
+++ b/docs/app/components/layout/home/index.jsx
@@ -50,7 +50,7 @@ const Home = () => (
       </p>
 
       <Link to='/components'>
-        <Button label='Try it now!' kind='raised' accent />
+        <Button label='Try it now!' raised accent />
       </Link>
     </section>
 
diff --git a/docs/app/components/layout/install/install.md b/docs/app/components/layout/install/install.md
index 0c6fed71..f8842c43 100644
--- a/docs/app/components/layout/install/install.md
+++ b/docs/app/components/layout/install/install.md
@@ -21,7 +21,7 @@ import React from 'react';
 import Button from 'react-toolbox/lib/button';
 
 const CustomButton = () => (
-  <Button label="Hello world" kind="raised" accent />
+  <Button label="Hello world" raised accent />
 );
 
 export default CustomButton;
diff --git a/docs/app/components/layout/main/index.jsx b/docs/app/components/layout/main/index.jsx
index b0869d8c..cb9fe5c5 100644
--- a/docs/app/components/layout/main/index.jsx
+++ b/docs/app/components/layout/main/index.jsx
@@ -12,8 +12,8 @@ import style from './style';
 const LoadExampleButton = (props) => {
   return (
     <Button
+      raised
       accent
-      kind='raised'
       icon='code'
       label='Load in playground'
       onClick={props.onClick}
@@ -76,9 +76,9 @@ class Main extends React.Component {
         <Appbar className={style.appbar}/>
         <Button
           accent
+          floating
           className={style['playground-button']}
           icon={this.state.playground ? 'close' : 'code'}
-          kind='floating'
           onClick={this.handlePlayGroundClick}
         />
         <MainNavigation className={style.navigation} />
diff --git a/docs/app/components/layout/main/modules/examples/button_example_1.txt b/docs/app/components/layout/main/modules/examples/button_example_1.txt
index 282ec374..d929b590 100644
--- a/docs/app/components/layout/main/modules/examples/button_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/button_example_1.txt
@@ -6,14 +6,23 @@ const GithubIcon = () => (
 
 const ButtonsTest = () => (
   <div>
-    <Button href='http://github.com/javivelasco' target='_blank' kind='raised'>
-      <GithubIcon /> Github Profile
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
     </Button>
-    <Button label="Flat button" />
-    <Button kind="raised" label="Raised" />
-    <Button kind="raised" label="Raised accent" accent icon="favorite" />
-    <Button className="primary" kind="floating" icon="add" />
-    <Button mini kind="floating" icon="add" accent />
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating primary />
+    <Button icon='add' floating primary disabled />
+    <Button icon='add' floating accent mini />
+    <Button icon='mood' toggle />
+    <Button toggle primary>
+      <GithubIcon />
+    </Button>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
+    <Button icon='bookmark' label='Bookmark' raised primary loading />
   </div>
 );
 
diff --git a/docs/app/components/layout/main/modules/examples/drawer_example_1.txt b/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
index 98820fd2..1a0c95c4 100644
--- a/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/drawer_example_1.txt
@@ -10,7 +10,7 @@ class DrawerTest extends React.Component {
   render () {
     return (
       <div>
-        <Button kind='raised' accent label='Show Drawer' onClick={this.handleToggle} />
+        <Button raised accent label='Show Drawer' onClick={this.handleToggle} />
         <Drawer active={this.state.active} onOverlayClick={this.handleToggle}>
           <h5>This is your Drawer.</h5>
           <p>You can embed any content you want, for example a Menu.</p>
diff --git a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
index 7ac3efb2..151137d1 100644
--- a/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/navigation_example_1.txt
@@ -4,8 +4,8 @@ const links = [
 ];
 
 const actions = [
-  { label: 'Alarm', kind: 'raised', icon: 'access-alarm'},
-  { label: 'Location', kind: 'raised', accent: true, icon: 'room'}
+  { label: 'Alarm', raised: true, icon: 'access-alarm'},
+  { label: 'Location', raised: true, accent: true, icon: 'room'}
 ];
 
 const NavigationTest = () => (
diff --git a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
index 7701639b..e2a4a96c 100644
--- a/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/snackbar_example_1.txt
@@ -20,7 +20,7 @@ class SnackbarTest extends React.Component {
   render () {
     return (
       <section>
-        <Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show snackbar' raised primary onClick={this.handleClick} />
         <Snackbar
           action='Dismiss'
           active={this.state.active}
diff --git a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
index d9dbbccd..e50b1547 100644
--- a/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/tooltip_example_1.txt
@@ -1,7 +1,7 @@
 const TooltipTest = () => (
   <div>
     <p>Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.</p>
-    <Button label='Button with tooltip' kind='raised' accent tooltip='This is a tooltip by property' />
+    <Button label='Button with tooltip' raised accent tooltip='This is a tooltip by property' />
   </div>
 );
 
diff --git a/spec/components/button.jsx b/spec/components/button.jsx
index c492c58d..3d1f5571 100644
--- a/spec/components/button.jsx
+++ b/spec/components/button.jsx
@@ -11,17 +11,22 @@ const ButtonTest = () => (
   <section>
     <h5>Buttons</h5>
     <p>lorem ipsum...</p>
-    <Button href='http://github.com/javivelasco' target='_blank' kind='raised' accent>
-      <GithubIcon /> Github Profile
+
+    <Button href='http://github.com/javivelasco' target='_blank' raised>
+      <GithubIcon /> Github
     </Button>
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' />
-    <Button kind='flat' accent label='Inbox' icon='inbox' />
-    <Button kind='floating' primary icon='add' />
-    <Button kind='floating' primary disabled icon='add' />
-    <Button kind='floating' accent mini icon='add' />
-    <Button kind='flat' primary icon='add' label='Add this' />
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' loading />
-    <Button kind='flat' disabled icon='add' label='Add this' />
+    <Button icon='bookmark' label='Bookmark' accent />
+    <Button icon='bookmark' label='Bookmark' raised primary />
+    <Button icon='inbox' label='Inbox' flat />
+    <Button icon='add' floating />
+    <Button icon='add' floating primary />
+    <Button icon='add' floating primary disabled />
+    <Button icon='add' floating accent mini />
+    <Button icon='mood' toggle />
+    <Button toggle primary><GithubIcon /></Button>
+    <Button icon='add' label='Add this' flat primary />
+    <Button icon='add' label='Add this' flat disabled />
+    <Button icon='bookmark' label='Bookmark' raised primary loading />
   </section>
 );
 
diff --git a/spec/components/dialog.jsx b/spec/components/dialog.jsx
index 214face7..26cecff9 100644
--- a/spec/components/dialog.jsx
+++ b/spec/components/dialog.jsx
@@ -15,8 +15,8 @@ class DialogTest extends React.Component {
   }
 
   actions = [
-    { label: 'Disagree', type: 'flat', className: 'primary', onClick: this.handleToggle },
-    { label: 'Agree', type: 'flat', className: 'primary', onClick: this.handleToggle }
+    { label: 'Disagree', primary: true, onClick: this.handleToggle },
+    { label: 'Agree', primary: true, onClick: this.handleToggle }
   ];
 
   render () {
@@ -24,7 +24,7 @@ class DialogTest extends React.Component {
       <section>
         <h5>Dialog</h5>
         <p>lorem ipsum...</p>
-        <Button kind='raised' label='Show Dialog' onClick={this.handleToggle} />
+        <Button label='Show Dialog' raised primary onClick={this.handleToggle} />
         <Dialog
           actions={this.actions}
           active={this.state.active}
diff --git a/spec/components/drawer.jsx b/spec/components/drawer.jsx
index 19ed880e..f76fea7a 100644
--- a/spec/components/drawer.jsx
+++ b/spec/components/drawer.jsx
@@ -29,12 +29,12 @@ class DrawerTest extends React.Component {
         </Drawer>
 
         <Drawer active={this.state.rightActive} type='right'>
-          <Button label='Close' onClick={this.handleToggleRight} />
+          <Button primary label='Close' onClick={this.handleToggleRight} />
         </Drawer>
 
         <nav>
-          <Button accent label='Drawer left' kind='raised' onClick={this.handleToggleLeft} />
-          <Button primary label='Drawer right' kind='raised' onClick={this.handleToggleRight} />
+          <Button label='Drawer left' raised primary onClick={this.handleToggleLeft} />
+          <Button label='Drawer right' raised accent onClick={this.handleToggleRight} />
         </nav>
       </section>
     );
diff --git a/spec/components/snackbar.jsx b/spec/components/snackbar.jsx
index 4959098a..266a9cf3 100644
--- a/spec/components/snackbar.jsx
+++ b/spec/components/snackbar.jsx
@@ -27,7 +27,7 @@ class SnackbarTest extends React.Component {
       <section>
         <h5>Snackbars & Toasts</h5>
         <p>lorem ipsum...</p>
-        <Button label='Show snackbar' kind='raised' onClick={this.handleClick} />
+        <Button label='Show snackbar' primary raised onClick={this.handleClick} />
         <Snackbar
           action='Dismiss'
           active={this.state.active}
diff --git a/spec/components/tooltip.jsx b/spec/components/tooltip.jsx
index 375d67db..dd4c5011 100644
--- a/spec/components/tooltip.jsx
+++ b/spec/components/tooltip.jsx
@@ -7,9 +7,9 @@ const TooltipTest = () => (
   <section>
     <h5>Tooltip</h5>
     <p>Give information on :hover</p>
-    <Button kind='raised' primary label='Bookmark' icon='bookmark' tooltip='Bookmark Tooltip' />
-    <Button kind='floating' primary accent icon='add' tooltip='Floating Tooltip' />
-    <Button kind='floating' primary disabled icon='add' tooltip='Floating can not show' />
+    <Button label='Bookmark' icon='bookmark' raised primary tooltip='Bookmark Tooltip' />
+    <Button icon='add' floating accent tooltip='Floating Tooltip' />
+    <Button icon='add' floating disabled tooltip='Floating can not be shown' />
     <Input tooltip='lorem ipsum...'/>
     <p>
       Lorem ipsum dolor sit amet, <strong>consectetur<Tooltip label='This is a auto show tooltip' /></strong> adipiscing elit.
diff --git a/spec/root.jsx b/spec/root.jsx
index 8951ff4c..e2b025e6 100644
--- a/spec/root.jsx
+++ b/spec/root.jsx
@@ -37,7 +37,7 @@ const Root = () => (
         accent
         className={style.github}
         icon='web'
-        kind='floating'
+        floating
         onClick={_hrefProject}
       />
     </AppBarToolbox>