diff --git a/src/components/Button/Button.css.js b/src/components/Button/Button.css.js
index bc3bbcede..3489efe8c 100644
--- a/src/components/Button/Button.css.js
+++ b/src/components/Button/Button.css.js
@@ -1,6 +1,7 @@
 // @flow
 import get from 'dash-get'
 import baseStyles from '../../styles/resets/baseStyles.css.js'
+import Spinner from '../Spinner'
 import styled from '../styled'
 import { getColor } from '../../styles/utilities/color'
 import forEach from '../../styles/utilities/forEach'
@@ -298,6 +299,18 @@ export const makeButtonUI = (selector = 'button') => {
       width: 100%;
     }
 
+    &.is-loading {
+      &.is-spinButtonOnLoading {
+        animation: SpinButtonOnLoadAnimation 700ms linear infinite;
+        will-change: transform;
+        @keyframes SpinButtonOnLoadAnimation {
+          100% {
+            transform: rotate(360deg);
+          }
+        }
+      }
+    }
+
     ${makeButtonSizeStyles()}
 
     ${props => makePrimaryStyles('primary', props)}
@@ -471,6 +484,12 @@ export const ButtonContentUI = styled('span')`
       pointer-events: none;
     }
   `};
+
+  ${({ isLoading }) =>
+    isLoading &&
+    `
+    opacity: 0.35;
+  `};
 `
 
 export const FocusUI = styled('span')`
@@ -506,3 +525,16 @@ export const FocusUI = styled('span')`
     }
   }
 `
+
+export const SpinnerUI = styled(Spinner)`
+  color: ${getColor('charcoal.500')};
+  margin: -6px 0 0 -6px;
+  position: absolute;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+`
+
+SpinnerUI.defaultProps = {
+  size: 12,
+}
diff --git a/src/components/Button/ButtonV2.js b/src/components/Button/ButtonV2.js
index 731ded1a6..47bf16a34 100644
--- a/src/components/Button/ButtonV2.js
+++ b/src/components/Button/ButtonV2.js
@@ -9,7 +9,12 @@ import { includes } from '../../utilities/arrays'
 import { noop } from '../../utilities/other'
 import { memoize } from '../../utilities/memoize'
 import RouteWrapper from '../RouteWrapper'
-import { makeButtonUI, ButtonContentUI, FocusUI } from './Button.css.js'
+import {
+  makeButtonUI,
+  ButtonContentUI,
+  FocusUI,
+  SpinnerUI,
+} from './Button.css.js'
 import { COMPONENT_KEY } from './utils'
 import { COMPONENT_KEY as ICON_KEY } from '../Icon/utils'
 
