initial button implementation

ui/src/components/button/index.js

@@ -1,15 +1,24 @@
+const classNames = require('classnames');
 const React = require('react');
 const styles = require('./style.css');
 
 const Button = ({
   disabled = false,
+  secundary = false,
   className,
   style,
   children
 }) => {
+  const cn = classNames(
+    className,
+    styles.button,
+    secundary ? styles.secundary : styles.primary,
+    disabled ? styles.inactive : '',
+  );
+
   return (
     <button
-      className={styles.button}
+      className={cn}
       disabled={disabled}
       style={style}
     >
@@ -22,6 +31,7 @@ Button.propTypes = {
   children: React.PropTypes.node,
   className: React.PropTypes.string,
   disabled: React.PropTypes.bool,
+  secundary: React.PropTypes.bool,
   style: React.PropTypes.object
 };
 

ui/src/components/button/readme.md

@@ -5,11 +5,35 @@
 ```embed
 const React = require('react');
 const ReactDOM = require('react-dom/server');
+const Base = require('../base');
+const Container = require('../container');
+const Row = require('../row');
+const Column = require('../column');
 const Button = require('./index.js');
 const styles = require('./style.css');
 
 nmodule.exports = ReactDOM.renderToString(
-  <Button>Hello World</Button>
+  <Base>
+    <Container>
+      <Row>
+        <Column>
+          <Button>
+            Create an Instance
+          </Button>
+        </Column>
+        <Column>
+          <Button secundary>
+            Cancel
+          </Button>
+        </Column>
+        <Column>
+          <Button disabled>
+            Inactive Button
+          </Button>
+        </Column>
+      </Row>
+    </Container>
+  </Base>
 );
 ```
 
@@ -21,7 +45,7 @@ const Button = require('ui/button');
 
 module.exports = () => {
   return (
-    <Button disabled={false}>
+    <Button>
       Hello World
     </Button>
   );

ui/src/components/button/style.css

@@ -1,4 +1,25 @@
 .button {
-  background-color: #e500ee;
-  margin: none;
-}
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-size: 16px;
+  border-radius: 4px;
+  box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.05);
+
+
+  &.primary {
+    background: #3B47CC;
+    border: 1px solid #2532BB;
+    color: #FFFFFF;
+  }
+
+  &.secundary {
+    background: #FFFFFF;
+    border: 1px solid #D8D8D8;
+    color: #646464;
+  }
+
+  &.inactive {
+    background: #F9F9F9;
+    border: 1px solid #D8D8D8;
+    color: #737373;
+  }
+}