Add buttons

13 files changed, 308 insertions, 246 deletions

diff --git a/packages/forms/package-lock.json b/packages/forms/package-lock.json
index a3e000944..cdfab23b5 100644
--- a/packages/forms/package-lock.json
+++ b/packages/forms/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "@meetfranz/forms",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -60,30 +60,46 @@
         }
       }
     },
-    "brcast": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/brcast/-/brcast-3.0.1.tgz",
-      "integrity": "sha512-eI3yqf9YEqyGl9PCNTR46MGvDylGtaHjalcz6Q3fAPnP/PhpKkkve52vFdfGpwp4VUvK6LUr4TQN+2stCrEwTg=="
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
     },
-    "classnames": {
-      "version": "2.2.6",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
-      "integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
+    "core-js": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
+      "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
     },
-    "css-vendor": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-0.3.8.tgz",
-      "integrity": "sha1-ZCHP0wNM5mT+dnOXL9ARn8KJQfo=",
+    "create-react-class": {
+      "version": "15.6.3",
+      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
+      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
       "requires": {
-        "is-in-browser": "^1.0.2"
+        "fbjs": "^0.8.9",
+        "loose-envify": "^1.3.1",
+        "object-assign": "^4.1.1"
+      }
+    },
+    "encoding": {
+      "version": "0.1.12",
+      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
+      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
+      "requires": {
+        "iconv-lite": "~0.4.13"
       }
     },
-    "hoist-non-react-statics": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.2.1.tgz",
-      "integrity": "sha512-TFsu3TV3YLY+zFTZDrN8L2DTFanObwmBLpWvJs1qfUuEQ5bTAdFcwfx2T/bsCXfM9QHSLvjfP+nihEl0yvozxw==",
+    "fbjs": {
+      "version": "0.8.17",
+      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
+      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
       "requires": {
-        "react-is": "^16.3.2"
+        "core-js": "^1.0.0",
+        "isomorphic-fetch": "^2.1.1",
+        "loose-envify": "^1.0.0",
+        "object-assign": "^4.1.0",
+        "promise": "^7.1.1",
+        "setimmediate": "^1.0.5",
+        "ua-parser-js": "^0.7.18"
       }
     },
     "html-element-attributes": {
@@ -91,139 +107,33 @@
       "resolved": "https://registry.npmjs.org/html-element-attributes/-/html-element-attributes-1.3.1.tgz",
       "integrity": "sha512-UrRKgp5sQmRnDy4TEwAUsu14XBUlzKB8U3hjIYDjcZ3Hbp86Jtftzxfgrv6E/ii/h78tsaZwAnAE8HwnHr0dPA=="
     },
-    "hyphenate-style-name": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.2.tgz",
-      "integrity": "sha1-MRYKNpMK2vH8BMYHT360FGXU7Es="
-    },
-    "is-function": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.1.tgz",
-      "integrity": "sha1-Es+5i2W1fdPRk6MSH19uL0N2ArU="
+    "iconv-lite": {
+      "version": "0.4.24",
+      "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
+      "integrity": "sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==",
+      "requires": {
+        "safer-buffer": ">= 2.1.2 < 3"
+      }
     },
-    "is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    "is-stream": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
     },
-    "is-plain-object": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
-      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+    "isomorphic-fetch": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
+      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
       "requires": {
-        "isobject": "^3.0.1"
+        "node-fetch": "^1.0.1",
+        "whatwg-fetch": ">=0.10.0"
       }
     },
-    "isobject": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
-    },
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
     },
