Use color for Button component instead of type (#150)

* Use color for Button component instead of type

* rename `inputType` prop to `type`(#149)

* rename `inputType` prop to `type`

* update version to 2.0.0

* update version to 2.0.0

src/components/button/button.js

@@ -5,16 +5,16 @@ import "./button.scss";
 export const Button = ({
   children,
   onClick,
-  type,
+  color,
   size,
   disabled,
   inverted,
-  inputType
+  type
 }) => {
   const classNames = ["button"];
 
-  if (type) {
-    classNames.push(`is-${type}`);
+  if (color) {
+    classNames.push(`is-${color}`);
   }
 
   if (size) {
@@ -27,7 +27,7 @@ export const Button = ({
 
   return (
     <button
-      type={inputType}
+      type={type}
       disabled={disabled}
       onClick={onClick}
       className={classNames.join(" ")}
@@ -40,16 +40,16 @@ export const Button = ({
 Button.propTypes = {
   children: PropTypes.node.isRequired,
   onClick: PropTypes.func,
-  type: PropTypes.oneOf(["primary", "danger", "warning"]),
+  color: PropTypes.oneOf(["primary", "danger", "warning"]),
   size: PropTypes.oneOf(["small", "medium", "large"]),
   disabled: PropTypes.bool,
   inverted: PropTypes.bool,
-  inputType: PropTypes.oneOf(["button", "submit", "reset"])
+  type: PropTypes.oneOf(["button", "submit", "reset"])
 };
 
 Button.defaultProps = {
-  type: "primary",
+  color: "primary",
   disabled: false,
   inverted: false,
-  inputType: "button"
+  type: "button"
 };

src/components/button/button.stories.js

@@ -9,7 +9,7 @@ function sayMyName() {
 
 export const primary = () => {
   return (
-    <Button type="primary" onClick={sayMyName}>
+    <Button color="primary" onClick={sayMyName}>
       Hello Friend
     </Button>
   );
@@ -41,7 +41,7 @@ export const disabledAndInverted = () => {
 
 export const danger = () => {
   return (
-    <Button type="danger" onClick={sayMyName}>
+    <Button color="danger" onClick={sayMyName}>
       Hello Friend
     </Button>
   );