@@ -20,6 +25,7 @@ type Props = {
   children?: any,
   className?: string,
   disabled: boolean,
+  disableOnLoading: boolean,
   kind: ButtonKind,
   innerRef: (ref: any) => void,
   isActive: boolean,
@@ -27,8 +33,10 @@ type Props = {
   isFirst: boolean,
   isNotOnly: boolean,
   isLast: boolean,
+  isLoading: boolean,
   isSuffix: boolean,
   size: ButtonSize,
+  spinButtonOnLoading: boolean,
   state?: UIState,
   submit: boolean,
   theme?: string,
@@ -40,6 +48,7 @@ class Button extends Component<Props> {
     buttonRef: noop,
     canRenderFocus: true,
     disable: false,
+    disableOnLoading: true,
     kind: 'default',
     innerRef: noop,
     isActive: false,
@@ -49,6 +58,7 @@ class Button extends Component<Props> {
     isLast: false,
     isSuffix: false,
     size: 'md',
+    spinButtonOnLoading: false,
     submit: false,
   }
 
@@ -132,6 +142,8 @@ class Button extends Component<Props> {
       allowContentEventPropogation,
       children,
       className,
+      disabled,
+      disableOnLoading,
       kind,
       innerRef,
       isActive,
@@ -139,8 +151,10 @@ class Button extends Component<Props> {
       isFirst,
       isNotOnly,
       isLast,
+      isLoading,
       isSuffix,
       size,
+      spinButtonOnLoading,
       state,
       submit,
       theme,
@@ -149,16 +163,21 @@ class Button extends Component<Props> {
       ...rest
     } = this.props
 
+    const isDisabled = disabled || (isLoading && disableOnLoading)
+
     const componentClassName = classNames(
       'c-ButtonV2',
       isActive && 'is-active',
       isBlock && 'is-block',
+      isDisabled && 'is-disabled',
       isFirst && 'is-first',
       isNotOnly && 'is-notOnly',
       isLast && 'is-last',
+      isLoading && 'is-loading',
       isSuffix && 'is-suffix',
       kind && `is-${kind}`,
       size && `is-${size}`,
+      spinButtonOnLoading && 'is-spinButtonOnLoading',
       state && `is-${state}`,
       theme && `is-${theme}`,
       className
@@ -172,12 +191,15 @@ class Button extends Component<Props> {
       <ButtonUI
         {...getValidProps(rest)}
         className={componentClassName}
+        disabled={isDisabled}
         innerRef={this.setInnerRef}
         type={type}
       >
+        {isLoading ? <SpinnerUI /> : null}
         <ButtonContentUI
-          className="c-ButtonV2__content"
           allowContentEventPropogation={allowContentEventPropogation}
+          className="c-ButtonV2__content"
+          isLoading={isLoading}
         >
           {this.getChildrenMarkup()}
         </ButtonContentUI>
diff --git a/src/components/Button/__tests__/ButtonV2.test.js b/src/components/Button/__tests__/ButtonV2.test.js
index 040617951..41510d865 100644
--- a/src/components/Button/__tests__/ButtonV2.test.js
+++ b/src/components/Button/__tests__/ButtonV2.test.js
@@ -323,3 +323,47 @@ describe('Link', () => {
     expect(wrapper.find('button').length).toBeTruthy()
   })
 })
+
+describe('Loading', () => {
+  test('Add loading className, if isLoading', () => {
+    const wrapper = mount(<Button isLoading />)
+    const el = wrapper.find('button')
+
+    expect(el.hasClass('is-loading')).toBeTruthy()
+  })
+
+  test('Renders a spinner if isLoading', () => {
+    const wrapper = mount(<Button isLoading />)
+    const el = wrapper.find('div.c-Spinner')
+
+    expect(el.length).toBeTruthy()
+  })
+
+  test('Does not renders a spinner if not isLoading', () => {
+    const wrapper = mount(<Button isLoading={false} />)
+    const el = wrapper.find('div.c-Spinner')
+
+    expect(el.length).toBeFalsy()
+  })
+
+  test('Becomes disabled if isLoading, by default', () => {
+    const wrapper = mount(<Button isLoading />)
+    const el = wrapper.find('button')
+
+    expect(el.prop('disabled')).toBe(true)
+  })
+
+  test('Does not become disabled, if specified', () => {
+    const wrapper = mount(<Button isLoading disableOnLoading={false} />)
+    const el = wrapper.find('button')
+
+    expect(el.prop('disabled')).toBe(false)
+  })
+
+  test('Add special spinButtonOnLoading, if isLoading and enabled', () => {
+    const wrapper = mount(<Button isLoading spinButtonOnLoading />)
+    const el = wrapper.find('button')
+
+    expect(el.hasClass('is-spinButtonOnLoading')).toBeTruthy()
+  })
+})
diff --git a/src/components/Button/docs/ButtonV2.md b/src/components/Button/docs/ButtonV2.md
index d7978db69..42c7a075f 100644
--- a/src/components/Button/docs/ButtonV2.md
+++ b/src/components/Button/docs/ButtonV2.md
@@ -26,21 +26,24 @@ Alternatively, [PropProvider](../../PropProvider) can be used to set this prop a
 
 | Prop                         | Type       | Description                                                                     |
 | ---------------------------- | ---------- | ------------------------------------------------------------------------------- |
-| allowContentEventPropogation | `bool`     | Enables child events to pass through to Button. Default `true`.                 |
+| allowContentEventPropogation | `boolean`  | Enables child events to pass through to Button. Default `true`.                 |
 | className                    | `string`   | Custom class names to be added to the component.                                |
-| disabled                     | `bool`     | Disable the button so it can't be clicked.                                      |
+| disabled                     | `boolean`  | Disable the button so it can't be clicked.                                      |
+| disabledOnLoading            | `boolean`  | Disables the button when `isLoading` is true. Default `true`.                   |
 | fetch                        | `function` | function which returns a promise, will be invoked before routing the `to` route |
 | href                         | `string`   | Hyperlink for the button. This transforms the button to a `<a>` selector.       |
 | innerRef                     | `function` | Retrieves the `button` DOM node.                                                |
-| isFocused                    | `bool`     | Renders the focused style.                                                      |
-| isSuffix                     | `bool`     | Renders suffix styles.                                                          |
+| isFocused                    | `boolean`  | Renders the focused style.                                                      |
+| isLoading                    | `boolean`  | Renders a loading [Spinner](../../Spinner).                                     |
+| isSuffix                     | `boolean`  | Renders suffix styles.                                                          |
 | onBlur                       | `function` | `onBlur` event handler.                                                         |
 | onClick                      | `function` | `onClick` event handler.                                                        |
 | onFocus                      | `function` | `onFocus` event handler.                                                        |
 | kind                         | `string`   | Applies the specified style to the button.                                      |
 | size                         | `string`   | Sets the size of the button. Can be one of `"sm"`, `"md"` or `"lg"`.            |
+| spinButtonOnLoading          | `boolean`  | A special property that... spins the button if `isLoading`.                     |
 | state                        | `string`   | Applies state styles to the button.                                             |
-| submit                       | `bool`     | Sets the `type` of the button to `"submit"`.                                    |
+| submit                       | `boolean`  | Sets the `type` of the button to `"submit"`.                                    |
 | version                      | `number`   | Applies the version `2` variant of the button.                                  |
 | theme                        | `string`   | Applies a theme based style to the button.                                      |
 | to                           | `string`   | React Router path to navigate on click.                                         |
diff --git a/src/components/Spinner/README.md b/src/components/Spinner/README.md
index 13afe17d9..cff7b6f90 100644
--- a/src/components/Spinner/README.md
+++ b/src/components/Spinner/README.md
@@ -2,7 +2,6 @@
 
 A Spinner component provides the UI to indicate a loading state.
 
-
 ## Example
 
 ```jsx
@@ -12,21 +11,13 @@ A Spinner component provides the UI to indicate a loading state.
 </div>
 ```
 
-
 ## Props
 
-| Prop | Type | Description |
-| --- | --- | --- |
-| className | `string` | Custom class names to be added to the component. |
-| size | `string` | Determines the size of the spinner [Icon](../Icon). Default `md`. |
-
-
-### Sizes
-
-| Prop | Description |
-| --- | --- |
-| `xl` | Renders a 32x32 (px) spinner. |
-| `lg` | Renders a 24x24 (px) spinner. |
-| `md` | Renders a 20x20 (px) spinner. |
-| `sm` | Renders a 14x14 (px) spinner. |
-| `xs` | Renders a 10x10 (px) spinner. |
+| Prop      | Type              | Description                                                |
+| --------- | ----------------- | ---------------------------------------------------------- |
+| className | `string`          | Custom class names to be added to the component.           |
+| color     | `string`          | Color of the spinner. Default `currentColor`.              |
+| isRounded | `boolean`         | Rounds the stroke ends of the spinner SVG. Default `true`. |
+| shade     | `string`          | Determines the opacity of the spinner.                     |
+| size      | `number`/`string` | Determines the size of the spinner. Default `16`.          |
+| speed     | `number`          | Speed of the spinning animation (in `ms`). Default `1400`. |
diff --git a/src/components/Spinner/Spinner.css.ts b/src/components/Spinner/Spinner.css.ts
new file mode 100644
index 000000000..837d9375b
--- /dev/null
+++ b/src/components/Spinner/Spinner.css.ts
@@ -0,0 +1,85 @@
+import baseStyles from '../../styles/resets/base.css.js'
+import styled from '../styled'
+
+export const config = {
+  defaultSize: 16,
+  shades: {
+    extraMuted: '0.3',
+    faint: '0.4',
+    muted: '0.5',
+    slightlyMuted: '0.6',
+    subtle: '0.7',
+  },
+}
+
+export const SpinnerUI = styled('div')(props => {
+  const { spinnerSize } = props
+
+  return `
+    ${baseStyles};
+    display: block;
+    width: ${spinnerSize}px;
+    height: ${spinnerSize}px;
+  `
+})
+
+export const SpinnerSVGUI = styled('svg')(props => {
+  const { speed, spinnerSize } = props
+
+  return `
+    ${baseStyles};
+    animation: SpinnerUIAnimation ${speed}ms linear infinite;
+    display: block;
+    width: ${spinnerSize}px;
+    height: ${spinnerSize}px;
+    x: 0px;
+    y: 0px;
+    will-change: transform;
+
+    @keyframes SpinnerUIAnimation {
+      100% {
+        transform: rotate(360deg);
+      }
+    }
+  `
+})
+
+export const SpinnerCircleUI = styled('circle')(props => {
+  const { color, shade, isRounded, speed } = props
+
+  const lineCap = isRounded ? 'round' : 'square'
+  const opacity = config.shades[shade]
+
+  return `
+    ${baseStyles};
+    animation: SpinnerCircleUIAnimation ${speed}ms ease-in-out infinite;
+    display: block;
+    fill: transparent;
+    opacity: ${opacity};
+    stroke: ${color};
+    stroke-width: 3.6;
+    stroke-linecap: ${lineCap};
+    stroke-dasharray: 80px, 200px;
+    stroke-dashoffset: 0px;
+    will-change: transform, stroke-dashoffset;
+
+    @keyframes SpinnerCircleUIAnimation {
+      0% {
+        stroke-dasharray: 1px, 200px;
+        stroke-dashoffset: 0px;
+        opacity: 0;
+      }
+      0.1% {
+        opacity: 1;
+      }
+      50% {
+        stroke-dasharray: 100px, 200px;
+        stroke-dashoffset: -15px;
+      }
+      100% {
+        stroke-dasharray: 100px, 200px;
+        stroke-dashoffset: -125px;
+      }
+    }
+  `
+})
diff --git a/src/components/Spinner/Spinner.tsx b/src/components/Spinner/Spinner.tsx
new file mode 100644
index 000000000..79d432a1e
--- /dev/null
+++ b/src/components/Spinner/Spinner.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import VisuallyHidden from '../VisuallyHidden'
+import { classNames } from '../../utilities/classNames'
+import { isString } from '../../utilities/is'
+import { legacySizes } from './Spinner.utils'
+import { SpinnerUI, SpinnerSVGUI, SpinnerCircleUI } from './Spinner.css'
+
+export interface Props {
+  className?: string
+  color: string
+  shade: string
+  isRounded: boolean
+  speed: number
+  size: string | number
+}
+
+export class Spinner extends React.PureComponent<Props> {
+  static className = 'c-Spinner'
+  static defaultProps = {
+    color: 'currentColor',
+    isRounded: true,
+    shade: 'default',
+    size: 16,
+    speed: 1400,
+  }
+
+  getClassName() {
+    const { className } = this.props
+
+    return classNames(Spinner.className, className)
+  }
+
+  getSize(): number {
+    const { size } = this.props
+    const defaultSize = 16
+
+    if (isString(size)) {
+      return legacySizes[size] || defaultSize
+    }
+
+    return size
+  }
+
+  render() {
+    const { color, shade, isRounded, speed, ...rest } = this.props
+    const spinnerSize = this.getSize()
+
+    return (
+      <SpinnerUI
+        {...rest}
+        aria-busy={true}
+        className={this.getClassName()}
+        spinnerSize={spinnerSize}
+      >
+        <SpinnerSVGUI
+          className="c-SpinnerSVG"
+          speed={speed}
+          spinnerSize={spinnerSize}
+          viewBox="22 22 44 44"
+        >
+          <SpinnerCircleUI
+            {...{
+              className: 'c-SpinnerCircle',
+              color,
+              cx: 44,
+              cy: 44,
+              r: 20.2,
+              shade,
+              isRounded,
+              speed,
+              spinnerSize,
+            }}
+          />
+        </SpinnerSVGUI>
+        <VisuallyHidden>Loading</VisuallyHidden>
+      </SpinnerUI>
+    )
+  }
+}
+
+export default Spinner
diff --git a/src/components/Spinner/Spinner.types.ts b/src/components/Spinner/Spinner.types.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/src/components/Spinner/Spinner.utils.ts b/src/components/Spinner/Spinner.utils.ts
new file mode 100644
index 000000000..f78766826
--- /dev/null
+++ b/src/components/Spinner/Spinner.utils.ts
@@ -0,0 +1,7 @@
+export const legacySizes = {
+  xl: 32,
+  lg: 24,
+  md: 20,
+  sm: 14,
+  xs: 10,
+}
diff --git a/src/components/Spinner/__tests__/Spinner.test.tsx b/src/components/Spinner/__tests__/Spinner.test.tsx
new file mode 100644
index 000000000..0bf779e89
--- /dev/null
+++ b/src/components/Spinner/__tests__/Spinner.test.tsx
@@ -0,0 +1,73 @@
+import * as React from 'react'
+import { mount } from 'enzyme'
+import { Spinner } from '../Spinner'
+
+describe('ClassName', () => {
+  test('Has default className', () => {
+    const wrapper = mount(<Spinner />)
+    const el = wrapper.find('div.c-Spinner')
+
+    expect(el.hasClass('c-Spinner')).toBeTruthy()
+  })
+
+  test('Applies custom className if specified', () => {
+    const customClass = 'piano-key-neck-tie'
+    const wrapper = mount(<Spinner className={customClass} />)
+    const el = wrapper.find('div.c-Spinner')
+
+    expect(el.prop('className')).toContain(customClass)
+  })
+})
+
+describe('Accessibility', () => {
+  test('Contains aria-role', () => {
+    const wrapper = mount(<Spinner />)
+    const el = wrapper.find('div.c-Spinner')
+
+    expect(el.props()['aria-busy']).toBeTruthy()
+  })
+
+  test('Contains hidden loading text', () => {
+    const wrapper = mount(<Spinner />)
+    const o = wrapper.find('VisuallyHidden')
+
+    expect(o.length).toBeGreaterThan(0)
+  })
+})
+
+describe('Children', () => {
+  test('Does not render children', () => {
+    const wrapper = mount(
+      <Spinner>
+        <div className="child">Hello</div>
+      </Spinner>
+    )
+    const el = wrapper.find('div.child')
+
+    expect(el.length).toBe(0)
+  })
+})
+
+describe('Size', () => {
+  test('Uses legacy size (string -> number) if defined', () => {
+    const wrapper = mount(<Spinner size="lg" />)
+    const el = wrapper.find('.c-SpinnerSVG').first()
+
+    expect(el.prop('spinnerSize')).toBe(24)
+  })
+
+  test('Uses direct number size, if defined', () => {
+    const wrapper = mount(<Spinner size={123} />)
+    const el = wrapper.find('.c-SpinnerSVG').first()
+
+    expect(el.prop('spinnerSize')).toBe(123)
+  })
+
+  test('Falls back to defaultSize if legacy size is invalid', () => {
+    const defaultSize = 16
+    const wrapper = mount(<Spinner size="omg" />)
+    const el = wrapper.find('.c-SpinnerSVG').first()
+
+    expect(el.prop('spinnerSize')).toBe(defaultSize)
+  })
+})
diff --git a/src/components/Spinner/index.js b/src/components/Spinner/index.js
deleted file mode 100644
index 035f1bd62..000000000
--- a/src/components/Spinner/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import Icon from '../Icon'
-import VisuallyHidden from '../VisuallyHidden'
-import { classNames } from '../../utilities/classNames'
-import { sizeTypes } from './propTypes'
-
-export const propTypes = {
-  size: sizeTypes,
-}
-
-const defaultProps = {
-  size: 'md',
-}
-
-export const iconSizes = {
-  xl: '32',
-  lg: '24',
-  md: '20',
-  sm: '14',
-  xs: '10',
-}
-
-const Spinner = props => {
-  const { className, children, size, ...rest } = props
-
-  const componentClassName = classNames('c-Spinner', className)
-
-  return (
-    <div className={componentClassName} aria-busy="true" {...rest}>
-      <Icon className="c-Spinner__icon" name="spinner" size={iconSizes[size]} />
-      <VisuallyHidden>Loading</VisuallyHidden>
-    </div>
-  )
-}
-
-Spinner.propTypes = propTypes
-Spinner.defaultProps = defaultProps
-Spinner.displayName = 'Spinner'
-
-export default Spinner
diff --git a/src/components/Spinner/index.ts b/src/components/Spinner/index.ts
new file mode 100644
index 000000000..52d2a503a
--- /dev/null
+++ b/src/components/Spinner/index.ts
@@ -0,0 +1,3 @@
+import Spinner from './Spinner'
+
+export default Spinner
diff --git a/src/components/Spinner/propTypes.js b/src/components/Spinner/propTypes.js
deleted file mode 100644
index f513d798d..000000000
--- a/src/components/Spinner/propTypes.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import PropTypes from 'prop-types'
-
-export const sizeTypes = PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs'])
diff --git a/src/components/Spinner/tests/Spinner.test.js b/src/components/Spinner/tests/Spinner.test.js
deleted file mode 100644
index 551201d83..000000000
--- a/src/components/Spinner/tests/Spinner.test.js
+++ /dev/null
@@ -1,65 +0,0 @@
-import React from 'react'
-import { shallow } from 'enzyme'
-import { default as Spinner, iconSizes } from '../index'
-import { Icon, VisuallyHidden } from '../../index'
-
-describe('ClassName', () => {
-  test('Has default className', () => {
-    const wrapper = shallow(<Spinner />)
-
-    expect(wrapper.hasClass('c-Spinner')).toBeTruthy()
-  })
-
-  test('Applies custom className if specified', () => {
-    const customClass = 'piano-key-neck-tie'
-    const wrapper = shallow(<Spinner className={customClass} />)
-
-    expect(wrapper.prop('className')).toContain(customClass)
-  })
-})
-
-describe('Accessibility', () => {
-  test('Contains aria-role', () => {
-    const wrapper = shallow(<Spinner />)
-
-    expect(wrapper.props()['aria-busy']).toBeTruthy()
-  })
-
-  test('Contains hidden loading text', () => {
-    const wrapper = shallow(<Spinner />)
-    const o = wrapper.find(VisuallyHidden)
-
-    expect(o.length).toBeGreaterThan(0)
-  })
-})
-
-describe('Children', () => {
-  test('Does not render children', () => {
-    const wrapper = shallow(
-      <Spinner>
-        <div className="child">Hello</div>
-      </Spinner>
-    )
-    const el = wrapper.find('div.child')
-
-    expect(el.length).toBe(0)
-  })
-})
-
-describe('Icon', () => {
-  test('Renders a spinner Icon', () => {
-    const wrapper = shallow(<Spinner />)
-    const o = wrapper.find(Icon)
-
-    expect(o.length).toBe(1)
-    expect(o.prop('name')).toBe('spinner')
-  })
-
-  test('Can render a different size', () => {
-    const wrapper = shallow(<Spinner size="xs" />)
-    const o = wrapper.find(Icon)
-
-    expect(o.length).toBe(1)
-    expect(o.prop('size')).toBe(iconSizes['xs'])
-  })
-})
diff --git a/src/styles/components/Spinner.scss b/src/styles/components/Spinner.scss
index 4df5a5a3d..1e2667274 100644
--- a/src/styles/components/Spinner.scss
+++ b/src/styles/components/Spinner.scss
@@ -1,23 +1,2 @@
-.c-Spinner {
-  @import "../resets/base";
-  @import "../configs/color";
-  color: _color(grey, 700);
-  display: inline-block;
-
-  &__icon {
-    animation-name: BlueSpinnerSpin;
-    animation-duration: 700ms;
-    animation-iteration-count: infinite;
-    animation-timing-function: linear;
-    transform-origin: center center;
-  }
-
-  @keyframes BlueSpinnerSpin {
-    from {
-      transform: rotate(0deg);
-    }
-    to {
-      transform: rotate(360deg);
-    }
-  }
-}
+// Is now being rendered by Fancy :)
+// File exists to preserve @import implementation.
diff --git a/stories/ButtonV2.stories.js b/stories/ButtonV2.stories.js
index 4c1acb183..4a991ddbb 100644
--- a/stories/ButtonV2.stories.js
+++ b/stories/ButtonV2.stories.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { withKnobs, select } from '@storybook/addon-knobs'
+import { boolean, select, text } from '@storybook/addon-knobs'
 import {
   Button,
   ControlGroup,
@@ -12,7 +12,6 @@ import {
 import styled from '../src/components/styled'
 
 const stories = storiesOf('Button/V2', module)
-stories.addDecorator(withKnobs)
 
 const ContainerUI = styled('div')`
   background: #f1f3f5;
@@ -62,11 +61,42 @@ const makeButtonVariations = (props = {}) => {
   )
 }
 
-stories.add('default', () => (
-  <Button kind="secondary" version={2}>
-    Button
-  </Button>
-))
+stories.add('Default', () => {
+  const props = {
+    children: text('children', 'Button'),
+    disabled: boolean('disabled', false),
+    disableOnLoading: boolean('disableOnLoading', true),
+    isActive: boolean('isActive', false),
+    isBlock: boolean('isBlock', false),
+    isLoading: boolean('isLoading', false),
+    kind: select(
+      'kind',
+      {
+        primary: 'primary',
+        primaryAlt: 'primaryAlt',
+        secondary: 'secondary',
+        secondaryAlt: 'secondaryAlt',
+        default: 'default',
+        link: 'link',
+      },
+      'secondary'
+    ),
+    size: select(
+      'size',
+      {
+        xl: 'xl',
+        lgxl: 'lgxl',
+        lg: 'lg',
+        md: 'md',
+        sm: 'sm',
+        xs: 'xs',
+      },
+      'lg'
+    ),
+    spinButtonOnLoading: boolean('spinButtonOnLoading', false),
+  }
+  return <Button {...props} version={2} />
+})
 
 stories.add('everything', () => (
   <PropProvider value={{ Button: { version: 2 } }}>