-    "jss": {
-      "version": "9.8.7",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-9.8.7.tgz",
-      "integrity": "sha512-awj3XRZYxbrmmrx9LUSj5pXSUfm12m8xzi/VKeqI1ZwWBtQ0kVPTs3vYs32t4rFw83CgFDukA8wKzOE9sMQnoQ==",
-      "requires": {
-        "is-in-browser": "^1.1.3",
-        "symbol-observable": "^1.1.0",
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-camel-case": {
-      "version": "6.1.0",
-      "resolved": "https://registry.npmjs.org/jss-camel-case/-/jss-camel-case-6.1.0.tgz",
-      "integrity": "sha512-HPF2Q7wmNW1t79mCqSeU2vdd/vFFGpkazwvfHMOhPlMgXrJDzdj9viA2SaHk9ZbD5pfL63a8ylp4++irYbbzMQ==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.2"
-      }
-    },
-    "jss-compose": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/jss-compose/-/jss-compose-5.0.0.tgz",
-      "integrity": "sha512-YofRYuiA0+VbeOw0VjgkyO380sA4+TWDrW52nSluD9n+1FWOlDzNbgpZ/Sb3Y46+DcAbOS21W5jo6SAqUEiuwA==",
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-default-unit": {
-      "version": "8.0.2",
-      "resolved": "https://registry.npmjs.org/jss-default-unit/-/jss-default-unit-8.0.2.tgz",
-      "integrity": "sha512-WxNHrF/18CdoAGw2H0FqOEvJdREXVXLazn7PQYU7V6/BWkCV0GkmWsppNiExdw8dP4TU1ma1dT9zBNJ95feLmg=="
-    },
-    "jss-expand": {
-      "version": "5.3.0",
-      "resolved": "https://registry.npmjs.org/jss-expand/-/jss-expand-5.3.0.tgz",
-      "integrity": "sha512-NiM4TbDVE0ykXSAw6dfFmB1LIqXP/jdd0ZMnlvlGgEMkMt+weJIl8Ynq1DsuBY9WwkNyzWktdqcEW2VN0RAtQg=="
-    },
-    "jss-extend": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/jss-extend/-/jss-extend-6.2.0.tgz",
-      "integrity": "sha512-YszrmcB6o9HOsKPszK7NeDBNNjVyiW864jfoiHoMlgMIg2qlxKw70axZHqgczXHDcoyi/0/ikP1XaHDPRvYtEA==",
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-global": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/jss-global/-/jss-global-3.0.0.tgz",
-      "integrity": "sha512-wxYn7vL+TImyQYGAfdplg7yaxnPQ9RaXY/cIA8hawaVnmmWxDHzBK32u1y+RAvWboa3lW83ya3nVZ/C+jyjZ5Q=="
-    },
-    "jss-nested": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/jss-nested/-/jss-nested-6.0.1.tgz",
-      "integrity": "sha512-rn964TralHOZxoyEgeq3hXY8hyuCElnvQoVrQwKHVmu55VRDd6IqExAx9be5HgK0yN/+hQdgAXQl/GUrBbbSTA==",
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-preset-default": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/jss-preset-default/-/jss-preset-default-4.5.0.tgz",
-      "integrity": "sha512-qZbpRVtHT7hBPpZEBPFfafZKWmq3tA/An5RNqywDsZQGrlinIF/mGD9lmj6jGqu8GrED2SMHZ3pPKLmjCZoiaQ==",
-      "requires": {
-        "jss-camel-case": "^6.1.0",
-        "jss-compose": "^5.0.0",
-        "jss-default-unit": "^8.0.2",
-        "jss-expand": "^5.3.0",
-        "jss-extend": "^6.2.0",
-        "jss-global": "^3.0.0",
-        "jss-nested": "^6.0.1",
-        "jss-props-sort": "^6.0.0",
-        "jss-template": "^1.0.1",
-        "jss-vendor-prefixer": "^7.0.0"
-      }
-    },
-    "jss-props-sort": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/jss-props-sort/-/jss-props-sort-6.0.0.tgz",
-      "integrity": "sha512-E89UDcrphmI0LzmvYk25Hp4aE5ZBsXqMWlkFXS0EtPkunJkRr+WXdCNYbXbksIPnKlBenGB9OxzQY+mVc70S+g=="
-    },
-    "jss-template": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/jss-template/-/jss-template-1.0.1.tgz",
-      "integrity": "sha512-m5BqEWha17fmIVXm1z8xbJhY6GFJxNB9H68GVnCWPyGYfxiAgY9WTQyvDAVj+pYRgrXSOfN5V1T4+SzN1sJTeg==",
-      "requires": {
-        "warning": "^3.0.0"
-      }
-    },
-    "jss-vendor-prefixer": {
-      "version": "7.0.0",
-      "resolved": "https://registry.npmjs.org/jss-vendor-prefixer/-/jss-vendor-prefixer-7.0.0.tgz",
-      "integrity": "sha512-Agd+FKmvsI0HLcYXkvy8GYOw3AAASBUpsmIRvVQheps+JWaN892uFOInTr0DRydwaD91vSSUCU4NssschvF7MA==",
-      "requires": {
-        "css-vendor": "^0.3.8"
-      }
-    },
-    "lodash": {
-      "version": "4.17.11",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.11.tgz",
-      "integrity": "sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg=="
-    },
     "loose-envify": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
