Remove Button state prop

src/components/button/__test__/__snapshots__/button.test.js.snap

@@ -176,6 +176,15 @@ exports[`Button component Should exist 1`] = `[Function]`;
 
 exports[`Button component Should expose Button Group 1`] = `[Function]`;
 
+exports[`Button component Should render active state 1`] = `
+<button
+  className="is-active button"
+  disabled={false}
+  onClick={[Function]}
+  tabIndex={0}
+/>
+`;
+
 exports[`Button component Should render as a React element link with to prop 1`] = `
 <a
   href="http://google.com"
@@ -209,3 +218,30 @@ exports[`Button component Should render be disabled 1`] = `
   tabIndex={-1}
 />
 `;
+
+exports[`Button component Should render focused state 1`] = `
+<button
+  className="is-focused button"
+  disabled={false}
+  onClick={[Function]}
+  tabIndex={0}
+/>
+`;
+
+exports[`Button component Should render hovered state 1`] = `
+<button
+  className="is-hovered button"
+  disabled={false}
+  onClick={[Function]}
+  tabIndex={0}
+/>
+`;
+
+exports[`Button component Should render loading state 1`] = `
+<button
+  className="is-loading button"
+  disabled={false}
+  onClick={[Function]}
+  tabIndex={0}
+/>
+`;

src/components/button/__test__/button.test.js

@@ -61,6 +61,22 @@ describe('Button component', () => {
     const component = renderer.create(<Button disabled />);
     expect(component.toJSON()).toMatchSnapshot();
   });
+  it('Should render loading state', () => {
+    const component = renderer.create(<Button loading />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should render focused state', () => {
+    const component = renderer.create(<Button focused />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should render hovered state', () => {
+    const component = renderer.create(<Button hovered />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
+  it('Should render active state', () => {
+    const component = renderer.create(<Button active />);
+    expect(component.toJSON()).toMatchSnapshot();
+  });
   it('Should be a submit form button', () => {
     const component = renderer.create(<Button submit />);
     expect(component.toJSON()).toMatchSnapshot();

src/components/button/button.js

@@ -17,10 +17,12 @@ const Button = ({
   size,
   outlined,
   inverted,
-  state,
   submit,
   reset,
   fullwidth,
+  focused,
+  hovered,
+  active,
   loading,
   disabled,
   remove,
@@ -31,7 +33,6 @@ const Button = ({
   text,
   ...props
 }) => {
-  // let Element = isStatic ? 'span' : renderAs;
   let otherProps = {};
   if (submit) {
     otherProps = {
@@ -63,13 +64,15 @@ const Button = ({
       className={classnames(className, {
         [`is-${color}`]: color,
         [`is-${size}`]: size,
-        [`is-${state}`]: state,
         'is-selected': isSelected,
         'is-static': isStatic,
         'is-rounded': rounded,
         'is-outlined': outlined,
         'is-inverted': inverted,
         'is-fullwidth': fullwidth,
+        'is-hovered': hovered,
+        'is-focused': focused,
+        'is-active': active,
         'is-loading': loading,
         'is-text': text,
         delete: remove,
@@ -92,11 +95,13 @@ Button.propTypes = {
   onClick: PropTypes.func,
   color: PropTypes.oneOf(colors),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
-  state: PropTypes.oneOf(['hover', 'focus', 'active', 'loading']),
   outlined: PropTypes.bool,
   inverted: PropTypes.bool,
   submit: PropTypes.bool,
   reset: PropTypes.bool,
+  hovered: PropTypes.bool,
+  focused: PropTypes.bool,
+  active: PropTypes.bool,
   loading: PropTypes.bool,
   fullwidth: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -116,12 +121,14 @@ Button.defaultProps = {
   onClick: () => null,
   color: undefined,
   size: undefined,
-  state: undefined,
   outlined: false,
   inverted: false,
   submit: false,
   reset: false,
   fullwidth: false,
+  hovered: false,
+  focused: false,
+  active: false,
   loading: false,
   disabled: false,
   remove: false,