Added docs and sample code

Author: Kameshwaran

src/button/Button.js

@@ -36,7 +36,6 @@ const factory = (ripple, FontIcon) => {
         children, type, size, className, href, icon, iconAlignment, theme, ...others
       } = this.props;
       const element = href ? 'a' : 'button';
-
       const classes = classnames(theme.button, theme[type], theme[size], className);
 
       const props = {

src/button/readme.md

@@ -0,0 +1,62 @@
+## Button
+
+The base button component.
+
+### Properties
+| Name | Type | Default | Description |
+|:-----|:-----|:-----|:-----|
+| `children` | `Any` | `null` | All child component to be rendered inside a button |
+| `type` | `String` | `default` | Represents the style to be applied for the button. Possible values are 'primary', 'secondary', 'success', 'danger', 'warning', 'info', 'light', and 'dark' |
+| `size` | `String` | `medium`  | Defines the size of the button. Possible values are 'small', 'medium', and 'large' |
+| `className` | `String` | `''` | Set a class to style the Component |
+| `href` | `String` | `null` | Creates a link for the button. |
+| `icon` | `String`/`Element` |  | Value of the icon |
+| `iconAlignment` | `String` | `left` | Set an alignment of the icon. Possible values are 'left', 'right' |
+
+### Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `button`   | Class used for the root element.|
+| `primary` | Class used for styling `primary` type buttons |
+| `secondary` | Class used for styling `secondary` type buttons |
+| `success` | Class used for styling `success` type buttons |
+| `danger` | Class used for styling `danger` type buttons |
+| `warning` | Class used for styling `warning` type buttons |
+| `info` | Class used for styling `info` type buttons |
+| `light` | Class used for styling `light` type buttons |
+| `dark` | Class used for styling `dark` type buttons |
+| `small` | Class used for styling `small` sized buttons |
+| `medium` | Class used for styling `medium` sized buttons |
+| `large` | Class used for styling `large` sized buttons |
+
+### Usage
+```
+  <div>
+    <div>
+      <h4>Buttons with diffent styles</h4>
+      <Button>Default</Button>
+      <Button type="primary">Primary</Button>
+      <Button type="secondary">Secondary</Button>
+      <Button type="success">Success</Button>
+      <Button type="danger">Danger</Button>
+      <Button type="warning">Warning</Button>
+      <Button type="info">Info</Button>
+      <Button type="light">Light</Button>
+      <Button type="dark">Dark</Button>
+    </div>
+
+    <div>
+      <h4>Buttons with diffent sizes</h4>
+      <Button type="primary" size="small">Small</Button>
+      <Button type="primary" size="medium">Medium</Button>
+      <Button type="primary" size="large">Large</Button>
+    </div>
+
+    <div>
+      <h4>Buttons with Icon</h4>
+      <Button type="success" icon="done">Left Icon</Button>
+      <Button type="success" icon="done" iconAlignment="right">Right Icon</Button>
+    </div>
+  </div>
+```

src/button/theme.scss

@@ -100,15 +100,15 @@
 }
 
 .small {
-  font-size: 12px;
+  font-size: 11px;
   height: 28px;
   line-height: 28px;
   padding: 0 8px;
   min-width: 70px;
 }
 
 .medium {
-  font-size: 14px;
+  font-size: 13px;
   height: 36px;
   line-height: 36px;
   padding: 0 12px;

src/index.js

@@ -17,14 +17,31 @@ const Index = () => (
     </Card>
 
     <div style={{ margin: '20px' }}>
-      <Button size="medium" icon="favorite">Hello</Button>
-      <Button type="danger" size="medium" icon="bookmark" iconAlignment="right">Hello</Button>
-      <Button type="secondary" size="small">Hello</Button>
-      <Button type="primary">Hello</Button>
-      <Button type="success" size="large">Hello</Button>
-      <Button type="warning" size="small">Hello</Button>
-      <Button type="info" size="medium">Hello</Button>
-      <Button type="dark" size="large">Hello</Button>
+      <div>
+        <h4>Buttons with diffent styles</h4>
+        <Button>Default</Button>
+        <Button type="primary">Primary</Button>
+        <Button type="secondary">Secondary</Button>
+        <Button type="success">Success</Button>
+        <Button type="danger">Danger</Button>
+        <Button type="warning">Warning</Button>
+        <Button type="info">Info</Button>
+        <Button type="light">Light</Button>
+        <Button type="dark">Dark</Button>
+      </div>
+
+      <div>
+        <h4>Buttons with diffent sizes</h4>
+        <Button type="primary" size="small">Small</Button>
+        <Button type="primary" size="medium">Medium</Button>
+        <Button type="primary" size="large">Large</Button>
+      </div>
+
+      <div>
+        <h4>Buttons with Icon</h4>
+        <Button type="success" icon="done">Left Icon</Button>
+        <Button type="success" icon="done" iconAlignment="right">Right Icon</Button>
+      </div>
     </div>
   </div>
 );