@@ -232,18 +142,13 @@
         "js-tokens": "^3.0.0 || ^4.0.0"
       }
     },
-    "mobx": {
-      "version": "5.8.0",
-      "resolved": "https://registry.npmjs.org/mobx/-/mobx-5.8.0.tgz",
-      "integrity": "sha512-NsZB+9bF5j+nv9Qwk6bNeE3np26a4TbTGkMpOLf6o1zXoM9BtHPQn/00px4uZ2AXJXtQML5P4MEWdMm6icMIfQ=="
-    },
-    "mobx-react": {
-      "version": "5.4.3",
-      "resolved": "https://registry.npmjs.org/mobx-react/-/mobx-react-5.4.3.tgz",
-      "integrity": "sha512-WC8yFlwvJ91hy8j6CrydAuFteUafcuvdITFQeHl3LRIf5ayfT/4W3M/byhEYD2BcJWejeXr8y4Rh2H26RunCRQ==",
+    "node-fetch": {
+      "version": "1.7.3",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
+      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
       "requires": {
-        "hoist-non-react-statics": "^3.0.0",
-        "react-lifecycles-compat": "^3.0.2"
+        "encoding": "^0.1.11",
+        "is-stream": "^1.0.1"
       }
     },
     "object-assign": {
@@ -251,6 +156,14 @@
       "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "prop-types": {
       "version": "15.6.2",
       "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
@@ -260,17 +173,6 @@
         "object-assign": "^4.1.1"
       }
     },
-    "react": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
-      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2",
-        "scheduler": "^0.12.0"
-      }
-    },
     "react-html-attributes": {
       "version": "1.4.3",
       "resolved": "https://registry.npmjs.org/react-html-attributes/-/react-html-attributes-1.4.3.tgz",
@@ -279,67 +181,40 @@
         "html-element-attributes": "^1.0.0"
       }
     },
-    "react-is": {
-      "version": "16.7.0",
-      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.7.0.tgz",
-      "integrity": "sha512-Z0VRQdF4NPDoI0tsXVMLkJLiwEBa+RP66g0xDHxgxysxSoCUccSten4RTF/UFvZF1dZvZ9Zu1sx+MDXwcOR34g=="
-    },
-    "react-jss": {
-      "version": "8.6.1",
-      "resolved": "https://registry.npmjs.org/react-jss/-/react-jss-8.6.1.tgz",
-      "integrity": "sha512-SH6XrJDJkAphp602J14JTy3puB2Zxz1FkM3bKVE8wON+va99jnUTKWnzGECb3NfIn9JPR5vHykge7K3/A747xQ==",
+    "react-loader": {
+      "version": "2.4.5",
+      "resolved": "https://registry.npmjs.org/react-loader/-/react-loader-2.4.5.tgz",
+      "integrity": "sha1-zT5VHGzQc4wcDxPwc2VPk4KL5ak=",
       "requires": {
-        "hoist-non-react-statics": "^2.5.0",
-        "jss": "^9.7.0",
-        "jss-preset-default": "^4.3.0",
-        "prop-types": "^15.6.0",
-        "theming": "^1.3.0"
-      },
-      "dependencies": {
-        "hoist-non-react-statics": {
-          "version": "2.5.5",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-          "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
-        }
+        "create-react-class": "^15.5.2",
+        "prop-types": "^15.5.8",
+        "spin.js": "2.x"
       }
     },
-    "react-lifecycles-compat": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
-      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
+    "safer-buffer": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
+      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
     },
