From 5eb8a4abe5a70bc72a1c7c8e3803875964b6b48d Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Tue, 8 May 2018 16:19:40 +0200
Subject: [PATCH] refactor: buttons view

---
 src/views/Buttons/Buttons/Buttons.js | 877 +++++++++++----------------
 1 file changed, 355 insertions(+), 522 deletions(-)

diff --git a/src/views/Buttons/Buttons/Buttons.js b/src/views/Buttons/Buttons/Buttons.js
index 9fc90d4..5b45a81 100644
--- a/src/views/Buttons/Buttons/Buttons.js
+++ b/src/views/Buttons/Buttons/Buttons.js
@@ -10,100 +10,100 @@ class Buttons extends Component {
             <strong>Standard Buttons</strong>
           </CardHeader>
           <CardBody>
-            <Row className="d-flex justify-content-between align-items-center">
-              <Col>
-                <p>Normal</p>
+            <Row className="align-items-center">
+              <Col col="12" xl className="mb-3 mb-xl-0">
+                Normal
               </Col>
-              <Col>
-                <Button block color="primary" type="button">Primary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary">Primary</Button>
               </Col>
-              <Col>
-                <Button block color="secondary" type="button">Secondary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary">Secondary</Button>
               </Col>
-              <Col>
-                <Button block color="success" type="button">Success</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success">Success</Button>
               </Col>
-              <Col>
-                <Button block color="warning" type="button">Warning</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning">Warning</Button>
               </Col>
-              <Col>
-                <Button block color="danger" type="button">Danger</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger">Danger</Button>
               </Col>
-              <Col>
-                <Button block color="info" type="button">Info</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info">Info</Button>
               </Col>
-              <Col>
-                <Button block color="light" type="button">Light</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light">Light</Button>
               </Col>
-              <Col>
-                <Button block color="dark" type="button">Dark</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark">Dark</Button>
               </Col>
-              <Col>
-                <Button block color="link" type="button">Link</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link">Link</Button>
               </Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Active State
               </Col>
-              <Col>
-                <Button active block color="primary" type="button" aria-pressed="true">Primary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="primary" aria-pressed="true">Primary</Button>
               </Col>
-              <Col>
-                <Button active block color="secondary" type="button" aria-pressed="true">Secondary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="secondary" aria-pressed="true">Secondary</Button>
               </Col>
-              <Col>
-                <Button active block color="success" type="button" aria-pressed="true">Success</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="success" aria-pressed="true">Success</Button>
               </Col>
-              <Col>
-                <Button active block color="warning" type="button" aria-pressed="true">Warning</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="warning" aria-pressed="true">Warning</Button>
               </Col>
-              <Col>
-                <Button active block color="danger" type="button" aria-pressed="true">Danger</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="danger" aria-pressed="true">Danger</Button>
               </Col>
-              <Col>
-                <Button active block color="info" type="button" aria-pressed="true">Info</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="info" aria-pressed="true">Info</Button>
               </Col>
-              <Col>
-                <Button active block color="light" type="button" aria-pressed="true">Light</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="light" aria-pressed="true">Light</Button>
               </Col>
-              <Col>
-                <Button active block color="dark" type="button" aria-pressed="true">Dark</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="dark" aria-pressed="true">Dark</Button>
               </Col>
-              <Col>
-                <Button active block color="link" type="button" aria-pressed="true">Link</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="link" aria-pressed="true">Link</Button>
               </Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <Button block color="primary" type="button" disabled>Primary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" disabled>Primary</Button>
               </Col>
-              <Col>
-                <Button block color="secondary" type="button" disabled>Secondary</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <Button block color="success" type="button" disabled>Success</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" disabled>Success</Button>
               </Col>
-              <Col>
-                <Button block color="warning" type="button" disabled>Warning</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" disabled>Warning</Button>
               </Col>
-              <Col>
-                <Button block color="danger" type="button" disabled>Danger</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" disabled>Danger</Button>
               </Col>
-              <Col>
-                <Button block color="info" type="button" disabled>Info</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" disabled>Info</Button>
               </Col>
-              <Col>
-                <Button block color="light" type="button" disabled>Light</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" disabled>Light</Button>
               </Col>
-              <Col>
-                <Button block color="dark" type="button" disabled>Dark</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" disabled>Dark</Button>
               </Col>
-              <Col>
-                <Button block color="link" type="button" disabled>Link</Button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" disabled>Link</Button>
               </Col>
             </Row>
           </CardBody>
@@ -114,97 +114,97 @@ class Buttons extends Component {
           </CardHeader>
           <CardBody>
             <p>
-              Use <code>.btn-outline-*</code> class for outline buttons.
+              Use <code>outline</code> prop
             </p>
             <Row className="align-items-center">
-              <Col className="col">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-primary">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="primary">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-secondary">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="secondary">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-success">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="success">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-warning">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="warning">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-danger">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="danger">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-info">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="info">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-light">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="light">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-dark">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="dark">Dark</Button>
               </Col>
-              <Col></Col>
-            </Row>
-            <Row className="row align-items-center mt-3">
-              <Col className="col">
-                Active State
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-primary active" aria-pressed="true">Primary</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-secondary active" aria-pressed="true">Secondary</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-success active" aria-pressed="true">Success</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-warning active" aria-pressed="true">Warning</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-danger active" aria-pressed="true">Danger</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-info active" aria-pressed="true">Info</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-light active" aria-pressed="true">Light</button>
-              </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-dark active" aria-pressed="true">Dark</button>
-              </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
+                Active State
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="primary" aria-pressed="true">Primary</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="secondary" aria-pressed="true">Secondary</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="success" aria-pressed="true">Success</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="warning" aria-pressed="true">Warning</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="danger" aria-pressed="true">Danger</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="info" aria-pressed="true">Info</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="light" aria-pressed="true">Light</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline active color="dark" aria-pressed="true">Dark</Button>
+              </Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
+            </Row>
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-primary" disabled>Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="primary" disabled>Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-secondary" disabled>Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="secondary" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-success" disabled>Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="success" disabled>Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-warning" disabled>Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="warning" disabled>Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-danger" disabled>Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="danger" disabled>Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-info" disabled>Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="info" disabled>Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-light" disabled>Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="light" disabled>Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-outline-dark" disabled>Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block outline color="dark" disabled>Dark</Button>
               </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
           </CardBody>
         </Card>
@@ -218,94 +218,94 @@ class Buttons extends Component {
               <code>.btn-ghost-*</code> class for ghost buttons.
             </p>
             <Row className="align-items-center">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-primary">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-primary">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-secondary">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-secondary">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-success">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-success">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-warning">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-warning">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-danger">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-danger">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-info">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-info">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-light">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-light">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-dark">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-dark">Dark</Button>
               </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Active State
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-primary active" aria-pressed="true">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-primary" aria-pressed="true">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-secondary active" aria-pressed="true">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-secondary" aria-pressed="true">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-success active" aria-pressed="true">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-success" aria-pressed="true">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-warning active" aria-pressed="true">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-warning" aria-pressed="true">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-danger active" aria-pressed="true">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-danger" aria-pressed="true">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-info active" aria-pressed="true">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-info" aria-pressed="true">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-light active" aria-pressed="true">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-light" aria-pressed="true">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-dark active" aria-pressed="true">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block active color="ghost-dark" aria-pressed="true">Dark</Button>
               </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
             <Row className="align-items-center mt-3">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-primary" disabled>Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-primary" disabled>Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-secondary" disabled>Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-secondary" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-success" disabled>Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-success" disabled>Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-warning" disabled>Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-warning" disabled>Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-danger" disabled>Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-danger" disabled>Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-info" disabled>Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-info" disabled>Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-light" disabled>Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-light" disabled>Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-block btn-ghost-dark" disabled>Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="ghost-dark" disabled>Dark</Button>
               </Col>
-              <Col></Col>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0"></Col>
             </Row>
           </CardBody>
         </Card>
@@ -319,99 +319,99 @@ class Buttons extends Component {
               <code>.btn-square</code> class for square buttons.
             </p>
             <Row className="align-items-center">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-primary">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" className="btn-square">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-secondary">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" className="btn-square">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-success">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" className="btn-square">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-warning">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" className="btn-square">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-danger">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" className="btn-square">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-info">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" className="btn-square">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-light">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" className="btn-square">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-dark">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" className="btn-square">Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-link">Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" className="btn-square">Link</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col>
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Active State
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-primary active" aria-pressed="true">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="primary" className="btn-square" aria-pressed="true">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-secondary active" aria-pressed="true">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="secondary" className="btn-square" aria-pressed="true">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-success active" aria-pressed="true">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="success" className="btn-square" aria-pressed="true">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-warning active" aria-pressed="true">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="warning" className="btn-square" aria-pressed="true">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-danger active" aria-pressed="true">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="danger" className="btn-square" aria-pressed="true">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-info active" aria-pressed="true">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="info" className="btn-square" aria-pressed="true">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-light active" aria-pressed="true">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="light" className="btn-square" aria-pressed="true">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-dark active" aria-pressed="true">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="dark" className="btn-square" aria-pressed="true">Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-link active" aria-pressed="true">Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="link" className="btn-square" aria-pressed="true">Link</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col className="col">
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-primary" disabled>Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" className="btn-square" disabled>Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-secondary" disabled>Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" className="btn-square" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-success" disabled>Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" className="btn-square" disabled>Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-warning" disabled>Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" className="btn-square" disabled>Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-danger" disabled>Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" className="btn-square" disabled>Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-info" disabled>Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" className="btn-square" disabled>Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-light" disabled>Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" className="btn-square" disabled>Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-dark" disabled>Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" className="btn-square" disabled>Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-square btn-block btn-link" disabled>Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" className="btn-square" disabled>Link</Button>
               </Col>
             </Row>
           </CardBody>
@@ -426,99 +426,99 @@ class Buttons extends Component {
               <code>.btn-pill</code> class for pill buttons.
             </p>
             <Row className="align-items-center">
-              <Col>
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-primary">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" className="btn-pill">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-secondary">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" className="btn-pill">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-success">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" className="btn-pill">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-warning">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" className="btn-pill">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-danger">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" className="btn-pill">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-info">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" className="btn-pill">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-light">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" className="btn-pill">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-dark">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" className="btn-pill">Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-link">Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" className="btn-pill">Link</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col>
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Active State
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-primary active" aria-pressed="true">Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="primary" className="btn-pill" aria-pressed="true">Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-secondary active" aria-pressed="true">Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="secondary" className="btn-pill" aria-pressed="true">Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-success active" aria-pressed="true">Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="success" className="btn-pill" aria-pressed="true">Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-warning active" aria-pressed="true">Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="warning" className="btn-pill" aria-pressed="true">Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-danger active" aria-pressed="true">Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="danger" className="btn-pill" aria-pressed="true">Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-info active" aria-pressed="true">Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="info" className="btn-pill" aria-pressed="true">Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-light active" aria-pressed="true">Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="light" className="btn-pill" aria-pressed="true">Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-dark active" aria-pressed="true">Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="dark" className="btn-pill" aria-pressed="true">Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-link active" aria-pressed="true">Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button active block color="link" className="btn-pill" aria-pressed="true">Link</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col>
+            <Row className="align-items-center mt-3">
+              <Col col="12" xl className="mb-3 mb-xl-0">
                 Disabled
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-primary" disabled>Primary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="primary" className="btn-pill" disabled>Primary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-secondary" disabled>Secondary</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="secondary" className="btn-pill" disabled>Secondary</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-success" disabled>Success</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="success" className="btn-pill" disabled>Success</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-warning" disabled>Warning</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="warning" className="btn-pill" disabled>Warning</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-danger" disabled>Danger</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="danger" className="btn-pill" disabled>Danger</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-info" disabled>Info</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="info" className="btn-pill" disabled>Info</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-light" disabled>Light</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="light" className="btn-pill" disabled>Light</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-dark" disabled>Dark</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="dark" className="btn-pill" disabled>Dark</Button>
               </Col>
-              <Col>
-                <button type="button" className="btn btn-pill btn-block btn-link" disabled>Link</button>
+              <Col col="6" sm="4" md="2" xl className="mb-3 mb-xl-0">
+                <Button block color="link" className="btn-pill" disabled>Link</Button>
               </Col>
             </Row>
           </CardBody>
@@ -528,66 +528,65 @@ class Buttons extends Component {
             <strong>Sizes</strong>
           </CardHeader>
           <CardBody>
-            <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code> or <code>.btn-sm</code> for additional sizes.</p>
-            <Row className="row align-items-center">
-              <Col>
-                Small add
-                <code>.btn-sm</code>
+            <p>Fancy larger or smaller buttons? Add <code>size="lg"</code> or <code>size="sm"</code> for additional sizes.</p>
+            <Row className="align-items-center">
+              <Col col="2" xl className="mb-3 mb-xl-0">
+                Small
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-primary">Standard Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="primary" size="sm">Standard Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-outline-secondary">Outline Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="secondary" outline size="sm">Outline Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-ghost-success">Ghost Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button size="sm" color="ghost-success">Ghost Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-square btn-warning">Square Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="warning" size="sm" className="btn-square">Square Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-sm btn-pill btn-danger">Pill Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="danger" size="sm" className="btn-pill">Pill Button</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col className="col">
+            <Row className="align-items-center mt-3">
+              <Col col="2" xl className="mb-3 mb-xl-0">
                 Normal
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-primary">Standard Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="primary">Standard Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-outline-secondary">Outline Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button outline color="secondary" >Outline Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-ghost-success">Ghost Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="ghost-success">Ghost Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-square btn-warning">Square Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="warning" className="btn-square">Square Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-pill btn-danger">Pill Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="danger" className="btn-pill">Pill Button</Button>
               </Col>
             </Row>
-            <Row className="row align-items-center mt-3">
-              <Col className="col">
-                Large add <code>.btn-lg</code>.
+            <Row className="align-items-center mt-3">
+              <Col col="2" xl className="mb-3 mb-xl-0">
+                Large
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-primary">Standard Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="primary" size="lg">Standard Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-outline-secondary">Outline Button</button>
+              <Col col="2"className="mb-3 mb-xl-0 text-center">
+                <Button outline color="secondary" size="lg">Outline Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-ghost-success">Ghost Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="ghost-success" size="lg">Ghost Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-square btn-warning">Square Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="warning" size="lg" className="btn-square">Square Button</Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-lg btn-pill btn-danger">Pill Button</button>
+              <Col col="2" className="mb-3 mb-xl-0 text-center">
+                <Button color="danger" size="lg" className="btn-pill">Pill Button</Button>
               </Col>
             </Row>
           </CardBody>
@@ -598,128 +597,42 @@ class Buttons extends Component {
           </CardHeader>
           <CardBody>
             <Row className="align-items-center mt-3">
-              <Col className="col text-center">
-                <button type="button" className="btn btn-primary">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="primary">
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Standard Button
-                </button>
+                </Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-outline-secondary">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="secondary" outline>
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Outline Button
-                </button>
+                </Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-ghost-success">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="ghost-success">
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Ghost Button
-                </button>
+                </Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-square btn-warning">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="warning" className="btn-square">
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Square Button
-                </button>
+                </Button>
               </Col>
-              <Col className="col text-center">
-                <button type="button" className="btn btn-pill btn-danger">
+              <Col sm xs="12" className="text-center mt-3">
+                <Button color="danger" className="btn-pill">
                   <i className="fa fa-lightbulb-o"></i>&nbsp;Pill Button
-                </button>
+                </Button>
               </Col>
             </Row>
           </CardBody>
         </Card>
         <Row>
           <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                <strong>Options</strong>
-              </CardHeader>
-              <CardBody>
-                <Button color="primary" className="mr-1">Primary</Button>
-                <Button color="secondary" className="mr-1">Secondary</Button>
-                <Button color="success" className="mr-1">Success</Button>
-                <Button color="warning">Warning</Button>{' '}
-                <Button color="danger">Danger</Button>{' '}
-                <Button color="link">Link</Button>{' '}
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>With Icons</strong>
-              </CardHeader>
-              <CardBody>
-                <Button color="primary" className="mr-1"><i className="fa fa-star"></i>{'\u00A0'} Primary</Button>
-                <Button color="secondary" className="mr-1"><i className="fa fa-lightbulb-o"></i>{'\u00A0 Secondary'}</Button>
-                <Button color="success" className="mr-1"><i className="fa fa-magic"></i>&nbsp; Success</Button>
-                <Button color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>{' '}
-                <Button color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>{' '}
-                <Button color="link"><i className="fa fa-link"></i>&nbsp; Link</Button>{' '}
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Size Large</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add this class <code>.btn-lg</code></p>
-                <Button color="primary" size="lg">Primary</Button>
-                <Button color="secondary" size="lg">Secondary</Button>
-                <Button color="success" size="lg">Success</Button>
-                <Button color="info" size="lg">Info</Button>
-                <Button color="warning" size="lg">Warning</Button>
-                <Button color="danger" size="lg">Danger</Button>
-                <Button color="link" size="lg">Link</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Size Small</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.btn-sm</code></p>
-                <Button color="primary" size="sm">Primary</Button>
-                <Button color="secondary" size="sm">Secondary</Button>
-                <Button color="success" size="sm">Success</Button>
-                <Button color="info" size="sm">Info</Button>
-                <Button color="warning" size="sm">Warning</Button>
-                <Button color="danger" size="sm">Danger</Button>
-                <Button color="link" size="sm">Link</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Disabled state</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add <code>disabled="disabled"</code></p>
-                <Button color="primary" disabled>Primary</Button>
-                <Button color="secondary" disabled>Secondary</Button>
-                <Button color="success" disabled>Success</Button>
-                <Button color="info" disabled>Info</Button>
-                <Button color="warning" disabled>Warning</Button>
-                <Button color="danger" disabled>Danger</Button>
-                <Button color="link" disabled>Link</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Active state</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.active</code></p>
-                <Button color="primary" active>Primary</Button>
-                <Button color="secondary" active>Secondary</Button>
-                <Button color="success" active>Success</Button>
-                <Button color="info" active>Info</Button>
-                <Button color="warning" active>Warning</Button>
-                <Button color="danger" active>Danger</Button>
-                <Button color="link" active>Link</Button>
-              </CardBody>
-            </Card>
             <Card>
               <CardHeader>
                 <strong>Block Level Buttons</strong>
               </CardHeader>
               <CardBody>
-                <p>Add class <code>.btn-block</code></p>
+                <p>Add prop <code>block</code></p>
                 <Button color="secondary" size="lg" block>Block level button</Button>
                 <Button color="primary" size="lg" block>Block level button</Button>
                 <Button color="success" size="lg" block>Block level button</Button>
@@ -731,99 +644,19 @@ class Buttons extends Component {
             </Card>
           </Col>
           <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                <strong>Options</strong>
-              </CardHeader>
-              <CardBody>
-                <Button outline color="primary">Primary</Button>
-                <Button outline color="secondary">Secondary</Button>
-                <Button outline color="success">Success</Button>
-                <Button outline color="warning">Warning</Button>
-                <Button outline color="danger">Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>With Icons</strong>
-              </CardHeader>
-              <CardBody>
-                <Button outline color="primary"><i className="fa fa-star"></i>&nbsp; Primary</Button>
-                <Button outline color="secondary"><i className="fa fa-lightbulb-o"></i>&nbsp; Secondary</Button>
-                <Button outline color="success"><i className="fa fa-magic"></i>&nbsp; Success</Button>
-                <Button outline color="warning"><i className="fa fa-map-marker"></i>&nbsp; Warning</Button>
-                <Button outline color="danger"><i className="fa fa-rss"></i>&nbsp; Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Size Large</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.btn-lg</code></p>
-                <Button outline color="primary" size="lg">Primary</Button>
-                <Button outline color="secondary" size="lg">Secondary</Button>
-                <Button outline color="success" size="lg">Success</Button>
-                <Button outline color="info" size="lg">Info</Button>
-                <Button outline color="warning" size="lg">Warning</Button>
-                <Button outline color="danger" size="lg">Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Size Small</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.btn-sm</code></p>
-                <Button outline color="primary" size="sm">Primary</Button>
-                <Button outline color="secondary" size="sm">Secondary</Button>
-                <Button outline color="success" size="sm">Success</Button>
-                <Button outline color="info" size="sm">Info</Button>
-                <Button outline color="warning" size="sm">Warning</Button>
-                <Button outline color="danger" size="sm">Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Disabled state</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add <code>disabled="disabled"</code></p>
-                <Button outline color="primary" disabled>Primary</Button>
-                <Button outline color="secondary" disabled>Secondary</Button>
-                <Button color="success" disabled>Success</Button>
-                <Button outline color="info" disabled>Info</Button>
-                <Button outline color="warning" disabled>Warning</Button>
-                <Button outline color="danger" disabled>Danger</Button>
-              </CardBody>
-            </Card>
-            <Card>
-              <CardHeader>
-                <strong>Active state</strong>
-              </CardHeader>
-              <CardBody>
-                <p>Add class <code>.active</code></p>
-                <Button outline color="primary" active>Primary</Button>
-                <Button outline color="secondary" active>Secondary</Button>
-                <Button outline color="success" active>Success</Button>
-                <Button outline color="info" active>Info</Button>
-                <Button outline color="warning" active>Warning</Button>
-                <Button outline color="danger" active>Danger</Button>
-              </CardBody>
-            </Card>
             <Card>
               <CardHeader>
                 <strong>Block Level Buttons</strong>
-                {/*<small>Add this class <code>.btn-block</code></small>*/}
               </CardHeader>
               <CardBody>
-                <p>Add class <code>.btn-block</code></p>
+                <p>Add prop <code>block</code></p>
                 <Button outline color="secondary" size="lg" block>Block level button</Button>
                 <Button outline color="primary" size="lg" block>Block level button</Button>
                 <Button outline color="success" size="lg" block>Block level button</Button>
                 <Button outline color="info" size="lg" block>Block level button</Button>
                 <Button outline color="warning" size="lg" block>Block level button</Button>
                 <Button outline color="danger" size="lg" block>Block level button</Button>
+                <Button color="ghost-info" size="lg" block>Block level button</Button>
               </CardBody>
             </Card>
           </Col>