Add primary style for button

src/components/base/Button.js

@@ -1,12 +0,0 @@
-// @flow
-
-import styled from 'styled-components'
-import { color } from 'styled-system'
-
-export default styled.button`
-  border: none;
-  height: 50px;
-  padding: 0 20px;
-
-  ${color};
-`

src/components/base/Button/index.js

@@ -0,0 +1,37 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+import { space, fontSize, fontWeight, color } from 'styled-system'
+
+const Base = styled.button.attrs({
+  px: 4,
+  fontSize: 1,
+})`
+  ${space};
+  ${color};
+  ${fontSize};
+  ${fontWeight};
+  border-radius: 5px;
+  border: none;
+  height: 40px;
+  box-shadow: ${p => (p.withShadow ? 'rgba(0, 0, 0, 0.2) 0 3px 10px' : '')};
+  outline: none;
+`
+
+type Props = {
+  primary?: boolean,
+}
+
+const Button = ({ primary, ...props }: Props) => {
+  if (primary) {
+    return <Base fontWeight="bold" color="white" bg="blue" withShadow {...props} />
+  }
+  return <Base {...props} />
+}
+
+Button.defaultProps = {
+  primary: false,
+}
+
+export default Button

src/components/base/Button/stories.js

@@ -0,0 +1,9 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+
+import Button from 'components/base/Button'
+
+const stories = storiesOf('Button', module)
+
+stories.add('basic', () => <Button>{'Do some action'}</Button>)
+stories.add('primary', () => <Button primary>{'Validate'}</Button>)