-    "scheduler": {
-      "version": "0.12.0",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
-      "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
-      "requires": {
-        "loose-envify": "^1.1.0",
-        "object-assign": "^4.1.1"
-      }
+    "setimmediate": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/setimmediate/-/setimmediate-1.0.5.tgz",
+      "integrity": "sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU="
     },
-    "symbol-observable": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
-      "integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
+    "spin.js": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/spin.js/-/spin.js-2.3.2.tgz",
+      "integrity": "sha1-bKpW1SBnNFD9XPvGlx5tB3LDeho="
     },
-    "theming": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/theming/-/theming-1.3.0.tgz",
-      "integrity": "sha512-ya5Ef7XDGbTPBv5ENTwrwkPUexrlPeiAg/EI9kdlUAZhNlRbCdhMKRgjNX1IcmsmiPcqDQZE6BpSaH+cr31FKw==",
-      "requires": {
-        "brcast": "^3.0.1",
-        "is-function": "^1.0.1",
-        "is-plain-object": "^2.0.1",
-        "prop-types": "^15.5.8"
-      }
+    "ua-parser-js": {
+      "version": "0.7.19",
+      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.19.tgz",
+      "integrity": "sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ=="
     },
-    "warning": {
+    "whatwg-fetch": {
       "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/warning/-/warning-3.0.0.tgz",
-      "integrity": "sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w=",
-      "requires": {
-        "loose-envify": "^1.0.0"
-      }
+      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
+      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
     }
   }
 }
diff --git a/packages/forms/package.json b/packages/forms/package.json
index 68584e626..68bd4d50e 100644
--- a/packages/forms/package.json
+++ b/packages/forms/package.json
@@ -26,12 +26,16 @@
     "@mdi/js": "^3.3.92",
     "@mdi/react": "^1.1.0",
     "@meetfranz/theme": "file:../theme",
+    "react-html-attributes": "^1.4.3",
+    "react-loader": "^2.4.5"
+  },
+  "peerDependencies": {
     "classnames": "^2.2.6",
     "lodash": "^4.17.11",
+    "react": "^16.7.0",
     "mobx": "^5.8.0",
     "mobx-react": "^5.4.3",
-    "react": "^16.7.0",
-    "react-html-attributes": "^1.4.3",
+    "react-dom": "16.7.0",
     "react-jss": "^8.6.1"
   },
   "gitHead": "e9a48f96f8659dcd6ac07a8445f60f27d6ae698a"
