From c46cb8400e5612b38c9a63c9927150f1531ecb59 Mon Sep 17 00:00:00 2001
From: xidedix <xidedix@users.noreply.github.com>
Date: Mon, 9 Apr 2018 13:30:56 +0200
Subject: [PATCH] v2.0.0-alpha.2

- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)
- refactor: ButtonDropdowns `<Dropdown direction="up">` (deprecate 'dropup')
- refactor: Dashboard legend badge pill
- refactor: SocialButtons to BrandButtons `btn-brand`
- refactor: Buttons spacing `mr-1`
- update: reactstrap to `5.0.0`
- update: react, react-dom to `16.3.1`
- update: node-sass-chokidar to `1.1.0`
- update: prop-types to `15.5.8`
- update: react-scripts to `1.1.4`
---
 CHANGELOG.md                                  |  12 +
 package.json                                  |  20 +-
 public/index.html                             |   6 +-
 src/_nav.js                                   |   4 +-
 src/containers/Full/FullHeader.js             |   4 +-
 src/routes.js                                 |   6 +-
 src/scss/style.css                            |  31 +-
 .../Buttons/BrandButtons/BrandButtons.js      | 324 ++++++++++++++++++
 .../BrandButtons.test.js}                     |   4 +-
 .../package.json                              |   2 +-
 .../ButtonDropdowns/ButtonDropdowns.js        |  73 ++--
 src/views/Buttons/Buttons/Buttons.js          |  18 +-
 .../Buttons/SocialButtons/SocialButtons.js    | 318 -----------------
 src/views/Buttons/index.js                    |   8 +-
 src/views/Dashboard/Dashboard.js              |  11 +-
 src/views/index.js                            |   4 +-
 16 files changed, 456 insertions(+), 389 deletions(-)
 create mode 100644 src/views/Buttons/BrandButtons/BrandButtons.js
 rename src/views/Buttons/{SocialButtons/SocialButtons.test.js => BrandButtons/BrandButtons.test.js} (68%)
 rename src/views/Buttons/{SocialButtons => BrandButtons}/package.json (69%)
 delete mode 100644 src/views/Buttons/SocialButtons/SocialButtons.js

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b284308..344e6bf 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,17 @@
 ## [react](./REACT.md) version `changelog`
 
+##### `v2.0.0-alpha.2`
+- refactor: FullHeader `<AppHeaderDropdown direction="down">` (required prop `direction`)
+- refactor: ButtonDropdowns `<Dropdown direction="up">` (deprecate 'dropup')
+- refactor: Dashboard legend badge pill
+- refactor: SocialButtons to BrandButtons `btn-brand`
+- refactor: Buttons spacing `mr-1`
+- update: reactstrap to `5.0.0`
+- update: react, react-dom to `16.3.1`
+- update: node-sass-chokidar to `1.1.0`
+- update: prop-types to `15.5.8`
+- update: react-scripts to `1.1.4`
+
 ##### `v2.0.0-alpha.1`
 - refactor: separation of concerns - (CoreUI template vs CoreUI components) prepare to use CoreUI as dependency
 - refactor: project structure change
diff --git a/package.json b/package.json
index 249b90f..0e9d21a 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "CoreUI-React",
-  "version": "2.0.0-alpha.1",
+  "version": "2.0.0-alpha.2",
   "description": "CoreUI React Open Source Bootstrap 4 Admin Template",
   "author": "Łukasz Holeczek",
   "homepage": "http://coreui.io",
@@ -15,19 +15,19 @@
     "@coreui/styles": "next",
     "@coreui/react": "next",
     "bootstrap": "4.0.0",
-    "chart.js": "2.7.2",
+    "chart.js": "^2.7.2",
     "classnames": "^2.2.3",
-    "flag-icon-css": "3.0.0",
+    "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
-    "node-sass-chokidar": "^1.1.0",
-    "prop-types": "^15.5.8",
-    "react": "^16.2.0",
-    "react-chartjs-2": "2.7.0",
-    "react-dom": "^16.2.0",
+    "node-sass-chokidar": "^1.2.2",
+    "prop-types": "^15.6.1",
+    "react": "^16.3.1",
+    "react-chartjs-2": "^2.7.0",
+    "react-dom": "^16.3.1",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "1.1.1",
-    "reactstrap": "5.0.0-beta",
+    "react-scripts": "^1.1.4",
+    "reactstrap": "^5.0.0",
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
diff --git a/public/index.html b/public/index.html
index 829dd7c..53944e3 100644
--- a/public/index.html
+++ b/public/index.html
@@ -4,10 +4,10 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <meta name="description" content="%THEMENAME% - %THEMEDESC%">
+    <meta name="description" content="CoreUI for React - Open Source Bootstrap Admin Template">
     <meta name="author" content="Łukasz Holeczek">
-    <meta name="keyword" content="%THEMEKEYWORDS%">
-    <title>%THEMENAME% - %THEMEDESC%</title>
+    <meta name="keyword" content="Bootstrap,Admin,Template,Open,Source,CSS,SCSS,HTML,RWD,Dashboard,React">
+    <title>CoreUI for React</title>
     <!--
       manifest.json provides metadata used when your web app is added to the
       homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
diff --git a/src/_nav.js b/src/_nav.js
index 4782b1c..472c6c0 100644
--- a/src/_nav.js
+++ b/src/_nav.js
@@ -144,8 +144,8 @@ export default {
           icon: 'icon-cursor',
         },
         {
-          name: 'Social Buttons',
-          url: '/buttons/social-buttons',
+          name: 'Brand Buttons',
+          url: '/buttons/brand-buttons',
           icon: 'icon-cursor',
         },
       ],