diff --git a/packages/forms/src/button/index.tsx b/packages/forms/src/button/index.tsx
new file mode 100644
index 000000000..c4a138b16
--- /dev/null
+++ b/packages/forms/src/button/index.tsx
@@ -0,0 +1,172 @@
+import { Theme } from '@meetfranz/theme';
+import classnames from 'classnames';
+import CSS from 'csstype';
+import { observer } from 'mobx-react';
+import React, { Component } from 'react';
+import injectStyle from 'react-jss';
+import Loader from 'react-loader';
+
+import { IFormField, IWithStyle } from '../typings/generic';
+
+type ButtonType = 'primary' | 'secondary' | 'danger' | 'warning' | 'inverted';
+
+interface IProps extends React.InputHTMLAttributes<HTMLButtonElement>, IFormField, IWithStyle {
+  buttonType?: ButtonType;
+  stretch?: boolean;
+  loaded?: boolean;
+  busy?: boolean;
+}
+
+interface IState {
+  busy: boolean;
+}
+
+const styles = (theme: Theme) => ({
+  button: {
+    borderRadius: theme.borderRadiusSmall,
+    border: 'none',
+    display: 'flex',
+    position: 'relative' as CSS.PositionProperty,
+    transition: 'background .5s',
+    textAlign: 'center' as CSS.TextAlignProperty,
+    outline: 'none',
+    alignItems: 'center',
+    padding: 0,
+    width: (props: IProps) => (props.stretch ? '100%' : 'auto') as CSS.WidthProperty<string>,
+    fontSize: theme.uiFontSize,
+  },
+  label: {
+    margin: '10px 20px',
+    width: '100%',
+  },
+  primary: {
+    background: theme.buttonPrimaryBackground,
+    color: theme.buttonPrimaryTextColor,
+  },
+  secondary: {
+    background: theme.buttonSecondaryBackground,
+    color: theme.buttonSecondaryTextColor,
+  },
+  danger: {
+    background: theme.buttonDangerBackground,
+    color: theme.buttonDangerTextColor,
+  },
+  warning: {
+    background: theme.buttonWarningBackground,
+    color: theme.buttonWarningTextColor,
+  },
+  inverted: {
+    background: theme.buttonInvertedBackground,
+    color: theme.buttonInvertedTextColor,
+    border: theme.buttonInvertedBorder,
+  },
+  disabled: {
+    opacity: theme.inputDisabledOpacity,
+  },
+  loader: {
+    position: 'relative' as CSS.PositionProperty,
+    width: 20,
+    height: 18,
+    zIndex: 9999,
+  },
+  loaderContainer: {
+    width: (props: IProps): string => (!props.busy ? '0' : '40px'),
+    height: 20,
+    overflow: 'hidden',
+    transition: 'all 0.3s',
+    marginLeft: (props: IProps): number => !props.busy ? 10 : 20,
+    marginRight: (props: IProps): number => !props.busy ? -10 : -20,
+    position: (props: IProps): CSS.PositionProperty => props.stretch ? 'absolute' : 'inherit',
+  },
+});
+
+@observer
+class ButtonComponent extends Component<IProps> {
+  public static defaultProps = {
+    type: 'button',
+    disabled: false,
+    onClick: () => null,
+    buttonType: 'primary' as ButtonType,
+    stretch: false,
+    busy: false,
+  };
+
+  state = {
+    busy: false,
+  };
+
+  componentWillMount() {
+    this.setState({ busy: this.props.busy });
+  }
+
+  componentWillReceiveProps(nextProps: IProps) {
+    if (nextProps.busy !== this.props.busy) {
+      if (this.props.busy) {
+        setTimeout(() => {
+          this.setState({ busy: nextProps.busy });
+        },         300);
+      } else {
+        this.setState({ busy: nextProps.busy });
+      }
+    }
+  }
+
+  render() {
+    const {
+      classes,
+      theme,
+      disabled,
+      id,
+      label,
+      type,
+      onClick,
+      buttonType,
+      loaded,
+      busy: busyProp,
+    } = this.props;
+
+    const {
+      busy,
+    } = this.state;
+
+    let showLoader = false;
+    if (loaded) {
+      showLoader = !loaded;
+      console.warn('Franz Button prop `loaded` will be deprecated in the future. Please use `busy` instead');
+    }
+    if (busy) {
+      showLoader = busy;
+    }
+
+    return (
+      <button
+        id={id}
+        type={type}
+        onClick={onClick}
+        className={classnames({
+          [`${classes.button}`]: true,
+          [`${classes[buttonType as ButtonType]}`]: true,
+          [`${classes.disabled}`]: disabled,
+        })}
+        disabled={disabled}
+      >
+        <div className={classes.loaderContainer}>
+          {showLoader && (
+            <Loader
+              loaded={false}
+              width={4}
+              scale={0.45}
+              color={theme.buttonLoaderColor[buttonType!]}
+              parentClassName={classes.loader}
+            />
+          )}
+        </div>
+        <div className={classes.label}>
+          {label}
+        </div>
+      </button>
+    );
+  }
+}
+
+export const Button = injectStyle(styles)(ButtonComponent);
diff --git a/packages/forms/src/error/styles.ts b/packages/forms/src/error/styles.ts
index 36a2b24e7..5104838a5 100644
--- a/packages/forms/src/error/styles.ts
+++ b/packages/forms/src/error/styles.ts
@@ -4,5 +4,6 @@ export default (theme: Theme) => ({
   message: {
     color: theme.brandDanger,
     margin: '5px 0 0',
+    fontSize: theme.uiFontSize,
   },
 });
diff --git a/packages/forms/src/index.ts b/packages/forms/src/index.ts
index a506de111..fbeb7e3d3 100644
--- a/packages/forms/src/index.ts
+++ b/packages/forms/src/index.ts
@@ -1,2 +1,3 @@
 export { Input } from './input';
 export { Toggle } from './toggle';
+export { Button } from './button';
diff --git a/packages/forms/src/input/index.tsx b/packages/forms/src/input/index.tsx
index d82ee5fe3..8f17ba2f9 100644
--- a/packages/forms/src/input/index.tsx
+++ b/packages/forms/src/input/index.tsx
@@ -34,6 +34,7 @@ class InputComponent extends Component<IProps, IState> {
   public static defaultProps = {
     focus: false,
     onChange: () => {},
+    onBlur: () => {},
     scorePassword: false,
     showLabel: true,
     showPasswordToggle: false,
@@ -74,6 +75,7 @@ class InputComponent extends Component<IProps, IState> {
   render() {
     const {
       classes,
+      className,
       disabled,
       error,
       id,
@@ -84,6 +86,11 @@ class InputComponent extends Component<IProps, IState> {
       showLabel,
       showPasswordToggle,
       type,
+      value,
+      name,
+      placeholder,
+      spellCheck,
+      onBlur,
     } = this.props;
 
     const {
@@ -91,18 +98,7 @@ class InputComponent extends Component<IProps, IState> {
       passwordScore,
     } = this.state;
 
-    const inputProps = pick(this.props, htmlElementAttributes['input']);
-
-    if (type === 'password' && showPassword) {
-      inputProps.type = 'text';
-    }
-
-    inputProps.onChange = this.onChange.bind(this);
-
-    const cssClasses = classnames({
-      [`${inputProps.className}`]: inputProps.className,
-      [`${classes.input}`]: true,
-    });
+    const inputType = type === 'password' && showPassword ? 'text' : type;
 
     return (
       <Wrapper>
@@ -110,10 +106,11 @@ class InputComponent extends Component<IProps, IState> {
           title={label}
           showLabel={showLabel}
           htmlFor={id}
+          className={className}
         >
           <div
             className={classnames({
-              [`${classes.hasPasswordScore}`]: showPasswordToggle,
+              [`${classes.hasPasswordScore}`]: scorePassword,
               [`${classes.wrapper}`]: true,
               [`${classes.disabled}`]: disabled,
               [`${classes.hasError}`]: error,
@@ -124,9 +121,16 @@ class InputComponent extends Component<IProps, IState> {
               </span>
             )}
             <input
-              {...inputProps}
-              className={cssClasses}
+              id={id}
+              type={inputType}
+              name={name}
+              value={value}
+              placeholder={placeholder}
+              spellCheck={spellCheck}
+              className={classes.input}
               ref={this.inputRef}
+              onChange={this.onChange.bind(this)}
+              onBlur={onBlur}
             />
             {suffix && (
               <span className={classes.suffix}>
diff --git a/packages/forms/src/input/styles.ts b/packages/forms/src/input/styles.ts
index 2b34e92c3..a64d2c340 100644
--- a/packages/forms/src/input/styles.ts
+++ b/packages/forms/src/input/styles.ts
@@ -6,12 +6,10 @@ const prefixStyles = (theme: Theme) => ({
   color: theme.inputPrefixColor,
   lineHeight: theme.inputHeight,
   padding: '0 10px',
+  fontSize: theme.uiFontSize,
 });
 
 export default (theme: Theme) => ({
-  container: {
-    // display: 'flex',
-  },
   disabled: {
     opacity: theme.inputDisabledOpacity,
   },
@@ -33,7 +31,7 @@ export default (theme: Theme) => ({
   input: {
     background: 'none',
     border: 0,
-    fontSize: theme.inputFontSize,
+    fontSize: theme.uiFontSize,
     outline: 'none',
     padding: 8,
     width: '100%',
diff --git a/packages/forms/src/label/styles.ts b/packages/forms/src/label/styles.ts
index 64011a93d..f3998de04 100644
--- a/packages/forms/src/label/styles.ts
+++ b/packages/forms/src/label/styles.ts
@@ -6,6 +6,7 @@ export default (theme: Theme) => ({
   },
   label: {
     color: theme.labelColor,
+    fontSize: theme.uiFontSize,
   },
   hasError: {
     color: theme.brandDanger,
diff --git a/packages/forms/src/toggle/index.tsx b/packages/forms/src/toggle/index.tsx
index 759694dc8..a1cd7f1a4 100644
--- a/packages/forms/src/toggle/index.tsx
+++ b/packages/forms/src/toggle/index.tsx
@@ -11,9 +11,7 @@ import Error from '../error';
 import Label from '../label';
 import Wrapper from '../wrapper';
 
-interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {
-  // field: any;
-}
+interface IProps extends React.InputHTMLAttributes<HTMLInputElement>, IFormField, IWithStyle {}
 
 const styles = (theme: Theme) => ({
   toggle: {
@@ -42,7 +40,7 @@ const styles = (theme: Theme) => ({
     visibility: 'hidden' as any,
   },
   disabled: {
-    opacity: 0.5,
+    opacity: theme.inputDisabledOpacity,
   },
   toggleLabel: {
     display: 'flex',
@@ -77,8 +75,6 @@ class ToggleComponent extends Component<IProps> {
       onChange,
     } = this.props;
 
-    console.log('props', this.props);
-
     return (
       <Wrapper>
         <Label
diff --git a/packages/forms/src/typings/generic.ts b/packages/forms/src/typings/generic.ts
index bd3ea364b..b7f2fc452 100644
--- a/packages/forms/src/typings/generic.ts
+++ b/packages/forms/src/typings/generic.ts
@@ -1,3 +1,4 @@
+import { Theme } from '@meetfranz/theme/lib';
 import { Classes } from 'jss';
 
 export interface IFormField {
@@ -8,6 +9,7 @@ export interface IFormField {
 
 export interface IWithStyle {
   classes: Classes;
+  theme: Theme;
 }
 
 export type Merge<M, N> = Omit<M, Extract<keyof M, keyof N>> & N;
diff --git a/packages/forms/src/wrapper/index.tsx b/packages/forms/src/wrapper/index.tsx
index b3e92da66..633cc4c99 100644
--- a/packages/forms/src/wrapper/index.tsx
+++ b/packages/forms/src/wrapper/index.tsx
@@ -18,7 +18,7 @@ class Wrapper extends Component<IProps> {
     } = this.props;
 
     return (
-    <div className={classes.container}>
+      <div className={classes.container}>
         {children}
       </div>
     );
diff --git a/packages/forms/typings/react-html-attributes.d.ts b/packages/forms/typings/react-html-attributes.d.ts
deleted file mode 100644
index 6f8f20fe4..000000000
--- a/packages/forms/typings/react-html-attributes.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-declare module 'react-html-attributes';
diff --git a/packages/forms/webpack.config.js b/packages/forms/webpack.config.js
index 8ad7ee3b6..cc3370359 100644
--- a/packages/forms/webpack.config.js
+++ b/packages/forms/webpack.config.js
@@ -7,4 +7,13 @@ module.exports = Object.assign({}, baseConfig, {
     path: path.join(__dirname, 'lib'),
     libraryTarget: 'commonjs2',
   },
+  externals: {
+    react: 'react',
+    reactDom: 'react-dom',
+    classnames: 'classnames',
+    lodash: 'lodash',
+    mobx: 'mobx',
+    mobxReact: 'mobx-react',
+    reactJss: 'react-jss',
+  },
 });