diff --git a/src/containers/Full/FullHeader.js b/src/containers/Full/FullHeader.js
index 5a7fa68..bbc4e58 100644
--- a/src/containers/Full/FullHeader.js
+++ b/src/containers/Full/FullHeader.js
@@ -45,7 +45,7 @@ class FullHeader extends Component {
           <NavItem className="d-md-down-none">
             <NavLink href="#"><i className="icon-location-pin"></i></NavLink>
           </NavItem>
-          <AppHeaderDropdown>
+          <AppHeaderDropdown direction="down">
             <DropdownToggle nav>
               <img src={'assets/img/avatars/6.jpg'} className="img-avatar" alt="admin@bootstrapmaster.com" />
             </DropdownToggle>
@@ -76,4 +76,4 @@ class FullHeader extends Component {
 FullHeader.propTypes = propTypes;
 FullHeader.defaultProps = defaultProps;
 
-export default FullHeader;
\ No newline at end of file
+export default FullHeader;
diff --git a/src/routes.js b/src/routes.js
index c1c7bed..328c713 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -24,7 +24,7 @@ import {
   Popovers,
   ProgressBar,
   SimpleLineIcons,
-  SocialButtons,
+  BrandButtons,
   Switches,
   Tables,
   Tabs,
@@ -63,7 +63,7 @@ const routes = [
   { path: '/buttons/buttons', name: 'Buttons', component: Buttons },
   { path: '/buttons/button-dropdowns', name: 'ButtonDropdowns', component: ButtonDropdowns },
   { path: '/buttons/button-groups', name: 'ButtonGroups', component: ButtonGroups },
-  { path: '/buttons/social-buttons', name: 'Social Buttons', component: SocialButtons },
+  { path: '/buttons/brand-buttons', name: 'Brand Buttons', component: BrandButtons },
   { path: '/icons', exact: true, name: 'Icons', component: Flags },
   { path: '/icons/flags', name: 'Flags', component: Flags },
   { path: '/icons/font-awesome', name: 'Font Awesome', component: FontAwesome },
@@ -76,4 +76,4 @@ const routes = [
   { path: '/charts', name: 'Charts', component: Charts },
 ];
 
-export default routes;
\ No newline at end of file
+export default routes;
diff --git a/src/scss/style.css b/src/scss/style.css
index b5d0e7c..7e831af 100644
--- a/src/scss/style.css
+++ b/src/scss/style.css
@@ -3680,12 +3680,15 @@ button.close {
   .bs-popover-top .arrow, .bs-popover-auto[x-placement^="top"] .arrow {
     bottom: calc((0.5rem + 1px) * -1); }
   .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before,
-  .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
+  .bs-popover-top .arrow::after,
+  .bs-popover-auto[x-placement^="top"] .arrow::after {
     border-width: 0.5rem 0.5rem 0; }
   .bs-popover-top .arrow::before, .bs-popover-auto[x-placement^="top"] .arrow::before {
     bottom: 0;
     border-top-color: rgba(0, 0, 0, 0.25); }
-  .bs-popover-top .arrow::after, .bs-popover-auto[x-placement^="top"] .arrow::after {
+  
+  .bs-popover-top .arrow::after,
+  .bs-popover-auto[x-placement^="top"] .arrow::after {
     bottom: 1px;
     border-top-color: #fff; }
 
@@ -3697,12 +3700,15 @@ button.close {
     height: 1rem;
     margin: 0.3rem 0; }
   .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before,
-  .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
+  .bs-popover-right .arrow::after,
+  .bs-popover-auto[x-placement^="right"] .arrow::after {
     border-width: 0.5rem 0.5rem 0.5rem 0; }
   .bs-popover-right .arrow::before, .bs-popover-auto[x-placement^="right"] .arrow::before {
     left: 0;
     border-right-color: rgba(0, 0, 0, 0.25); }
-  .bs-popover-right .arrow::after, .bs-popover-auto[x-placement^="right"] .arrow::after {
+  
+  .bs-popover-right .arrow::after,
+  .bs-popover-auto[x-placement^="right"] .arrow::after {
     left: 1px;
     border-right-color: #fff; }
 
@@ -3711,12 +3717,15 @@ button.close {
   .bs-popover-bottom .arrow, .bs-popover-auto[x-placement^="bottom"] .arrow {
     top: calc((0.5rem + 1px) * -1); }
   .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before,
-  .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
+  .bs-popover-bottom .arrow::after,
+  .bs-popover-auto[x-placement^="bottom"] .arrow::after {
     border-width: 0 0.5rem 0.5rem 0.5rem; }
   .bs-popover-bottom .arrow::before, .bs-popover-auto[x-placement^="bottom"] .arrow::before {
     top: 0;
     border-bottom-color: rgba(0, 0, 0, 0.25); }
-  .bs-popover-bottom .arrow::after, .bs-popover-auto[x-placement^="bottom"] .arrow::after {
+  
+  .bs-popover-bottom .arrow::after,
+  .bs-popover-auto[x-placement^="bottom"] .arrow::after {
     top: 1px;
     border-bottom-color: #fff; }
   .bs-popover-bottom .popover-header::before, .bs-popover-auto[x-placement^="bottom"] .popover-header::before {
@@ -3737,12 +3746,15 @@ button.close {
     height: 1rem;
     margin: 0.3rem 0; }
   .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before,
-  .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
+  .bs-popover-left .arrow::after,
+  .bs-popover-auto[x-placement^="left"] .arrow::after {
     border-width: 0.5rem 0 0.5rem 0.5rem; }
   .bs-popover-left .arrow::before, .bs-popover-auto[x-placement^="left"] .arrow::before {
     right: 0;
     border-left-color: rgba(0, 0, 0, 0.25); }
-  .bs-popover-left .arrow::after, .bs-popover-auto[x-placement^="left"] .arrow::after {
+  
+  .bs-popover-left .arrow::after,
+  .bs-popover-auto[x-placement^="left"] .arrow::after {
     right: 1px;
     border-left-color: #fff; }
 
@@ -8095,7 +8107,8 @@ base-chart.chart {
       left: 8px; }
 
 .switch-pill .switch-label, .switch.switch-3d .switch-label,
-.switch-pill .switch-handle, .switch.switch-3d .switch-handle {
+.switch-pill .switch-handle,
+.switch.switch-3d .switch-handle {
   border-radius: 50em; }
 
 .switch-pill .switch-label::before, .switch.switch-3d .switch-label::before {
diff --git a/src/views/Buttons/BrandButtons/BrandButtons.js b/src/views/Buttons/BrandButtons/BrandButtons.js
new file mode 100644
index 0000000..982a7fe
--- /dev/null
+++ b/src/views/Buttons/BrandButtons/BrandButtons.js
@@ -0,0 +1,324 @@
+import React, { Component } from 'react';
+import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
+
+class BrandButtons extends Component {
+  render() {
+    return (
+      <div className="animated fadeIn">
+        <Row>
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i>
+                <strong>Brand Button</strong>
+                <small> Usage ex. </small>
+                <code>
+                  &lt;Button className="btn-facebook btn-brand"&gt;&lt;i className="fa fa-facebook"&gt;&lt;/i&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/Button&gt;
+                </code>
+              </CardHeader>
+              <CardBody>
+                <h6>Size Small
+                  <small> Add this class <code>.btn-sm</code></small>
+                </h6>
+                <p>
+                  <Button size="sm" className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
+                  <Button size="sm" className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
+                  <Button size="sm" className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
+                  <Button size="sm" className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
+                  <Button size="sm" className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
+                  <Button size="sm" className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
+                  <Button size="sm" className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
+                  <Button size="sm" className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
+                  <Button size="sm" className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
+                  <Button size="sm" className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
+                  <Button size="sm" className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
+                  <Button size="sm" className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
+                  <Button size="sm" className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
+                  <Button size="sm" className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
+                  <Button size="sm" className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
+                  <Button size="sm" className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
+                  <Button size="sm" className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
+                  <Button size="sm" className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
+                  <Button size="sm" className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
+                  <Button size="sm" className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
+                  <Button size="sm" className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
+                  <Button size="sm" className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
+                  <Button size="sm" className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
+                  <Button size="sm" className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
+                  <Button size="sm" className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
+                </p>
+                <h6>Size Normal</h6>
+                <p>
+                  <Button className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
+                  <Button className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
+                  <Button className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
+                  <Button className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
+                  <Button className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
+                  <Button className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
+                  <Button className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
+                  <Button className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
+                  <Button className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
+                  <Button className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
+                  <Button className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
+                  <Button className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
+                  <Button className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
+                  <Button className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
+                  <Button className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
+                  <Button className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
+                  <Button className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
+                  <Button className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
+                  <Button className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
+                  <Button className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
+                  <Button className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
+                  <Button className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
+                  <Button className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
+                  <Button className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
+                  <Button className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
+                </p>
+                <h6>Size Large
+                  <small> Add this class <code>.btn-lg</code></small>
+                </h6>
+                <p>
+                  <Button size="lg" className="btn-facebook btn-brand"><i className="fa fa-facebook"></i><span>Facebook</span></Button>
+                  <Button size="lg" className="btn-twitter btn-brand"><i className="fa fa-twitter"></i><span>Twitter</span></Button>
+                  <Button size="lg" className="btn-linkedin btn-brand"><i className="fa fa-linkedin"></i><span>LinkedIn</span></Button>
+                  <Button size="lg" className="btn-flickr btn-brand"><i className="fa fa-flickr"></i><span>Flickr</span></Button>
+                  <Button size="lg" className="btn-tumblr btn-brand"><i className="fa fa-tumblr"></i><span>Tumblr</span></Button>
+                  <Button size="lg" className="btn-xing btn-brand"><i className="fa fa-xing"></i><span>Xing</span></Button>
+                  <Button size="lg" className="btn-github btn-brand"><i className="fa fa-github"></i><span>Github</span></Button>
+                  <Button size="lg" className="btn-html5 btn-brand"><i className="fa fa-html5"></i><span>HTML5</span></Button>
+                  <Button size="lg" className="btn-openid btn-brand"><i className="fa fa-openid"></i><span>OpenID</span></Button>
+                  <Button size="lg" className="btn-stack-overflow btn-brand"><i className="fa fa-stack-overflow"></i><span>StackOverflow</span></Button>
+                  <Button size="lg" className="btn-css3 btn-brand"><i className="fa fa-css3"></i><span>CSS3</span></Button>
+                  <Button size="lg" className="btn-youtube btn-brand"><i className="fa fa-youtube"></i><span>YouTube</span></Button>
+                  <Button size="lg" className="btn-dribbble btn-brand"><i className="fa fa-dribbble"></i><span>Dribbble</span></Button>
+                  <Button size="lg" className="btn-google-plus btn-brand"><i className="fa fa-google-plus"></i><span>Google+</span></Button>
+                  <Button size="lg" className="btn-instagram btn-brand"><i className="fa fa-instagram"></i><span>Instagram</span></Button>
+                  <Button size="lg" className="btn-pinterest btn-brand"><i className="fa fa-pinterest"></i><span>Pinterest</span></Button>
+                  <Button size="lg" className="btn-vk btn-brand"><i className="fa fa-vk"></i><span>VK</span></Button>
+                  <Button size="lg" className="btn-yahoo btn-brand"><i className="fa fa-yahoo"></i><span>Yahoo</span></Button>
+                  <Button size="lg" className="btn-behance btn-brand"><i className="fa fa-behance"></i><span>Behance</span></Button>
+                  <Button size="lg" className="btn-dropbox btn-brand"><i className="fa fa-dropbox"></i><span>Dropbox</span></Button>
+                  <Button size="lg" className="btn-reddit btn-brand"><i className="fa fa-reddit"></i><span>Reddit</span></Button>
+                  <Button size="lg" className="btn-spotify btn-brand"><i className="fa fa-spotify"></i><span>Spotify</span></Button>
+                  <Button size="lg" className="btn-vine btn-brand"><i className="fa fa-vine"></i><span>Vine</span></Button>
+                  <Button size="lg" className="btn-foursquare btn-brand"><i className="fa fa-foursquare"></i><span>Forsquare</span></Button>
+                  <Button size="lg" className="btn-vimeo btn-brand"><i className="fa fa-vimeo"></i><span>Vimeo</span></Button>
+                </p>
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i>
+                <strong>Brand Button</strong>
+                <small> Icons only. Usage ex. </small>
+                <code>
+                  &lt;Button className="btn-facebook btn-brand icon"&gt;&lt;i className="fa fa-facebook"&gt;&lt;/i&gt;&lt;/Button&gt;
+                </code>
+              </CardHeader>
+              <CardBody>
+                <h6>Size Small
+                  <small> Add this class <code>.btn-sm</code></small>
+                </h6>
+                <p>
+                  <Button size="sm" className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
+                  <Button size="sm" className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
+                  <Button size="sm" className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
+                  <Button size="sm" className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
+                  <Button size="sm" className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
+                  <Button size="sm" className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
+                  <Button size="sm" className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
+                  <Button size="sm" className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
+                  <Button size="sm" className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
+                  <Button size="sm" className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
+                  <Button size="sm" className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
+                  <Button size="sm" className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
+                  <Button size="sm" className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
+                  <Button size="sm" className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
+                  <Button size="sm" className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
+                  <Button size="sm" className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
+                  <Button size="sm" className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
+                  <Button size="sm" className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
+                  <Button size="sm" className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
+                  <Button size="sm" className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
+                  <Button size="sm" className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
+                  <Button size="sm" className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
+                  <Button size="sm" className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
+                  <Button size="sm" className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
+                  <Button size="sm" className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
+                </p>
+                <h6>Size Normal</h6>
+                <p>
+                  <Button className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
+                  <Button className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
+                  <Button className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
+                  <Button className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
+                  <Button className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
+                  <Button className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
+                  <Button className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
+                  <Button className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
+                  <Button className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
+                  <Button className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
+                  <Button className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
+                  <Button className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
+                  <Button className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
+                  <Button className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
+                  <Button className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
+                  <Button className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
+                  <Button className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
+                  <Button className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
+                  <Button className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
+                  <Button className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
+                  <Button className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
+                  <Button className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
+                  <Button className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
+                  <Button className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
+                  <Button className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
+                </p>
+                <h6>Size Large
+                  <small> Add this class <code>.btn-lg</code></small>
+                </h6>
+                <p>
+                  <Button size="lg" className="btn-facebook btn-brand icon"><i className="fa fa-facebook"></i></Button>
+                  <Button size="lg" className="btn-twitter btn-brand icon"><i className="fa fa-twitter"></i></Button>
+                  <Button size="lg" className="btn-linkedin btn-brand icon"><i className="fa fa-linkedin"></i></Button>
+                  <Button size="lg" className="btn-flickr btn-brand icon"><i className="fa fa-flickr"></i></Button>
+                  <Button size="lg" className="btn-tumblr btn-brand icon"><i className="fa fa-tumblr"></i></Button>
+                  <Button size="lg" className="btn-xing btn-brand icon"><i className="fa fa-xing"></i></Button>
+                  <Button size="lg" className="btn-github btn-brand icon"><i className="fa fa-github"></i></Button>
+                  <Button size="lg" className="btn-html5 btn-brand icon"><i className="fa fa-html5"></i></Button>
+                  <Button size="lg" className="btn-openid btn-brand icon"><i className="fa fa-openid"></i></Button>
+                  <Button size="lg" className="btn-stack-overflow btn-brand icon"><i className="fa fa-stack-overflow"></i></Button>
+                  <Button size="lg" className="btn-css3 btn-brand icon"><i className="fa fa-css3"></i></Button>
+                  <Button size="lg" className="btn-youtube btn-brand icon"><i className="fa fa-youtube"></i></Button>
+                  <Button size="lg" className="btn-dribbble btn-brand icon"><i className="fa fa-dribbble"></i></Button>
+                  <Button size="lg" className="btn-google-plus btn-brand icon"><i className="fa fa-google-plus"></i></Button>
+                  <Button size="lg" className="btn-instagram btn-brand icon"><i className="fa fa-instagram"></i></Button>
+                  <Button size="lg" className="btn-pinterest btn-brand icon"><i className="fa fa-pinterest"></i></Button>
+                  <Button size="lg" className="btn-vk btn-brand icon"><i className="fa fa-vk"></i></Button>
+                  <Button size="lg" className="btn-yahoo btn-brand icon"><i className="fa fa-yahoo"></i></Button>
+                  <Button size="lg" className="btn-behance btn-brand icon"><i className="fa fa-behance"></i></Button>
+                  <Button size="lg" className="btn-dropbox btn-brand icon"><i className="fa fa-dropbox"></i></Button>
+                  <Button size="lg" className="btn-reddit btn-brand icon"><i className="fa fa-reddit"></i></Button>
+                  <Button size="lg" className="btn-spotify btn-brand icon"><i className="fa fa-spotify"></i></Button>
+                  <Button size="lg" className="btn-vine btn-brand icon"><i className="fa fa-vine"></i></Button>
+                  <Button size="lg" className="btn-foursquare btn-brand icon"><i className="fa fa-foursquare"></i></Button>
+                  <Button size="lg" className="btn-vimeo btn-brand icon"><i className="fa fa-vimeo"></i></Button>
+                </p>
+              </CardBody>
+            </Card>
+          </Col>
+
+          <Col xs="12">
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i>
+                <strong>Brand Button</strong>
+                <small> Text only. Usage ex. </small>
+                <code>
+                  &lt;Button className="btn-facebook btn-brand text"&gt;&lt;span&gt;Facebook&lt;/span&gt;&lt;/Button&gt;
+                </code>
+              </CardHeader>
+              <CardBody>
+                <h6>Size Small
+                  <small> Add this class <code>.btn-sm</code></small>
+                </h6>
+                <p>
+                  <Button size="sm" className="btn-facebook btn-brand text"><span>Facebook</span></Button>
+                  <Button size="sm" className="btn-twitter btn-brand text"><span>Twitter</span></Button>
+                  <Button size="sm" className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
+                  <Button size="sm" className="btn-flickr btn-brand text"><span>Flickr</span></Button>
+                  <Button size="sm" className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
+                  <Button size="sm" className="btn-xing btn-brand text"><span>Xing</span></Button>
+                  <Button size="sm" className="btn-github btn-brand text"><span>Github</span></Button>
+                  <Button size="sm" className="btn-html5 btn-brand text"><span>HTML5</span></Button>
+                  <Button size="sm" className="btn-openid btn-brand text"><span>OpenID</span></Button>
+                  <Button size="sm" className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
+                  <Button size="sm" className="btn-css3 btn-brand text"><span>CSS3</span></Button>
+                  <Button size="sm" className="btn-youtube btn-brand text"><span>YouTube</span></Button>
+                  <Button size="sm" className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
+                  <Button size="sm" className="btn-google-plus btn-brand text"><span>Google+</span></Button>
+                  <Button size="sm" className="btn-instagram btn-brand text"><span>Instagram</span></Button>
+                  <Button size="sm" className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
+                  <Button size="sm" className="btn-vk btn-brand text"><span>VK</span></Button>
+                  <Button size="sm" className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
+                  <Button size="sm" className="btn-behance btn-brand text"><span>Behance</span></Button>
+                  <Button size="sm" className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
+                  <Button size="sm" className="btn-reddit btn-brand text"><span>Reddit</span></Button>
+                  <Button size="sm" className="btn-spotify btn-brand text"><span>Spotify</span></Button>
+                  <Button size="sm" className="btn-vine btn-brand text"><span>Vine</span></Button>
+                  <Button size="sm" className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
+                  <Button size="sm" className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
+                </p>
+                <h6>Size Normal</h6>
+                <p>
+                  <Button className="btn-facebook btn-brand text"><span>Facebook</span></Button>
+                  <Button className="btn-twitter btn-brand text"><span>Twitter</span></Button>
+                  <Button className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
+                  <Button className="btn-flickr btn-brand text"><span>Flickr</span></Button>
+                  <Button className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
+                  <Button className="btn-xing btn-brand text"><span>Xing</span></Button>
+                  <Button className="btn-github btn-brand text"><span>Github</span></Button>
+                  <Button className="btn-html5 btn-brand text"><span>HTML5</span></Button>
+                  <Button className="btn-openid btn-brand text"><span>OpenID</span></Button>
+                  <Button className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
+                  <Button className="btn-css3 btn-brand text"><span>CSS3</span></Button>
+                  <Button className="btn-youtube btn-brand text"><span>YouTube</span></Button>
+                  <Button className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
+                  <Button className="btn-google-plus btn-brand text"><span>Google+</span></Button>
+                  <Button className="btn-instagram btn-brand text"><span>Instagram</span></Button>
+                  <Button className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
+                  <Button className="btn-vk btn-brand text"><span>VK</span></Button>
+                  <Button className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
+                  <Button className="btn-behance btn-brand text"><span>Behance</span></Button>
+                  <Button className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
+                  <Button className="btn-reddit btn-brand text"><span>Reddit</span></Button>
+                  <Button className="btn-spotify btn-brand text"><span>Spotify</span></Button>
+                  <Button className="btn-vine btn-brand text"><span>Vine</span></Button>
+                  <Button className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
+                  <Button className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
+                </p>
+                <h6>Size Large
+                  <small> Add this class <code>.btn-lg</code></small>
+                </h6>
+                <p>
+                  <Button size="lg" className="btn-facebook btn-brand text"><span>Facebook</span></Button>
+                  <Button size="lg" className="btn-twitter btn-brand text"><span>Twitter</span></Button>
+                  <Button size="lg" className="btn-linkedin btn-brand text"><span>LinkedIn</span></Button>
+                  <Button size="lg" className="btn-flickr btn-brand text"><span>Flickr</span></Button>
+                  <Button size="lg" className="btn-tumblr btn-brand text"><span>Tumblr</span></Button>
+                  <Button size="lg" className="btn-xing btn-brand text"><span>Xing</span></Button>
+                  <Button size="lg" className="btn-github btn-brand text"><span>Github</span></Button>
+                  <Button size="lg" className="btn-html5 btn-brand text"><span>HTML5</span></Button>
+                  <Button size="lg" className="btn-openid btn-brand text"><span>OpenID</span></Button>
+                  <Button size="lg" className="btn-stack-overflow btn-brand text"><span>StackOverflow</span></Button>
+                  <Button size="lg" className="btn-css3 btn-brand text"><span>CSS3</span></Button>
+                  <Button size="lg" className="btn-youtube btn-brand text"><span>YouTube</span></Button>
+                  <Button size="lg" className="btn-dribbble btn-brand text"><span>Dribbble</span></Button>
+                  <Button size="lg" className="btn-google-plus btn-brand text"><span>Google+</span></Button>
+                  <Button size="lg" className="btn-instagram btn-brand text"><span>Instagram</span></Button>
+                  <Button size="lg" className="btn-pinterest btn-brand text"><span>Pinterest</span></Button>
+                  <Button size="lg" className="btn-vk btn-brand text"><span>VK</span></Button>
+                  <Button size="lg" className="btn-yahoo btn-brand text"><span>Yahoo</span></Button>
+                  <Button size="lg" className="btn-behance btn-brand text"><span>Behance</span></Button>
+                  <Button size="lg" className="btn-dropbox btn-brand text"><span>Dropbox</span></Button>
+                  <Button size="lg" className="btn-reddit btn-brand text"><span>Reddit</span></Button>
+                  <Button size="lg" className="btn-spotify btn-brand text"><span>Spotify</span></Button>
+                  <Button size="lg" className="btn-vine btn-brand text"><span>Vine</span></Button>
+                  <Button size="lg" className="btn-foursquare btn-brand text"><span>Forsquare</span></Button>
+                  <Button size="lg" className="btn-vimeo btn-brand text"><span>Vimeo</span></Button>
+                </p>
+              </CardBody>
+            </Card>
+          </Col>
+        </Row>
+      </div>
+
+    );
+  }
+}
+
+export default BrandButtons;
diff --git a/src/views/Buttons/SocialButtons/SocialButtons.test.js b/src/views/Buttons/BrandButtons/BrandButtons.test.js
similarity index 68%
rename from src/views/Buttons/SocialButtons/SocialButtons.test.js
rename to src/views/Buttons/BrandButtons/BrandButtons.test.js
index b123450..01e6f9a 100644
--- a/src/views/Buttons/SocialButtons/SocialButtons.test.js
+++ b/src/views/Buttons/BrandButtons/BrandButtons.test.js
@@ -1,9 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import SocialButtons from './SocialButtons';
+import BrandButtons from './';
 
 it('renders without crashing', () => {
   const div = document.createElement('div');
-  ReactDOM.render(<SocialButtons />, div);
+  ReactDOM.render(<BrandButtons />, div);
   ReactDOM.unmountComponentAtNode(div);
 });
diff --git a/src/views/Buttons/SocialButtons/package.json b/src/views/Buttons/BrandButtons/package.json
similarity index 69%
rename from src/views/Buttons/SocialButtons/package.json
rename to src/views/Buttons/BrandButtons/package.json
index b839570..a57a4b4 100644
--- a/src/views/Buttons/SocialButtons/package.json
+++ b/src/views/Buttons/BrandButtons/package.json
@@ -2,5 +2,5 @@
   "name": "SocialButtons",
   "version": "0.0.0",
   "private": true,
-  "main": "./SocialButtons.js"
+  "main": "./BrandButtons.js"
 }
diff --git a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
index 9bc43b6..337fcb5 100644
--- a/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
+++ b/src/views/Buttons/ButtonDropdowns/ButtonDropdowns.js
@@ -8,7 +8,7 @@ class ButtonDropdowns extends Component {
 
     this.toggle = this.toggle.bind(this);
     this.state = {
-      dropdownOpen: new Array(16).fill(false),
+      dropdownOpen: new Array(19).fill(false),
     };
   }
 
@@ -200,6 +200,57 @@ class ButtonDropdowns extends Component {
                 </ButtonDropdown>
               </CardBody>
             </Card>
+            <Card>
+              <CardHeader>
+                <i className="fa fa-align-justify"></i><strong>Dropdown directions</strong>
+              </CardHeader>
+              <CardBody>
+                <ButtonDropdown direction="up" className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
+                  <DropdownToggle caret size="lg">
+                    Direction Up
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action Disabled</DropdownItem>
+                    <DropdownItem>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </ButtonDropdown>
+                <ButtonDropdown direction="left" className="mr-1" isOpen={this.state.dropdownOpen[16]} toggle={() => { this.toggle(16); }}>
+                  <DropdownToggle caret size="lg">
+                    Direction Left
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action Disabled</DropdownItem>
+                    <DropdownItem>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </ButtonDropdown>
+                <ButtonDropdown direction="right" className="mr-1" isOpen={this.state.dropdownOpen[17]} toggle={() => { this.toggle(17); }}>
+                  <DropdownToggle caret size="lg">
+                    Direction Right
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action Disabled</DropdownItem>
+                    <DropdownItem>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </ButtonDropdown>
+                <ButtonDropdown className="mr-1" isOpen={this.state.dropdownOpen[18]} toggle={() => { this.toggle(18); }}>
+                  <DropdownToggle caret size="lg">
+                    Default Down
+                  </DropdownToggle>
+                  <DropdownMenu>
+                    <DropdownItem header>Header</DropdownItem>
+                    <DropdownItem disabled>Action Disabled</DropdownItem>
+                    <DropdownItem>Action</DropdownItem>
+                    <DropdownItem>Another Action</DropdownItem>
+                  </DropdownMenu>
+                </ButtonDropdown>
+              </CardBody>
+            </Card>
             <Card>
               <CardHeader>
                 <i className="fa fa-align-justify"></i><strong>Button Dropdown sizing</strong>
@@ -229,24 +280,6 @@ class ButtonDropdowns extends Component {
                 </ButtonDropdown>
               </CardBody>
             </Card>
-            <Card>
-              <CardHeader>
-                <i className="fa fa-align-justify"></i><strong>Button Dropup variation</strong>
-              </CardHeader>
-              <CardBody>
-                <ButtonDropdown dropup className="mr-1" isOpen={this.state.dropdownOpen[15]} toggle={() => { this.toggle(15); }}>
-                  <DropdownToggle caret size="lg">
-                    Dropup
-                  </DropdownToggle>
-                  <DropdownMenu>
-                    <DropdownItem header>Header</DropdownItem>
-                    <DropdownItem disabled>Action Disabled</DropdownItem>
-                    <DropdownItem>Action</DropdownItem>
-                    <DropdownItem>Another Action</DropdownItem>
-                  </DropdownMenu>
-                </ButtonDropdown>
-              </CardBody>
-            </Card>
           </Col>
         </Row>
       </div>
@@ -254,4 +287,4 @@ class ButtonDropdowns extends Component {
   }
 }
 
-export default ButtonDropdowns;
\ No newline at end of file
+export default ButtonDropdowns;
diff --git a/src/views/Buttons/Buttons/Buttons.js b/src/views/Buttons/Buttons/Buttons.js
index fbaaa24..9e06033 100644
--- a/src/views/Buttons/Buttons/Buttons.js
+++ b/src/views/Buttons/Buttons/Buttons.js
@@ -12,9 +12,9 @@ class Buttons extends Component {
                 <strong>Options</strong>
               </CardHeader>
               <CardBody>
-                <Button color="primary">Primary</Button>{' '}
-                <Button color="secondary">Secondary</Button>{' '}
-                <Button color="success">Success</Button>{' '}
+                <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>{' '}
@@ -25,12 +25,12 @@ class Buttons extends Component {
                 <strong>With Icons</strong>
               </CardHeader>
               <CardBody>
-                <Button color="primary"><i className="fa fa-star"></i>{'\u00A0'} Primary</Button>
-                <Button color="secondary"><i className="fa fa-lightbulb-o"></i>{'\u00A0 Secondary'}</Button>
-                <Button color="success"><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>
+                <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>
diff --git a/src/views/Buttons/SocialButtons/SocialButtons.js b/src/views/Buttons/SocialButtons/SocialButtons.js
deleted file mode 100644
index c066897..0000000
--- a/src/views/Buttons/SocialButtons/SocialButtons.js
+++ /dev/null
@@ -1,318 +0,0 @@
-import React, { Component } from 'react';
-import { Button, Card, CardBody, CardHeader, Col, Row } from 'reactstrap';
-
-class SocialButtons extends Component {
-  render() {
-    return (
-      <div className="animated fadeIn">
-        <Row>
-          <Col xs="12">
-            <Card>
-              <CardHeader>
-                <strong>Social Media Button</strong>
-                <small>Usage ex.</small>
-                <code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook"&gt;&lt;span&gt;
-                  Facebook&lt;/span&gt;&lt;/Button&gt;</code>
-              </CardHeader>
-              <CardBody>
-                <h6>Size Small
-                  <small>Add this class <code>.btn-sm</code></small>
-                </h6>
-                <p>
-                  <Button size="sm" className="btn-facebook"><span>Facebook</span></Button>
-                  <Button size="sm" className="btn-twitter"><span>Twitter</span></Button>
-                  <Button size="sm" className="btn-linkedin"><span>LinkedIn</span></Button>
-                  <Button size="sm" className="btn-flickr"><span>Flickr</span></Button>
-                  <Button size="sm" className="btn-tumblr"><span>Tumblr</span></Button>
-                  <Button size="sm" className="btn-xing"><span>Xing</span></Button>
-                  <Button size="sm" className="btn-github"><span>Github</span></Button>
-                  <Button size="sm" className="btn-html5"><span>HTML5</span></Button>
-                  <Button size="sm" className="btn-openid"><span>OpenID</span></Button>
-                  <Button size="sm" className="btn-stack-overflow"><span>StackOverflow</span></Button>
-                  <Button size="sm" className="btn-css3"><span>CSS3</span></Button>
-                  <Button size="sm" className="btn-youtube"><span>YouTube</span></Button>
-                  <Button size="sm" className="btn-dribbble"><span>Dribbble</span></Button>
-                  <Button size="sm" className="btn-google-plus"><span>Google+</span></Button>
-                  <Button size="sm" className="btn-instagram"><span>Instagram</span></Button>
-                  <Button size="sm" className="btn-pinterest"><span>Pinterest</span></Button>
-                  <Button size="sm" className="btn-vk"><span>VK</span></Button>
-                  <Button size="sm" className="btn-yahoo"><span>Yahoo</span></Button>
-                  <Button size="sm" className="btn-behance"><span>Behance</span></Button>
-                  <Button size="sm" className="btn-dropbox"><span>Dropbox</span></Button>
-                  <Button size="sm" className="btn-reddit"><span>Reddit</span></Button>
-                  <Button size="sm" className="btn-spotify"><span>Spotify</span></Button>
-                  <Button size="sm" className="btn-vine"><span>Vine</span></Button>
-                  <Button size="sm" className="btn-foursquare"><span>Forsquare</span></Button>
-                  <Button size="sm" className="btn-vimeo"><span>Vimeo</span></Button>
-                </p>
-                <h6>Size Normal</h6>
-                <p>
-                  <Button className="btn-facebook"><span>Facebook</span></Button>
-                  <Button className="btn-twitter"><span>Twitter</span></Button>
-                  <Button className="btn-linkedin"><span>LinkedIn</span></Button>
-                  <Button className="btn-flickr"><span>Flickr</span></Button>
-                  <Button className="btn-tumblr"><span>Tumblr</span></Button>
-                  <Button className="btn-xing"><span>Xing</span></Button>
-                  <Button className="btn-github"><span>Github</span></Button>
-                  <Button className="btn-html5"><span>HTML5</span></Button>
-                  <Button className="btn-openid"><span>OpenID</span></Button>
-                  <Button className="btn-stack-overflow"><span>StackOverflow</span></Button>
-                  <Button className="btn-css3"><span>CSS3</span></Button>
-                  <Button className="btn-youtube"><span>YouTube</span></Button>
-                  <Button className="btn-dribbble"><span>Dribbble</span></Button>
-                  <Button className="btn-google-plus"><span>Google+</span></Button>
-                  <Button className="btn-instagram"><span>Instagram</span></Button>
-                  <Button className="btn-pinterest"><span>Pinterest</span></Button>
-                  <Button className="btn-vk"><span>VK</span></Button>
-                  <Button className="btn-yahoo"><span>Yahoo</span></Button>
-                  <Button className="btn-behance"><span>Behance</span></Button>
-                  <Button className="btn-dropbox"><span>Dropbox</span></Button>
-                  <Button className="btn-reddit"><span>Reddit</span></Button>
-                  <Button className="btn-spotify"><span>Spotify</span></Button>
-                  <Button className="btn-vine"><span>Vine</span></Button>
-                  <Button className="btn-foursquare"><span>Forsquare</span></Button>
-                  <Button className="btn-vimeo"><span>Vimeo</span></Button>
-                </p>
-                <h6>Size Large
-                  <small>Add this class <code>.btn-lg</code></small>
-                </h6>
-                <p>
-                  <Button size="lg" className="btn-facebook"><span>Facebook</span></Button>
-                  <Button size="lg" className="btn-twitter"><span>Twitter</span></Button>
-                  <Button size="lg" className="btn-linkedin"><span>LinkedIn</span></Button>
-                  <Button size="lg" className="btn-flickr"><span>Flickr</span></Button>
-                  <Button size="lg" className="btn-tumblr"><span>Tumblr</span></Button>
-                  <Button size="lg" className="btn-xing"><span>Xing</span></Button>
-                  <Button size="lg" className="btn-github"><span>Github</span></Button>
-                  <Button size="lg" className="btn-html5"><span>HTML5</span></Button>
-                  <Button size="lg" className="btn-openid"><span>OpenID</span></Button>
-                  <Button size="lg" className="btn-stack-overflow"><span>StackOverflow</span></Button>
-                  <Button size="lg" className="btn-css3"><span>CSS3</span></Button>
-                  <Button size="lg" className="btn-youtube"><span>YouTube</span></Button>
-                  <Button size="lg" className="btn-dribbble"><span>Dribbble</span></Button>
-                  <Button size="lg" className="btn-google-plus"><span>Google+</span></Button>
-                  <Button size="lg" className="btn-instagram"><span>Instagram</span></Button>
-                  <Button size="lg" className="btn-pinterest"><span>Pinterest</span></Button>
-                  <Button size="lg" className="btn-vk"><span>VK</span></Button>
-                  <Button size="lg" className="btn-yahoo"><span>Yahoo</span></Button>
-                  <Button size="lg" className="btn-behance"><span>Behance</span></Button>
-                  <Button size="lg" className="btn-dropbox"><span>Dropbox</span></Button>
-                  <Button size="lg" className="btn-reddit"><span>Reddit</span></Button>
-                  <Button size="lg" className="btn-spotify"><span>Spotify</span></Button>
-                  <Button size="lg" className="btn-vine"><span>Vine</span></Button>
-                  <Button size="lg" className="btn-foursquare"><span>Forsquare</span></Button>
-                  <Button size="lg" className="btn-vimeo"><span>Vimeo</span></Button>
-                </p>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12">
-            <Card>
-              <CardHeader>
-                <strong>Social Media Button</strong>
-                <small>Only icons. Usage ex.</small>
-                <code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook icon"&gt;&lt;span&gt;
-                  Facebook&lt;/span&gt;&lt;/Button&gt;</code>
-              </CardHeader>
-              <CardBody>
-                <h6>Size Small
-                  <small>Add this class <code>.btn-sm</code></small>
-                </h6>
-                <p>
-                  <Button size="sm" className="btn-facebook icon"><span>Facebook</span></Button>
-                  <Button size="sm" className="btn-twitter icon"><span>Twitter</span></Button>
-                  <Button size="sm" className="btn-linkedin icon"><span>LinkedIn</span></Button>
-                  <Button size="sm" className="btn-flickr icon"><span>Flickr</span></Button>
-                  <Button size="sm" className="btn-tumblr icon"><span>Tumblr</span></Button>
-                  <Button size="sm" className="btn-xing icon"><span>Xing</span></Button>
-                  <Button size="sm" className="btn-github icon"><span>Github</span></Button>
-                  <Button size="sm" className="btn-html5 icon"><span>HTML5</span></Button>
-                  <Button size="sm" className="btn-openid icon"><span>OpenID</span></Button>
-                  <Button size="sm" className="btn-stack-overflow icon"><span>StackOverflow</span></Button>
-                  <Button size="sm" className="btn-css3 icon"><span>CSS3</span></Button>
-                  <Button size="sm" className="btn-youtube icon"><span>YouTube</span></Button>
-                  <Button size="sm" className="btn-dribbble icon"><span>Dribbble</span></Button>
-                  <Button size="sm" className="btn-google-plus icon"><span>Google+</span></Button>
-                  <Button size="sm" className="btn-instagram icon"><span>Instagram</span></Button>
-                  <Button size="sm" className="btn-pinterest icon"><span>Pinterest</span></Button>
-                  <Button size="sm" className="btn-vk icon"><span>VK</span></Button>
-                  <Button size="sm" className="btn-yahoo icon"><span>Yahoo</span></Button>
-                  <Button size="sm" className="btn-behance icon"><span>Behance</span></Button>
-                  <Button size="sm" className="btn-dropbox icon"><span>Dropbox</span></Button>
-                  <Button size="sm" className="btn-reddit icon"><span>Reddit</span></Button>
-                  <Button size="sm" className="btn-spotify icon"><span>Spotify</span></Button>
-                  <Button size="sm" className="btn-vine icon"><span>Vine</span></Button>
-                  <Button size="sm" className="btn-foursquare icon"><span>Forsquare</span></Button>
-                  <Button size="sm" className="btn-vimeo icon"><span>Vimeo</span></Button>
-                </p>
-                <h6>Size Normal</h6>
-                <p>
-                  <Button className="btn-facebook icon"><span>Facebook</span></Button>
-                  <Button className="btn-twitter icon"><span>Twitter</span></Button>
-                  <Button className="btn-linkedin icon"><span>LinkedIn</span></Button>
-                  <Button className="btn-flickr icon"><span>Flickr</span></Button>
-                  <Button className="btn-tumblr icon"><span>Tumblr</span></Button>
-                  <Button className="btn-xing icon"><span>Xing</span></Button>
-                  <Button className="btn-github icon"><span>Github</span></Button>
-                  <Button className="btn-html5 icon"><span>HTML5</span></Button>
-                  <Button className="btn-openid icon"><span>OpenID</span></Button>
-                  <Button className="btn-stack-overflow icon"><span>StackOverflow</span></Button>
-                  <Button className="btn-css3 icon"><span>CSS3</span></Button>
-                  <Button className="btn-youtube icon"><span>YouTube</span></Button>
-                  <Button className="btn-dribbble icon"><span>Dribbble</span></Button>
-                  <Button className="btn-google-plus icon"><span>Google+</span></Button>
-                  <Button className="btn-instagram icon"><span>Instagram</span></Button>
-                  <Button className="btn-pinterest icon"><span>Pinterest</span></Button>
-                  <Button className="btn-vk icon"><span>VK</span></Button>
-                  <Button className="btn-yahoo icon"><span>Yahoo</span></Button>
-                  <Button className="btn-behance icon"><span>Behance</span></Button>
-                  <Button className="btn-dropbox icon"><span>Dropbox</span></Button>
-                  <Button className="btn-reddit icon"><span>Reddit</span></Button>
-                  <Button className="btn-spotify icon"><span>Spotify</span></Button>
-                  <Button className="btn-vine icon"><span>Vine</span></Button>
-                  <Button className="btn-foursquare icon"><span>Forsquare</span></Button>
-                  <Button className="btn-vimeo icon"><span>Vimeo</span></Button>
-                </p>
-                <h6>Size Large
-                  <small>Add this class <code>.btn-lg</code></small>
-                </h6>
-                <p>
-                  <Button size="lg" className="btn-facebook icon"><span>Facebook</span></Button>
-                  <Button size="lg" className="btn-twitter icon"><span>Twitter</span></Button>
-                  <Button size="lg" className="btn-linkedin icon"><span>LinkedIn</span></Button>
-                  <Button size="lg" className="btn-flickr icon"><span>Flickr</span></Button>
-                  <Button size="lg" className="btn-tumblr icon"><span>Tumblr</span></Button>
-                  <Button size="lg" className="btn-xing icon"><span>Xing</span></Button>
-                  <Button size="lg" className="btn-github icon"><span>Github</span></Button>
-                  <Button size="lg" className="btn-html5 icon"><span>HTML5</span></Button>
-                  <Button size="lg" className="btn-openid icon"><span>OpenID</span></Button>
-                  <Button size="lg" className="btn-stack-overflow icon"><span>StackOverflow</span></Button>
-                  <Button size="lg" className="btn-css3 icon"><span>CSS3</span></Button>
-                  <Button size="lg" className="btn-youtube icon"><span>YouTube</span></Button>
-                  <Button size="lg" className="btn-dribbble icon"><span>Dribbble</span></Button>
-                  <Button size="lg" className="btn-google-plus icon"><span>Google+</span></Button>
-                  <Button size="lg" className="btn-instagram icon"><span>Instagram</span></Button>
-                  <Button size="lg" className="btn-pinterest icon"><span>Pinterest</span></Button>
-                  <Button size="lg" className="btn-vk icon"><span>VK</span></Button>
-                  <Button size="lg" className="btn-yahoo icon"><span>Yahoo</span></Button>
-                  <Button size="lg" className="btn-behance icon"><span>Behance</span></Button>
-                  <Button size="lg" className="btn-dropbox icon"><span>Dropbox</span></Button>
-                  <Button size="lg" className="btn-reddit icon"><span>Reddit</span></Button>
-                  <Button size="lg" className="btn-spotify icon"><span>Spotify</span></Button>
-                  <Button size="lg" className="btn-vine icon"><span>Vine</span></Button>
-                  <Button size="lg" className="btn-foursquare icon"><span>Forsquare</span></Button>
-                  <Button size="lg" className="btn-vimeo icon"><span>Vimeo</span></Button>
-                </p>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12">
-            <Card>
-              <CardHeader>
-                <strong>Social Media Button</strong>
-                <small>Only text. Usage ex.</small>
-                <code style={{ textTransform: 'lowercase' }}>&lt;button className="btn-facebook text"&gt;&lt;span&gt;
-                  Facebook&lt;/span&gt;&lt;/Button&gt;</code>
-              </CardHeader>
-              <CardBody>
-                <h6>Size Small
-                  <small>Add this class <code>.btn-sm</code></small>
-                </h6>
-                <p>
-                  <Button size="sm" className="btn-facebook text"><span>Facebook</span></Button>
-                  <Button size="sm" className="btn-twitter text"><span>Twitter</span></Button>
-                  <Button size="sm" className="btn-linkedin text"><span>LinkedIn</span></Button>
-                  <Button size="sm" className="btn-flickr text"><span>Flickr</span></Button>
-                  <Button size="sm" className="btn-tumblr text"><span>Tumblr</span></Button>
-                  <Button size="sm" className="btn-xing text"><span>Xing</span></Button>
-                  <Button size="sm" className="btn-github text"><span>Github</span></Button>
-                  <Button size="sm" className="btn-html5 text"><span>HTML5</span></Button>
-                  <Button size="sm" className="btn-openid text"><span>OpenID</span></Button>
-                  <Button size="sm" className="btn-stack-overflow text"><span>StackOverflow</span></Button>
-                  <Button size="sm" className="btn-css3 text"><span>CSS3</span></Button>
-                  <Button size="sm" className="btn-youtube text"><span>YouTube</span></Button>
-                  <Button size="sm" className="btn-dribbble text"><span>Dribbble</span></Button>
-                  <Button size="sm" className="btn-google-plus text"><span>Google+</span></Button>
-                  <Button size="sm" className="btn-instagram text"><span>Instagram</span></Button>
-                  <Button size="sm" className="btn-pinterest text"><span>Pinterest</span></Button>
-                  <Button size="sm" className="btn-vk text"><span>VK</span></Button>
-                  <Button size="sm" className="btn-yahoo text"><span>Yahoo</span></Button>
-                  <Button size="sm" className="btn-behance text"><span>Behance</span></Button>
-                  <Button size="sm" className="btn-dropbox text"><span>Dropbox</span></Button>
-                  <Button size="sm" className="btn-reddit text"><span>Reddit</span></Button>
-                  <Button size="sm" className="btn-spotify text"><span>Spotify</span></Button>
-                  <Button size="sm" className="btn-vine text"><span>Vine</span></Button>
-                  <Button size="sm" className="btn-foursquare text"><span>Forsquare</span></Button>
-                  <Button size="sm" className="btn-vimeo text"><span>Vimeo</span></Button>
-                </p>
-                <h6>Size Normal</h6>
-                <p>
-                  <Button className="btn-facebook text"><span>Facebook</span></Button>
-                  <Button className="btn-twitter text"><span>Twitter</span></Button>
-                  <Button className="btn-linkedin text"><span>LinkedIn</span></Button>
-                  <Button className="btn-flickr text"><span>Flickr</span></Button>
-                  <Button className="btn-tumblr text"><span>Tumblr</span></Button>
-                  <Button className="btn-xing text"><span>Xing</span></Button>
-                  <Button className="btn-github text"><span>Github</span></Button>
-                  <Button className="btn-html5 text"><span>HTML5</span></Button>
-                  <Button className="btn-openid text"><span>OpenID</span></Button>
-                  <Button className="btn-stack-overflow text"><span>StackOverflow</span></Button>
-                  <Button className="btn-css3 text"><span>CSS3</span></Button>
-                  <Button className="btn-youtube text"><span>YouTube</span></Button>
-                  <Button className="btn-dribbble text"><span>Dribbble</span></Button>
-                  <Button className="btn-google-plus text"><span>Google+</span></Button>
-                  <Button className="btn-instagram text"><span>Instagram</span></Button>
-                  <Button className="btn-pinterest text"><span>Pinterest</span></Button>
-                  <Button className="btn-vk text"><span>VK</span></Button>
-                  <Button className="btn-yahoo text"><span>Yahoo</span></Button>
-                  <Button className="btn-behance text"><span>Behance</span></Button>
-                  <Button className="btn-dropbox text"><span>Dropbox</span></Button>
-                  <Button className="btn-reddit text"><span>Reddit</span></Button>
-                  <Button className="btn-spotify text"><span>Spotify</span></Button>
-                  <Button className="btn-vine text"><span>Vine</span></Button>
-                  <Button className="btn-foursquare text"><span>Forsquare</span></Button>
-                  <Button className="btn-vimeo text"><span>Vimeo</span></Button>
-                </p>
-                <h6>Size Large
-                  <small>Add this class <code>.btn-lg</code></small>
-                </h6>
-                <p>
-                  <Button size="lg" className="btn-facebook text"><span>Facebook</span></Button>
-                  <Button size="lg" className="btn-twitter text"><span>Twitter</span></Button>
-                  <Button size="lg" className="btn-linkedin text"><span>LinkedIn</span></Button>
-                  <Button size="lg" className="btn-flickr text"><span>Flickr</span></Button>
-                  <Button size="lg" className="btn-tumblr text"><span>Tumblr</span></Button>
-                  <Button size="lg" className="btn-xing text"><span>Xing</span></Button>
-                  <Button size="lg" className="btn-github text"><span>Github</span></Button>
-                  <Button size="lg" className="btn-html5 text"><span>HTML5</span></Button>
-                  <Button size="lg" className="btn-openid text"><span>OpenID</span></Button>
-                  <Button size="lg" className="btn-stack-overflow text"><span>StackOverflow</span></Button>
-                  <Button size="lg" className="btn-css3 text"><span>CSS3</span></Button>
-                  <Button size="lg" className="btn-youtube text"><span>YouTube</span></Button>
-                  <Button size="lg" className="btn-dribbble text"><span>Dribbble</span></Button>
-                  <Button size="lg" className="btn-google-plus text"><span>Google+</span></Button>
-                  <Button size="lg" className="btn-instagram text"><span>Instagram</span></Button>
-                  <Button size="lg" className="btn-pinterest text"><span>Pinterest</span></Button>
-                  <Button size="lg" className="btn-vk text"><span>VK</span></Button>
-                  <Button size="lg" className="btn-yahoo text"><span>Yahoo</span></Button>
-                  <Button size="lg" className="btn-behance text"><span>Behance</span></Button>
-                  <Button size="lg" className="btn-dropbox text"><span>Dropbox</span></Button>
-                  <Button size="lg" className="btn-reddit text"><span>Reddit</span></Button>
-                  <Button size="lg" className="btn-spotify text"><span>Spotify</span></Button>
-                  <Button size="lg" className="btn-vine text"><span>Vine</span></Button>
-                  <Button size="lg" className="btn-foursquare text"><span>Forsquare</span></Button>
-                  <Button size="lg" className="btn-vimeo text"><span>Vimeo</span></Button>
-                </p>
-              </CardBody>
-            </Card>
-          </Col>
-        </Row>
-      </div>
-
-    );
-  }
-}
-
-export default SocialButtons;
diff --git a/src/views/Buttons/index.js b/src/views/Buttons/index.js
index f2c9e3e..ae97260 100644
--- a/src/views/Buttons/index.js
+++ b/src/views/Buttons/index.js
@@ -1,8 +1,8 @@
 import ButtonDropdowns from './ButtonDropdowns';
 import ButtonGroups from './ButtonGroups';
 import Buttons from './Buttons';
-import SocialButtons from './SocialButtons';
+import BrandButtons from './BrandButtons';
 
-export { 
-  ButtonDropdowns, ButtonGroups, Buttons, SocialButtons 
-}
\ No newline at end of file
+export {
+  ButtonDropdowns, ButtonGroups, Buttons, BrandButtons
+}
diff --git a/src/views/Dashboard/Dashboard.js b/src/views/Dashboard/Dashboard.js
index 4202c5b..f86d22f 100644
--- a/src/views/Dashboard/Dashboard.js
+++ b/src/views/Dashboard/Dashboard.js
@@ -790,10 +790,13 @@ class Dashboard extends Component {
                       </div>
                     </div>
                     <div className="legend text-center">
-                      <Badge pill color="info" style={{display: "inline-block"}}></Badge>
-                      <small>New clients</small>
-                      &nbsp; <Badge pill color="danger" style={{display: "inline-block"}}></Badge>
-                      <small>Recurring clients</small>
+                      <small>
+                        <sup className="px-1"><Badge pill color="info">&nbsp;</Badge></sup>
+                        New clients
+                        &nbsp;
+                        <sup className="px-1"><Badge pill color="danger">&nbsp;</Badge></sup>
+                        Recurring clients
+                      </small>
                     </div>
                   </Col>
                   <Col xs="12" md="6" xl="6">
diff --git a/src/views/index.js b/src/views/index.js
index 7ad09c6..2849d74 100644
--- a/src/views/index.js
+++ b/src/views/index.js
@@ -18,7 +18,7 @@ import {
   Tooltips,
 } from './Base';
 
-import { ButtonDropdowns, ButtonGroups, Buttons, SocialButtons } from './Buttons';
+import { ButtonDropdowns, ButtonGroups, Buttons, BrandButtons } from './Buttons';
 import Charts from './Charts';
 import Dashboard from './Dashboard';
 import { Flags, FontAwesome, SimpleLineIcons } from './Icons';
@@ -42,7 +42,7 @@ export {
   FontAwesome,
   ButtonDropdowns,
   ButtonGroups,
-  SocialButtons,
+  BrandButtons,
   Buttons,
   Tooltips,
   Tabs,