From 3cfeb6064a90023a8d6c50d62fb79a3c8d9fccfc Mon Sep 17 00:00:00 2001
From: Rishichandra Wawhal <rishichandra.wawhal@gmail.com>
Date: Wed, 23 Jan 2019 07:26:40 +0530
Subject: [PATCH] reuse buttons across console for uniformity (#1400)

---
 console/src/components/Common/Common.scss     |   8 ++
 .../Services/CustomResolver/Add/Add.js        |   8 +-
 .../Services/CustomResolver/Edit/Edit.js      |  31 ++--
 .../CustomResolver/Landing/CustomResolver.js  |   8 +-
 .../Services/CustomResolver/Styles.scss       |   2 +-
 .../components/Services/Data/Add/AddTable.js  |   8 +-
 .../Services/Data/Metadata/ClearAccessKey.js  |  10 +-
 .../Services/Data/Metadata/ExportMetadata.js  |  10 +-
 .../Services/Data/Metadata/ImportMetadata.js  |   9 +-
 .../Services/Data/Metadata/ReloadMetadata.js  |   9 +-
 .../Services/Data/Metadata/ResetMetadata.js   |   9 +-
 .../components/Services/Data/Notification.js  |   9 +-
 .../Data/PageContainer/PageContainer.js       |   9 +-
 .../components/Services/Data/RawSQL/RawSQL.js |  18 +--
 .../Services/Data/Schema/AutoAddRelations.js  |  21 +--
 .../components/Services/Data/Schema/Schema.js |  26 ++--
 .../Services/Data/TableBrowseRows/EditItem.js |   8 +-
 .../Data/TableBrowseRows/FilterQuery.js       |   8 +-
 .../Services/Data/TableBrowseRows/ViewRows.js |  25 ++--
 .../Services/Data/TableCommon/TableHeader.js  |  13 --
 .../Data/TableInsertItem/InsertItem.js        |  15 +-
 .../Services/Data/TableModify/ModifyTable.js  |  61 ++++----
 .../Services/Data/TableModify/ModifyView.js   |  33 ++---
 .../Data/TablePermissions/Permissions.js      |  40 +++---
 .../AddManualRelationship.js                  |  16 ++-
 .../Data/TableRelationships/Relationships.js  |  45 +++---
 .../TableRelationships/RelationshipsView.js   |  12 +-
 .../Services/EventTrigger/Add/AddTrigger.js   |  53 ++++---
 .../EventTrigger/Modify/ActionButtons.js      |   8 +-
 .../Services/EventTrigger/Modify/Editor.js    |  21 ++-
 .../Services/EventTrigger/Modify/Modify.scss  |   2 -
 .../Services/EventTrigger/Notification.js     |   9 +-
 .../PageContainer/PageContainer.js            |   9 +-
 .../EventTrigger/PendingEvents/FilterQuery.js |  16 ++-
 .../ProcessedEvents/FilterQuery.js            |  16 ++-
 .../EventTrigger/RunningEvents/FilterQuery.js |  16 ++-
 .../EventTrigger/Schema/AutoAddRelations.js   | 134 ------------------
 .../Services/EventTrigger/Schema/Schema.js    |   8 +-
 .../EventTrigger/StreamingLogs/Logs.js        |  76 +++++-----
 .../TableCommon/RedeliverEvent.js             |  17 ++-
 .../EventTrigger/TableCommon/Table.scss       |  14 +-
 .../Services/Layout/Button/Button.js          |  40 ++++++
 .../Services/Layout/LeftNavBar/LeftNavBar.js  |   9 +-
 .../Layout/RightLayoutWrapper/Schema.js       |   9 +-
 44 files changed, 480 insertions(+), 448 deletions(-)
 delete mode 100644 console/src/components/Services/EventTrigger/Schema/AutoAddRelations.js
 create mode 100644 console/src/components/Services/Layout/Button/Button.js

diff --git a/console/src/components/Common/Common.scss b/console/src/components/Common/Common.scss
index 604e97ec0e9..fcd625170d9 100644
--- a/console/src/components/Common/Common.scss
+++ b/console/src/components/Common/Common.scss
@@ -789,6 +789,9 @@ code
     background-color: #F2B130;
   }
 }
+.gray_button {
+  background: #f2f2f2 !important;
+}
 .docsButton
 {
   background-color: #fff;
@@ -1109,6 +1112,11 @@ code
   height: 100vh;
   margin-bottom: 50px;
 }
+.button_mar_right
+{
+  margin-right: 20px;
+}
+
 
 /* container height subtracting top header and bottom scroll bar */
 $mainContainerHeight: calc(100vh - 50px - 25px);
diff --git a/console/src/components/Services/CustomResolver/Add/Add.js b/console/src/components/Services/CustomResolver/Add/Add.js
index 165c19a8522..7b5c54004dd 100644
--- a/console/src/components/Services/CustomResolver/Add/Add.js
+++ b/console/src/components/Services/CustomResolver/Add/Add.js
@@ -3,6 +3,7 @@ import Common from '../Common/Common';
 
 import { addResolver, RESET } from './addResolverReducer';
 import Helmet from 'react-helmet';
+import Button from '../../Layout/Button/Button';
 
 import { pageTitle } from '../constants';
 
@@ -25,14 +26,15 @@ class Add extends React.Component {
         >
           <Common {...this.props} />
           <div className={styles.commonBtn}>
-            <button
+            <Button
               type="submit"
-              className={styles.yellow_button}
+              color="yellow"
+              size="sm"
               disabled={isRequesting}
               data-test="add-remote-schema-submit"
             >
               {isRequesting ? 'Adding...' : 'Add Remote Schema'}
-            </button>
+            </Button>
             {/*
             <button className={styles.default_button}>Cancel</button>
             */}
diff --git a/console/src/components/Services/CustomResolver/Edit/Edit.js b/console/src/components/Services/CustomResolver/Edit/Edit.js
index 6fec1fce0ab..324959a90da 100644
--- a/console/src/components/Services/CustomResolver/Edit/Edit.js
+++ b/console/src/components/Services/CustomResolver/Edit/Edit.js
@@ -13,6 +13,7 @@ import { push } from 'react-router-redux';
 import Helmet from 'react-helmet';
 import tabInfo from './tabInfo';
 import CommonTabLayout from '../../Layout/CommonTabLayout/CommonTabLayout';
+import Button from '../../Layout/Button/Button';
 
 import { appPrefix, pageTitle } from '../constants';
 
@@ -97,8 +98,10 @@ class Edit extends React.Component {
     const generateMigrateBtns = () => {
       return 'isModify' in editState && !editState.isModify ? (
         <div className={styles.commonBtn}>
-          <button
-            className={styles.yellow_button}
+          <Button
+            className={styles.button_mar_right}
+            color="yellow"
+            size="sm"
             onClick={e => {
               e.preventDefault();
               this.modifyClick();
@@ -107,9 +110,10 @@ class Edit extends React.Component {
             disabled={isRequesting}
           >
             Modify
-          </button>
-          <button
-            className={styles.danger_button + ' btn-danger'}
+          </Button>
+          <Button
+            color="red"
+            size="sm"
             onClick={e => {
               e.preventDefault();
               this.handleDeleteResolver(e);
@@ -118,7 +122,7 @@ class Edit extends React.Component {
             data-test={'remote-schema-edit-delete-btn'}
           >
             {isRequesting ? 'Deleting ...' : 'Delete'}
-          </button>
+          </Button>
           {this.state.deleteConfirmationError ? (
             <span
               className={styles.delete_confirmation_error}
@@ -130,16 +134,19 @@ class Edit extends React.Component {
         </div>
       ) : (
         <div className={styles.commonBtn}>
-          <button
-            className={styles.yellow_button}
+          <Button
+            className={styles.button_mar_right}
+            color="yellow"
+            size="sm"
             type="submit"
             disabled={isRequesting}
             data-test={'remote-schema-edit-save-btn'}
           >
             {isRequesting ? 'Saving' : 'Save'}
-          </button>
-          <button
-            className={styles.default_button}
+          </Button>
+          <Button
+            color="white"
+            size="sm"
             onClick={e => {
               e.preventDefault();
               this.handleCancelModify();
@@ -148,7 +155,7 @@ class Edit extends React.Component {
             disabled={isRequesting}
           >
             Cancel
-          </button>
+          </Button>
         </div>
       );
     };
diff --git a/console/src/components/Services/CustomResolver/Landing/CustomResolver.js b/console/src/components/Services/CustomResolver/Landing/CustomResolver.js
index 0b7cf078a43..6c32122f698 100644
--- a/console/src/components/Services/CustomResolver/Landing/CustomResolver.js
+++ b/console/src/components/Services/CustomResolver/Landing/CustomResolver.js
@@ -4,6 +4,7 @@ import { push } from 'react-router-redux';
 
 import { appPrefix, pageTitle } from '../constants';
 import globals from '../../../../Globals';
+import Button from '../../Layout/Button/Button';
 
 class CustomResolver extends React.Component {
   render() {
@@ -25,16 +26,17 @@ class CustomResolver extends React.Component {
               Remote Schemas &nbsp;
             </h2>
             {migrationMode ? (
-              <button
+              <Button
                 data-test="data-create-remote-schemas"
-                className={styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch(push(`${globals.urlPrefix}${appPrefix}/manage/add`));
                 }}
               >
                 Add
-              </button>
+              </Button>
             ) : null}
             <hr />
           </div>
diff --git a/console/src/components/Services/CustomResolver/Styles.scss b/console/src/components/Services/CustomResolver/Styles.scss
index b6e769b34d5..b0bd7b40278 100644
--- a/console/src/components/Services/CustomResolver/Styles.scss
+++ b/console/src/components/Services/CustomResolver/Styles.scss
@@ -139,4 +139,4 @@
     line-height: 26px;
   }
 
-}
+}
\ No newline at end of file
diff --git a/console/src/components/Services/Data/Add/AddTable.js b/console/src/components/Services/Data/Add/AddTable.js
index ccb58f1d7f2..d8a3c0f82e2 100644
--- a/console/src/components/Services/Data/Add/AddTable.js
+++ b/console/src/components/Services/Data/Add/AddTable.js
@@ -4,6 +4,7 @@ import Helmet from 'react-helmet';
 
 import * as tooltip from './Tooltips';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Button from '../../Layout/Button/Button';
 
 import dataTypes from '../Common/DataTypes';
 import { showErrorNotification } from '../Notification';
@@ -472,14 +473,15 @@ class AddTable extends Component {
               }}
             />
             <hr />
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
               onClick={this.submitValidation.bind(this)}
               data-test="table-create"
+              color="yellow"
+              size="sm"
             >
               {createBtnText}
-            </button>
+            </Button>
           </div>
         </div>
       </div>
diff --git a/console/src/components/Services/Data/Metadata/ClearAccessKey.js b/console/src/components/Services/Data/Metadata/ClearAccessKey.js
index 73f01956b7a..d44b7d2c3d9 100644
--- a/console/src/components/Services/Data/Metadata/ClearAccessKey.js
+++ b/console/src/components/Services/Data/Metadata/ClearAccessKey.js
@@ -7,6 +7,7 @@ import {
   showSuccessNotification,
   showErrorNotification,
 } from '../Notification';
+import Button from '../../Layout/Button/Button';
 
 class ClearAccessKey extends Component {
   constructor() {
@@ -15,13 +16,14 @@ class ClearAccessKey extends Component {
     this.state.isClearing = false;
   }
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-clear-access-key"
-          className={styles.default_button + ' ' + metaDataStyles.margin_right}
+          className={metaDataStyles.margin_right}
+          color="white"
+          size="sm"
           onClick={e => {
             e.preventDefault();
             this.setState({ isClearing: true });
@@ -52,7 +54,7 @@ class ClearAccessKey extends Component {
           }}
         >
           {this.state.isClearing ? 'Clearing...' : 'Clear access key (logout)'}
-        </button>
+        </Button>
       </div>
     );
   }
diff --git a/console/src/components/Services/Data/Metadata/ExportMetadata.js b/console/src/components/Services/Data/Metadata/ExportMetadata.js
index 9524a81c423..bd1e60da416 100644
--- a/console/src/components/Services/Data/Metadata/ExportMetadata.js
+++ b/console/src/components/Services/Data/Metadata/ExportMetadata.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
+import Button from '../../Layout/Button/Button';
 
 import {
   showSuccessNotification,
@@ -14,13 +15,14 @@ class ExportMetadata extends Component {
     this.state.isExporting = false;
   }
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-export-metadata"
-          className={styles.default_button + ' ' + metaDataStyles.margin_right}
+          className={metaDataStyles.margin_right}
+          size="sm"
+          color="white"
           onClick={e => {
             e.preventDefault();
             this.setState({ isExporting: true });
@@ -83,7 +85,7 @@ class ExportMetadata extends Component {
           }}
         >
           {this.state.isExporting ? 'Exporting...' : 'Export metadata'}
-        </button>
+        </Button>
       </div>
     );
   }
diff --git a/console/src/components/Services/Data/Metadata/ImportMetadata.js b/console/src/components/Services/Data/Metadata/ImportMetadata.js
index b084d26a048..2054eda5228 100644
--- a/console/src/components/Services/Data/Metadata/ImportMetadata.js
+++ b/console/src/components/Services/Data/Metadata/ImportMetadata.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
+import Button from '../../Layout/Button/Button';
 
 import {
   showSuccessNotification,
@@ -83,13 +84,13 @@ class ImportMetadata extends Component {
       });
   }
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-import-metadata"
-          className={styles.default_button}
+          size="sm"
+          color="white"
           onClick={e => {
             e.preventDefault();
             const currThis = this;
@@ -112,7 +113,7 @@ class ImportMetadata extends Component {
           }}
         >
           {this.state.isImporting ? 'Importing...' : 'Import metadata'}
-        </button>
+        </Button>
       </div>
     );
   }
diff --git a/console/src/components/Services/Data/Metadata/ReloadMetadata.js b/console/src/components/Services/Data/Metadata/ReloadMetadata.js
index 84b17d589c9..111cf41cd2c 100644
--- a/console/src/components/Services/Data/Metadata/ReloadMetadata.js
+++ b/console/src/components/Services/Data/Metadata/ReloadMetadata.js
@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
+import Button from '../../Layout/Button/Button';
 
 import {
   showSuccessNotification,
@@ -14,13 +15,13 @@ class ReloadMetadata extends Component {
     this.state.isReloading = false;
   }
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-reload-metadata"
-          className={this.props.bsClass || styles.default_button}
+          color="white"
+          size="sm"
           onClick={e => {
             e.preventDefault();
             this.setState({ isReloading: true });
@@ -75,7 +76,7 @@ class ReloadMetadata extends Component {
           {this.state.isReloading
             ? this.props.btnTextChanging || 'Reloading...'
             : this.props.btnText || 'Reload'}
-        </button>
+        </Button>
       </div>
     );
   }
diff --git a/console/src/components/Services/Data/Metadata/ResetMetadata.js b/console/src/components/Services/Data/Metadata/ResetMetadata.js
index cb0f3ceb294..e4338540811 100644
--- a/console/src/components/Services/Data/Metadata/ResetMetadata.js
+++ b/console/src/components/Services/Data/Metadata/ResetMetadata.js
@@ -2,6 +2,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import Endpoints, { globalCookiePolicy } from '../../../../Endpoints';
 import { showNotification } from '../../../App/Actions';
+import Button from '../../Layout/Button/Button';
 
 import {
   showSuccessNotification,
@@ -16,13 +17,13 @@ class ResetMetadata extends Component {
   }
 
   render() {
-    const styles = require('../PageContainer/PageContainer.scss');
     const metaDataStyles = require('./Metadata.scss');
     return (
       <div className={metaDataStyles.display_inline}>
-        <button
+        <Button
           data-test="data-reset-metadata"
-          className={styles.default_button}
+          color="white"
+          size="sm"
           onClick={e => {
             e.preventDefault();
             const a = prompt(
@@ -78,7 +79,7 @@ class ResetMetadata extends Component {
           }}
         >
           {this.state.isResetting ? 'Resetting...' : 'Reset'}
-        </button>
+        </Button>
       </div>
     );
   }
diff --git a/console/src/components/Services/Data/Notification.js b/console/src/components/Services/Data/Notification.js
index 18c6057d60d..18bfa733372 100644
--- a/console/src/components/Services/Data/Notification.js
+++ b/console/src/components/Services/Data/Notification.js
@@ -2,6 +2,7 @@ import React from 'react';
 import AceEditor from 'react-ace';
 import { showNotification, showTempNotification } from '../../App/Actions';
 import { notifExpand, notifMsg } from '../../App/Actions';
+import Button from '../Layout/Button/Button';
 
 const styles = require('./TableCommon/Table.scss');
 
@@ -47,15 +48,17 @@ const showErrorNotification = (title, message, reqBody, error) => {
   let finalJson = error ? error.message : '{}';
   if (error && 'action' in error) {
     refreshBtn = (
-      <button
-        className={styles.yellow_button + ' ' + styles.add_mar_top_small}
+      <Button
+        className={styles.add_mar_top_small}
+        color="yellow"
+        size="sm"
         onClick={e => {
           e.preventDefault();
           window.location.reload();
         }}
       >
         Refresh Console
-      </button>
+      </Button>
     );
     finalJson = error.action;
   } else if (error && 'internal' in error) {
diff --git a/console/src/components/Services/Data/PageContainer/PageContainer.js b/console/src/components/Services/Data/PageContainer/PageContainer.js
index 9cd44717926..101acb69f2c 100644
--- a/console/src/components/Services/Data/PageContainer/PageContainer.js
+++ b/console/src/components/Services/Data/PageContainer/PageContainer.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import globals from '../../../../Globals';
+import Button from '../../Layout/Button/Button';
 
 import { LISTING_SCHEMA } from '../DataActions';
 
@@ -145,12 +146,14 @@ const PageContainer = ({
                 className={styles.padd_remove_full}
                 to={'/data/schema/' + schemaName + '/table/add'}
               >
-                <button
-                  className={styles.add_mar_right + ' btn btn-xs btn-default'}
+                <Button
+                  className={styles.add_mar_right}
+                  size="xs"
+                  color="white"
                   data-test="sidebar-add-table"
                 >
                   Add Table
-                </button>
+                </Button>
               </Link>
             </div>
           ) : null}
diff --git a/console/src/components/Services/Data/RawSQL/RawSQL.js b/console/src/components/Services/Data/RawSQL/RawSQL.js
index 2ac1837d77d..f561d078461 100644
--- a/console/src/components/Services/Data/RawSQL/RawSQL.js
+++ b/console/src/components/Services/Data/RawSQL/RawSQL.js
@@ -4,7 +4,8 @@ import Helmet from 'react-helmet';
 import AceEditor from 'react-ace';
 import 'brace/mode/sql';
 import Modal from 'react-bootstrap/lib/Modal';
-import Button from 'react-bootstrap/lib/Button';
+import ModalButton from 'react-bootstrap/lib/Button';
+import Button from '../../Layout/Button/Button';
 
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import Tooltip from 'react-bootstrap/lib/Tooltip';
@@ -341,19 +342,20 @@ const RawSQL = ({
           ) : (
             <hr />
           )}
-          <button
+          <Button
             type="submit"
-            className={styles.yellow_button}
             onClick={submitSQL}
+            color="yellow"
+            size="sm"
             data-test="run-sql"
           >
             Run!
-          </button>
+          </Button>
         </div>
         <div className="hidden col-xs-4">{alert}</div>
       </div>
       <Modal show={isModalOpen} onHide={onModalClose.bind(this)}>
-        <Modal.Header closeButton>
+        <Modal.Header closeModalButton>
           <Modal.Title>Run SQL</Modal.Title>
         </Modal.Header>
         <Modal.Body>
@@ -367,14 +369,14 @@ const RawSQL = ({
           </div>
         </Modal.Body>
         <Modal.Footer>
-          <Button onClick={onModalClose}>Cancel</Button>
-          <Button
+          <ModalButton onClick={onModalClose}>Cancel</ModalButton>
+          <ModalButton
             onClick={onConfirmNoMigration}
             bsStyle="primary"
             data-test="not-migration-confirm"
           >
             Yes, i confirm
-          </Button>
+          </ModalButton>
         </Modal.Footer>
       </Modal>
       <div className={`${styles.padd_left_remove} container-fluid`}>
diff --git a/console/src/components/Services/Data/Schema/AutoAddRelations.js b/console/src/components/Services/Data/Schema/AutoAddRelations.js
index 6a399fb02d8..a21a6e1b613 100644
--- a/console/src/components/Services/Data/Schema/AutoAddRelations.js
+++ b/console/src/components/Services/Data/Schema/AutoAddRelations.js
@@ -9,6 +9,7 @@ import {
   autoAddRelName,
 } from '../TableRelationships/Actions';
 import { getRelationshipLine } from '../TableRelationships/Relationships';
+import Button from '../../Layout/Button/Button';
 
 class AutoAddRelations extends Component {
   trackAllRelations = untrackedData => {
@@ -37,15 +38,17 @@ class AutoAddRelations extends Component {
           className={styles.padd_top_medium}
           key={'untrackedIndiv' + obj.data.tableName}
         >
-          <button
-            className={`${styles.display_inline} btn btn-xs btn-default`}
+          <Button
+            className={`${styles.display_inline}`}
+            size="xs"
+            color="white"
             onClick={e => {
               e.preventDefault();
               handleAutoAddIndivRel(obj);
             }}
           >
             Add
-          </button>
+          </Button>
           <div className={styles.display_inline + ' ' + styles.add_pad_left}>
             <b>{obj.data.tableName}</b> -{' '}
             {getRelationshipLine(
@@ -75,17 +78,15 @@ class AutoAddRelations extends Component {
             There are {untrackedRelations.length} untracked relations
           </div>
         )}
-        <button
+        <Button
           onClick={this.trackAllRelations.bind(this, untrackedRelations)}
-          className={
-            styles.display_inline +
-            ' btn btn-xs btn-default ' +
-            styles.add_mar_left
-          }
+          className={`${styles.display_inline} ${styles.add_mar_left}`}
+          color="white"
+          size="xs"
           data-test="track-all-relationships"
         >
           Track All Relations
-        </button>
+        </Button>
         <div className={styles.padd_top_small}>{untrackData}</div>
       </div>
     );
diff --git a/console/src/components/Services/Data/Schema/Schema.js b/console/src/components/Services/Data/Schema/Schema.js
index b268a566ed8..f7d272c6c69 100644
--- a/console/src/components/Services/Data/Schema/Schema.js
+++ b/console/src/components/Services/Data/Schema/Schema.js
@@ -9,6 +9,7 @@ import { push } from 'react-router-redux';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 
 import { untrackedTip, untrackedRelTip } from './Tooltips';
+import Button from '../../Layout/Button/Button';
 import {
   setTableName,
   addExistingTableSql,
@@ -93,9 +94,11 @@ class Schema extends Component {
       untrackedHtml.push(
         <div className={styles.padd_bottom} key={`${i}untracked`}>
           <div className={`${styles.display_inline} ${styles.padd_right}`}>
-            <button
+            <Button
               data-test={`add-track-table-${untrackedTables[i].table_name}`}
-              className={`${styles.display_inline} btn btn-xs btn-default`}
+              className={`${styles.display_inline}`}
+              color="white"
+              size="xs"
               onClick={e => {
                 e.preventDefault();
                 dispatch(setTableName(untrackedTables[i].table_name));
@@ -103,7 +106,7 @@ class Schema extends Component {
               }}
             >
               Add
-            </button>
+            </Button>
           </div>
           <div className={`${styles.padd_right} ${styles.inline_block}`}>
             {untrackedTables[i].table_name}
@@ -131,9 +134,10 @@ class Schema extends Component {
               Schema{' '}
             </h2>
             {migrationMode ? (
-              <button
+              <Button
                 data-test="data-create-table"
-                className={styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch(
@@ -142,7 +146,7 @@ class Schema extends Component {
                 }}
               >
                 Create Table
-              </button>
+              </Button>
             ) : null}
           </div>
           <hr />
@@ -159,17 +163,17 @@ class Schema extends Component {
                 <i className="fa fa-info-circle" aria-hidden="true" />
               </OverlayTrigger>
               {untrackedTables.length > 0 ? (
-                <button
-                  className={`${styles.display_inline} ${
-                    styles.addAllBtn
-                  } btn btn-xs btn-default`}
+                <Button
+                  className={`${styles.display_inline} ${styles.addAllBtn}`}
+                  color="white"
+                  size="xs"
                   onClick={e => {
                     e.preventDefault();
                     dispatch(addAllUntrackedTablesSql(untrackedTables));
                   }}
                 >
                   Add all
-                </button>
+                </Button>
               ) : null}
             </div>
             <div className={`${styles.padd_left_remove} col-xs-12`}>
diff --git a/console/src/components/Services/Data/TableBrowseRows/EditItem.js b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
index 9e8f612cbe3..e56d85b4bc1 100644
--- a/console/src/components/Services/Data/TableBrowseRows/EditItem.js
+++ b/console/src/components/Services/Data/TableBrowseRows/EditItem.js
@@ -4,6 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { editItem, E_ONGOING_REQ } from './EditActions';
 import globals from '../../../../Globals';
 import { modalClose } from './EditActions';
+import Button from '../../Layout/Button/Button';
 
 // import RichTextEditor from 'react-rte';
 import { replace } from 'react-router-redux';
@@ -298,9 +299,10 @@ class EditItem extends Component {
           <div className="col-xs-9">
             <form className="form-horizontal">
               {elements}
-              <button
+              <Button
                 type="submit"
-                className={styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch({ type: E_ONGOING_REQ });
@@ -321,7 +323,7 @@ class EditItem extends Component {
                 data-test="save-button"
               >
                 {buttonText}
-              </button>
+              </Button>
             </form>
           </div>
           <div className="col-xs-3">{alert}</div>
diff --git a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js
index dadedc0f580..f04764031b1 100644
--- a/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js
+++ b/console/src/components/Services/Data/TableBrowseRows/FilterQuery.js
@@ -22,6 +22,7 @@ import {
   removeOrder,
 } from './FilterActions.js';
 import { setDefaultQuery, runQuery } from './FilterActions';
+import Button from '../../Layout/Button/Button';
 
 const renderCols = (colName, tableSchema, onChange, usage, key) => {
   const columns = tableSchema.columns.map(c => c.column_name);
@@ -198,13 +199,14 @@ class FilterQuery extends Component {
             </div>
           </div>
           <div className={`${styles.padd_right} ${styles.clear_fix}`}>
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
+              color="yellow"
+              size="sm"
               data-test="run-query"
             >
               Run query
-            </button>
+            </Button>
             {/* <div className={styles.count + ' alert alert-info'}><i>Total <b>{tableName}</b> rows in the database for current query: {count} </i></div> */}
           </div>
         </form>
diff --git a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js
index dcb6d7d9aa1..021dea6a321 100644
--- a/console/src/components/Services/Data/TableBrowseRows/ViewRows.js
+++ b/console/src/components/Services/Data/TableBrowseRows/ViewRows.js
@@ -25,6 +25,7 @@ import { I_SET_CLONE } from '../TableInsertItem/InsertActions';
 import _push from '../push';
 import { ordinalColSort, findTableFromRel } from '../utils';
 import Spinner from '../../../Common/Spinner/Spinner';
+import Button from '../../Layout/Button/Button';
 import './ReactTableFix.css';
 
 const ViewRows = ({
@@ -184,8 +185,10 @@ const ViewRows = ({
     }
     if (!isSingleRow && !isView && hasPrimaryKeys) {
       editButton = (
-        <button
-          className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
+        <Button
+          className={styles.add_mar_right_small}
+          color="white"
+          size="xs"
           onClick={() => {
             dispatch({ type: E_SET_EDITITEM, oldItem: row, pkClause });
             dispatch(
@@ -195,12 +198,14 @@ const ViewRows = ({
           data-test={`row-edit-button-${rowIndex}`}
         >
           Edit
-        </button>
+        </Button>
       );
 
       cloneButton = (
-        <button
-          className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
+        <Button
+          className={styles.add_mar_right_small}
+          size="xs"
+          color="white"
           onClick={() => {
             dispatch({ type: I_SET_CLONE, clone: row });
             dispatch(
@@ -210,19 +215,21 @@ const ViewRows = ({
           data-test={`row-clone-button-${rowIndex}`}
         >
           Clone
-        </button>
+        </Button>
       );
 
       deleteButton = (
-        <button
-          className={`${styles.add_mar_right_small} btn btn-xs btn-default`}
+        <Button
+          className={styles.add_mar_right_small}
+          size="xs"
+          color="white"
           onClick={() => {
             dispatch(deleteItem(pkClause));
           }}
           data-test={`row-delete-button-${rowIndex}`}
         >
           Delete
-        </button>
+        </Button>
       );
     }
     const buttonsDiv = (
diff --git a/console/src/components/Services/Data/TableCommon/TableHeader.js b/console/src/components/Services/Data/TableCommon/TableHeader.js
index c2e2075f5dd..0777c299b34 100644
--- a/console/src/components/Services/Data/TableCommon/TableHeader.js
+++ b/console/src/components/Services/Data/TableCommon/TableHeader.js
@@ -142,19 +142,6 @@ const TableHeader = ({
                 Permissions
               </Link>
             </li>
-            <li role="presentation" className={'hide'}>
-              <Link
-                to={
-                  '/data/schema/' +
-                  currentSchema +
-                  '/tables/' +
-                  tableName +
-                  '/permissions'
-                }
-              >
-                <button className="btn btn-xs btn-warning">Try out APIs</button>
-              </Link>
-            </li>
           </ul>
         </div>
         <div className="clearfix" />
diff --git a/console/src/components/Services/Data/TableInsertItem/InsertItem.js b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
index fdcc669ffd5..f2256cf7205 100644
--- a/console/src/components/Services/Data/TableInsertItem/InsertItem.js
+++ b/console/src/components/Services/Data/TableInsertItem/InsertItem.js
@@ -4,6 +4,7 @@ import TableHeader from '../TableCommon/TableHeader';
 import { insertItem, I_RESET } from './InsertActions';
 import { ordinalColSort } from '../utils';
 import { setTable } from '../DataActions';
+import Button from '../../Layout/Button/Button';
 
 class InsertItem extends Component {
   constructor() {
@@ -285,9 +286,10 @@ class InsertItem extends Component {
           <div className="col-xs-9">
             <form id="insertForm" className="form-horizontal">
               {elements}
-              <button
+              <Button
                 type="submit"
-                className={'btn ' + styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   const inputValues = {};
@@ -309,9 +311,10 @@ class InsertItem extends Component {
                 data-test="insert-save-button"
               >
                 {this.state.insertedRows > 0 ? 'Insert Again' : 'Save'}
-              </button>
-              <button
-                className={'btn ' + styles.default_button}
+              </Button>
+              <Button
+                color="white"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   const form = document.getElementById('insertForm');
@@ -334,7 +337,7 @@ class InsertItem extends Component {
                 data-test="clear-button"
               >
                 Clear
-              </button>
+              </Button>
             </form>
           </div>
           <div className="col-xs-3">{alert}</div>
diff --git a/console/src/components/Services/Data/TableModify/ModifyTable.js b/console/src/components/Services/Data/TableModify/ModifyTable.js
index db4c827c22e..4c5dfb576ea 100644
--- a/console/src/components/Services/Data/TableModify/ModifyTable.js
+++ b/console/src/components/Services/Data/TableModify/ModifyTable.js
@@ -47,6 +47,7 @@ import {
   TIMESTAMP,
   TIME,
 } from '../../../../constants';
+import Button from '../../Layout/Button/Button';
 
 const appPrefix = '/data';
 
@@ -132,23 +133,25 @@ const ColumnEditor = ({
                   <Link
                     to={`${appPrefix}/schema/${currentSchema}/tables/${tableName}/relationships`}
                   >
-                    <button
-                      className={`${styles.default_button} btn`}
+                    <Button
+                      color="white"
+                      size="sm"
                       type="button"
                       data-test="add-rel-mod"
                     >
                       +Add relationship
-                    </button>
+                    </Button>
                   </Link>
                   &nbsp;
-                  <button
-                    className="btn btn-danger btn-sm"
+                  <Button
+                    color="red"
+                    size="sm"
                     onClick={onDeleteFK}
                     data-test="remove-constraint-button"
                   >
                     {' '}
                     Remove Constraint{' '}
-                  </button>{' '}
+                  </Button>{' '}
                   &nbsp;
                 </h5>
               </div>
@@ -383,17 +386,20 @@ const ColumnEditor = ({
         </div>
         {checkExistingForeignKey()}
         <div className="row">
-          <button
+          <Button
             type="submit"
-            className={`${styles.yellow_button} btn`}
+            color="yellow"
+            className={styles.button_mar_right}
+            size="sm"
             data-test="save-button"
           >
             Save
-          </button>
+          </Button>
           {!isPrimaryKey ? (
-            <button
+            <Button
               type="submit"
-              className={`${styles.yellow_button1} btn btn-danger btn-sm`}
+              color="red"
+              size="sm"
               onClick={e => {
                 e.preventDefault();
                 onDelete();
@@ -401,7 +407,7 @@ const ColumnEditor = ({
               data-test="remove-button"
             >
               Remove
-            </button>
+            </Button>
           ) : null}
         </div>
       </form>
@@ -564,8 +570,10 @@ class ModifyTable extends Component {
           <div className="container-fluid">
             <div className="row">
               <h5 className={styles.padd_bottom}>
-                <button
-                  className={`${styles.add_mar_small} btn btn-xs btn-default`}
+                <Button
+                  className={styles.add_mar_small}
+                  size="xs"
+                  color="white"
                   data-test={`edit-${colName}`}
                   onClick={() => {
                     if (activeEdit.column === colName) {
@@ -585,7 +593,7 @@ class ModifyTable extends Component {
                   }}
                 >
                   {btnText}
-                </button>
+                </Button>
                 <b>{colName}</b> {keyProperties()}
                 &nbsp;
               </h5>
@@ -602,10 +610,13 @@ class ModifyTable extends Component {
     let colUniqueInput;
     let colDefaultInput;
 
+    // TODO
     const untrackBtn = (
-      <button
+      <Button
         type="submit"
-        className={`${styles.add_mar_right} btn btn-sm btn-default`}
+        className={styles.add_mar_right}
+        color="white"
+        size="sm"
         onClick={() => {
           const isOk = confirm('Are you sure to untrack?');
           if (isOk) {
@@ -615,7 +626,7 @@ class ModifyTable extends Component {
         data-test="untrack-table"
       >
         Untrack Table
-      </button>
+      </Button>
     );
 
     const editCommentClicked = () => {
@@ -811,20 +822,22 @@ class ModifyTable extends Component {
                   ref={n => (colDefaultInput = n)}
                   data-test="default-value"
                 />
-                <button
+                <Button
                   type="submit"
-                  className="btn btn-sm btn-warning"
+                  color="yellow"
+                  size="sm"
                   data-test="add-column-button"
                 >
                   + Add column
-                </button>
+                </Button>
               </form>
             </div>
             <hr />
             {untrackBtn}
-            <button
+            <Button
               type="submit"
-              className="btn btn-sm btn-danger"
+              color="red"
+              size="sm"
               onClick={() => {
                 const isOk = confirm('Are you sure?');
                 if (isOk) {
@@ -834,7 +847,7 @@ class ModifyTable extends Component {
               data-test="delete-table"
             >
               Delete table
-            </button>
+            </Button>
             <br />
             <br />
           </div>
diff --git a/console/src/components/Services/Data/TableModify/ModifyView.js b/console/src/components/Services/Data/TableModify/ModifyView.js
index dbf5ae8a360..7b6041d9580 100644
--- a/console/src/components/Services/Data/TableModify/ModifyView.js
+++ b/console/src/components/Services/Data/TableModify/ModifyView.js
@@ -15,6 +15,7 @@ import {
 } from './ModifyActions';
 import { ordinalColSort } from '../utils';
 import { setTable, fetchTableComment } from '../DataActions';
+import Button from '../../Layout/Button/Button';
 
 class ModifyView extends Component {
   componentDidMount() {
@@ -83,9 +84,9 @@ class ModifyView extends Component {
           <div className="container-fluid">
             <div className="row">
               <h5 className={styles.padd_bottom}>
-                <button disabled="disabled" className="btn btn-xs btn-warning">
+                <Button disabled="disabled" size="xs" color="yellow">
                   {btnText}
-                </button>{' '}
+                </Button>{' '}
                 &nbsp; {c.column_name}
               </h5>
             </div>
@@ -95,9 +96,11 @@ class ModifyView extends Component {
     });
 
     const untrackBtn = (
-      <button
+      <Button
         type="submit"
-        className={styles.add_mar_right + ' btn btn-sm btn-default'}
+        className={styles.add_mar_right}
+        color="white"
+        size="sm"
         onClick={() => {
           const isOk = confirm('Are you sure to untrack?');
           if (isOk) {
@@ -107,7 +110,7 @@ class ModifyView extends Component {
         data-test="untrack-view"
       >
         Untrack View
-      </button>
+      </Button>
     );
 
     const editCommentClicked = () => {
@@ -210,25 +213,23 @@ class ModifyView extends Component {
               readOnly
             />
             <hr />
-            <button
+            <Button
               type="submit"
-              className={
-                'btn btn-sm ' +
-                styles.yellow_button +
-                ' ' +
-                styles.add_mar_right
-              }
+              color="yellow"
+              size="sm"
+              className={styles.add_mar_right}
               onClick={() => {
                 this.modifyViewDefinition(tableName);
               }}
               data-test="modify-view"
             >
               Modify
-            </button>
+            </Button>
             {untrackBtn}
-            <button
+            <Button
               type="submit"
-              className={'btn btn-sm btn-danger'}
+              color="red"
+              size="sm"
               onClick={() => {
                 const isOk = confirm('Are you sure');
                 if (isOk) {
@@ -238,7 +239,7 @@ class ModifyView extends Component {
               data-test="delete-view"
             >
               Delete view
-            </button>
+            </Button>
             <br />
             <br />
           </div>
diff --git a/console/src/components/Services/Data/TablePermissions/Permissions.js b/console/src/components/Services/Data/TablePermissions/Permissions.js
index 92b72fc5924..83f050f07b8 100644
--- a/console/src/components/Services/Data/TablePermissions/Permissions.js
+++ b/console/src/components/Services/Data/TablePermissions/Permissions.js
@@ -44,6 +44,7 @@ import { setTable, fetchViewInfoFromInformationSchema } from '../DataActions';
 import { getIngForm, escapeRegExp } from '../utils';
 import { legacyOperatorsMap } from './PermissionBuilder/utils';
 import semverCheck from '../../../../helpers/semver';
+import Button from '../../Layout/Button/Button';
 
 /* */
 import EnhancedInput from '../../../Common/InputChecker/InputChecker';
@@ -1358,15 +1359,17 @@ class Permissions extends Component {
       );
     };
 
-    const getButton = (value, customClasses, onClickFn, disabled) => (
-      <button
-        className={`${styles.editActionButton} button btn ${customClasses}`}
+    const getButton = (value, color, onClickFn, disabled) => (
+      <Button
+        className={styles.editActionButton}
+        color={color}
+        size="sm"
         onClick={onClickFn}
         disabled={disabled}
         data-test={`${value.split(' ').join('-')}-button`}
       >
         {value}
-      </button>
+      </Button>
     );
 
     const getButtonsSection = (tableSchema, permsState) => {
@@ -1400,19 +1403,19 @@ class Permissions extends Component {
 
       const saveButton = getButton(
         'Save permissions',
-        'btn-success',
+        'yellow',
         dispatchSavePermissions,
         disableSave
       );
 
       const removeAccessButton = getButton(
         'Remove',
-        'btn-danger',
+        'red',
         dispatchRemoveAccess,
         disableRemoveAccess
       );
 
-      const closeButton = getButton('Close', 'btn-default', dispatchCloseEdit);
+      const closeButton = getButton('Close', 'white', dispatchCloseEdit);
       const currentPermissions = tableSchema.permissions;
       const applySameSelected = e => {
         const isChecked = e.target.checked;
@@ -1463,19 +1466,23 @@ class Permissions extends Component {
             <div>Apply same {permsState.query} permissions to other roles</div>
             <div className={styles.add_mar_top_small}>{roleListHtml}</div>
             {permsState.applySamePermissions.length ? (
-              <button
+              <Button
                 onClick={applySameBulk}
-                className={'btn btn-default ' + styles.bulkApplyBtn}
+                className={styles.bulkApplyBtn}
+                color="white"
+                size="sm"
               >
                 Apply
-              </button>
+              </Button>
             ) : (
-              <button
-                className={'btn btn-default ' + styles.bulkApplyBtn}
+              <Button
+                color="white"
+                className={styles.bulkApplyBtn}
+                size="sm"
                 disabled
               >
                 Apply
-              </button>
+              </Button>
             )}
           </div>
         );
@@ -1552,12 +1559,9 @@ class Permissions extends Component {
             })}
           </div>
           <div className={styles.padd_bottom}>
-            <button
-              onClick={bulkDeleteClicked}
-              className={'btn btn-sm btn-default'}
-            >
+            <Button onClick={bulkDeleteClicked} color="red" size="sm">
               Delete
-            </button>
+            </Button>
           </div>
         </div>
       );
diff --git a/console/src/components/Services/Data/TableRelationships/AddManualRelationship.js b/console/src/components/Services/Data/TableRelationships/AddManualRelationship.js
index 0f5a53a37ed..84879219b6c 100644
--- a/console/src/components/Services/Data/TableRelationships/AddManualRelationship.js
+++ b/console/src/components/Services/Data/TableRelationships/AddManualRelationship.js
@@ -16,6 +16,7 @@ import {
   UPDATE_REMOTE_SCHEMA_MANUAL_REL,
   RESET_MANUAL_REL_TABLE_LIST,
 } from '../DataActions';
+import Button from '../../Layout/Button/Button';
 
 class AddManualRelationship extends Component {
   constructor() {
@@ -198,21 +199,24 @@ class AddManualRelationship extends Component {
             </select>
           </div>
         </div>
-        <button
-          className={styles.yellow_button}
+        <Button
+          color="yellow"
+          size="sm"
           onClick={this.onAddRelClicked}
           data-test={this.props.dataTestVal}
         >
           Add
-        </button>
+        </Button>
         {this.props.showClose ? (
-          <button
-            className={styles.add_mar_left + ' btn btn-default btn-sm'}
+          <Button
+            className={styles.add_mar_left}
+            color="white"
+            size="sm"
             onClick={this.onCloseClicked}
             data-test="table-close-manual-relationship"
           >
             Close
-          </button>
+          </Button>
         ) : null}
       </div>
     );
diff --git a/console/src/components/Services/Data/TableRelationships/Relationships.js b/console/src/components/Services/Data/TableRelationships/Relationships.js
index cc6c483589a..2445644529d 100644
--- a/console/src/components/Services/Data/TableRelationships/Relationships.js
+++ b/console/src/components/Services/Data/TableRelationships/Relationships.js
@@ -18,6 +18,7 @@ import gqlPattern, { gqlRelErrorNotif } from '../Common/GraphQLValidation';
 
 import AddManualRelationship from './AddManualRelationship';
 import suggestedRelationshipsRaw from './autoRelations';
+import Button from '../../Layout/Button/Button';
 
 /* Gets the complete list of relationships and converts it to a list of object, which looks like so :
 {
@@ -81,13 +82,14 @@ const relationshipView = (
   return (
     <td>
       <div>
-        <button
-          className="btn btn-sm btn-danger"
+        <Button
+          color="red"
+          size="sm"
           onClick={onDelete}
           data-test={`remove-button-${relName}`}
         >
           Remove
-        </button>
+        </Button>
         &nbsp;
         <b>{relName}</b>
         <div className={tableStyles.relationshipTopPadding}>
@@ -140,13 +142,13 @@ const addRelationshipCellView = (
     }
     dispatch(addRelNewFromStateMigrate());
   };
-  const styles = require('../TableModify/Modify.scss');
   return (
     <td>
       <div>
         {selectedRelationship === rel ? null : (
-          <button
-            className={`${styles.exploreButton} btn btn-xs`}
+          <Button
+            size="xs"
+            color="yellow"
             onClick={onAdd}
             data-test={
               relMetaData[0] === 'object'
@@ -155,7 +157,7 @@ const addRelationshipCellView = (
             }
           >
             Add
-          </button>
+          </Button>
         )}
         {getRelationshipLine(rel.isObjRel, rel.lcol, rel.rcol, rel.rTable)}{' '}
         &nbsp;
@@ -172,9 +174,10 @@ const addRelationshipCellView = (
               data-test="suggested-rel-name"
             />{' '}
             &nbsp;
-            <button
+            <Button
               type="submit"
-              className={`${styles.exploreButton} btn btn-sm`}
+              color="yellow"
+              size="sm"
               data-test={
                 relMetaData[0] === 'object'
                   ? `obj-rel-save-${relMetaData[1]}`
@@ -182,7 +185,7 @@ const addRelationshipCellView = (
               }
             >
               Save
-            </button>
+            </Button>
           </div>
         </form>
       ) : null}
@@ -343,8 +346,10 @@ const AddRelationship = ({
           </tbody>
         </table>
       </div>
-      <button
-        className="btn btn-sm btn-default hide"
+      <Button
+        className="hide"
+        color="white"
+        size="sm"
         onClick={e => {
           e.preventDefault();
           dispatch(resetRelationshipForm());
@@ -352,7 +357,7 @@ const AddRelationship = ({
       >
         {' '}
         Cancel{' '}
-      </button>
+      </Button>
     </div>
   );
 };
@@ -488,15 +493,16 @@ class Relationships extends Component {
                 />
               </div>
             ) : (
-              <button
+              <Button
                 type="submit"
-                className="btn btn-sm btn-default"
+                color="white"
+                size="sm"
                 onClick={() => {
                   dispatch(addNewRelClicked());
                 }}
               >
                 + Add relationship
-              </button>
+              </Button>
             )}
             <hr />
           </div>
@@ -523,16 +529,17 @@ class Relationships extends Component {
                 />
               </div>
             ) : (
-              <button
+              <Button
                 type="submit"
-                className="btn btn-sm btn-default"
+                color="white"
+                size="sm"
                 onClick={() => {
                   dispatch(relManualAddClicked());
                 }}
                 data-test="add-manual-relationship"
               >
                 + Add a relationship manually
-              </button>
+              </Button>
             )}
             <hr />
           </div>
diff --git a/console/src/components/Services/Data/TableRelationships/RelationshipsView.js b/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
index 08eee55238e..fdbb6527610 100644
--- a/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
+++ b/console/src/components/Services/Data/TableRelationships/RelationshipsView.js
@@ -7,6 +7,7 @@ import { findAllFromRel } from '../utils';
 import { setTable, UPDATE_REMOTE_SCHEMA_MANUAL_REL } from '../DataActions';
 
 import AddRelationship from './AddManualRelationship';
+import Button from '../../Layout/Button/Button';
 
 /* Gets the complete list of relationships and converts it to a list of object, which looks like so :
 {
@@ -70,9 +71,9 @@ const relationshipView = (
   return (
     <td>
       <div>
-        <button className="btn btn-sm btn-danger" onClick={onDelete}>
+        <Button size="sm" color="red" onClick={onDelete}>
           Remove
-        </button>
+        </Button>
         &nbsp;
         <b>{relName}</b>
         <div className={tableStyles.relationshipTopPadding}>
@@ -230,15 +231,16 @@ class RelationshipsView extends Component {
                 />
               </div>
             ) : (
-              <button
+              <Button
                 type="submit"
-                className="btn btn-sm btn-default"
+                color="white"
+                size="sm"
                 onClick={() => {
                   dispatch(addNewRelClicked());
                 }}
               >
                 + Add relationship
-              </button>
+              </Button>
             )}
             <hr />
           </div>
diff --git a/console/src/components/Services/EventTrigger/Add/AddTrigger.js b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
index 25536cb6b28..86d493638bb 100644
--- a/console/src/components/Services/EventTrigger/Add/AddTrigger.js
+++ b/console/src/components/Services/EventTrigger/Add/AddTrigger.js
@@ -3,6 +3,7 @@ import React, { Component } from 'react';
 import Helmet from 'react-helmet';
 import * as tooltip from './Tooltips';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Button from '../../Layout/Button/Button';
 
 import {
   removeHeader,
@@ -265,10 +266,7 @@ class AddTrigger extends Component {
             />
           );
           return (
-            <div
-              key={i}
-              className={styles.noPadd + ' col-md-4'}
-            >
+            <div key={i} className={styles.noPadd + ' col-md-4'}>
               <div className={'checkbox '}>
                 <label>
                   {inputHtml}
@@ -295,7 +293,10 @@ class AddTrigger extends Component {
           </OverlayTrigger>{' '}
         </h4>
         {selectedOperations.update ? (
-          <div className={styles.clearBoth + ' ' + styles.listenColumnWrapper}> {getColumnList('update')} </div>
+          <div className={styles.clearBoth + ' ' + styles.listenColumnWrapper}>
+            {' '}
+            {getColumnList('update')}{' '}
+          </div>
         ) : (
           <div>
             <div
@@ -651,19 +652,18 @@ class AddTrigger extends Component {
                 )}
               </div>
               <hr />
-              <button
+              <div
                 onClick={this.toggleAdvanced.bind(this)}
+                className={styles.toggleAdvanced}
                 data-test="advanced-settings"
-                type="button"
-                className={'btn btn-default ' + styles.advancedToggleBtn}
               >
-                Advanced Settings
                 {this.state.advancedExpanded ? (
-                  <i className={'fa fa-arrow-up'} />
+                  <i className={'fa fa-chevron-down'} />
                 ) : (
-                  <i className={'fa fa-arrow-down'} />
-                )}
-              </button>
+                  <i className={'fa fa-chevron-right'} />
+                )}{' '}
+                <b>Advanced Settings</b>
+              </div>
               {this.state.advancedExpanded ? (
                 <div
                   className={
@@ -671,12 +671,20 @@ class AddTrigger extends Component {
                     ' ' +
                     styles.add_mar_bottom +
                     ' ' +
-                    styles.add_mar_top + ' ' + styles.wd100
+                    styles.add_mar_top +
+                    ' ' +
+                    styles.wd100
                   }
                 >
                   {tableName ? advancedColumnSection : null}
                   <div
-                    className={styles.add_mar_bottom + ' ' + styles.add_mar_top + ' ' + styles.wd100}
+                    className={
+                      styles.add_mar_bottom +
+                      ' ' +
+                      styles.add_mar_top +
+                      ' ' +
+                      styles.wd100
+                    }
                   >
                     <h4 className={styles.subheading_text}>Retry Logic</h4>
                     <div
@@ -725,7 +733,13 @@ class AddTrigger extends Component {
                     </div>
                   </div>
                   <div
-                    className={styles.add_mar_bottom + ' ' + styles.add_mar_top + ' ' + styles.wd100}
+                    className={
+                      styles.add_mar_bottom +
+                      ' ' +
+                      styles.add_mar_top +
+                      ' ' +
+                      styles.wd100
+                    }
                   >
                     <h4 className={styles.subheading_text}>Headers</h4>
                     {heads}
@@ -733,13 +747,14 @@ class AddTrigger extends Component {
                 </div>
               ) : null}
               <hr />
-              <button
+              <Button
                 type="submit"
-                className={`btn ${styles.yellow_button}`}
+                color="yellow"
+                size="sm"
                 data-test="trigger-create"
               >
                 {createBtnText}
-              </button>
+              </Button>
             </div>
           </form>
         </div>
diff --git a/console/src/components/Services/EventTrigger/Modify/ActionButtons.js b/console/src/components/Services/EventTrigger/Modify/ActionButtons.js
index 2e1f6ed0aba..ec49e0d8128 100644
--- a/console/src/components/Services/EventTrigger/Modify/ActionButtons.js
+++ b/console/src/components/Services/EventTrigger/Modify/ActionButtons.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import { deleteTrigger } from '../EventActions';
+import Button from '../../Layout/Button/Button';
 
 const verifyDeleteTrigger = (triggerName, dispatch) => {
   if (confirm('Are you sure?')) {
@@ -9,14 +10,15 @@ const verifyDeleteTrigger = (triggerName, dispatch) => {
 
 const Buttons = ({ styles, dispatch, triggerName, ongoingRequest }) => (
   <div className={styles.add_mar_bottom}>
-    <button
-      className={'btn btn-sm btn-danger'}
+    <Button
+      color="red"
+      size="sm"
       data-test="delete-trigger"
       onClick={() => verifyDeleteTrigger(triggerName, dispatch)}
       disabled={ongoingRequest === 'delete'}
     >
       {ongoingRequest === 'delete' ? 'Deleting ...' : 'Delete'}
-    </button>
+    </Button>
   </div>
 );
 
diff --git a/console/src/components/Services/EventTrigger/Modify/Editor.js b/console/src/components/Services/EventTrigger/Modify/Editor.js
index a05a121ec47..2d1eeb19e08 100644
--- a/console/src/components/Services/EventTrigger/Modify/Editor.js
+++ b/console/src/components/Services/EventTrigger/Modify/Editor.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import Button from '../../Layout/Button/Button';
 
 class Editor extends React.Component {
   state = {
@@ -16,37 +17,35 @@ class Editor extends React.Component {
   };
 
   toggleButton = () => (
-    <button
+    <Button
       className={`${this.props.styles.add_mar_small}
-        btn btn-sm btn-default
         ${this.props.styles.modifyEditButton}`}
+      color="white"
+      size="sm"
       data-test={`${this.state.isEditing ? 'close' : 'edit'}-${
         this.props.name
       }`}
       onClick={this.toggleEditor}
     >
       {this.state.isEditing ? 'Close' : 'Edit'}
-    </button>
+    </Button>
   );
 
   saveButton = saveFunc => {
     const { name, property, ongoingRequest, styles } = this.props;
     const isSaving = ongoingRequest === property;
     return (
-      <button
+      <Button
         type="submit"
-        className={`
-          btn
-          ${styles.yellow_button}
-          ${
-            isSaving ? styles.modifySaveButtonDisabled : styles.modifySaveButton
-          }`}
+        className={styles.modifySaveButton}
+        color="yellow"
+        size="sm"
         onClick={saveFunc}
         data-test={`modify-trigger-${name}-save`}
         disabled={isSaving}
       >
         {isSaving ? 'Saving ...' : 'Save'}
-      </button>
+      </Button>
     );
   };
 
diff --git a/console/src/components/Services/EventTrigger/Modify/Modify.scss b/console/src/components/Services/EventTrigger/Modify/Modify.scss
index 8b9b7bd05a0..48ec85b524a 100644
--- a/console/src/components/Services/EventTrigger/Modify/Modify.scss
+++ b/console/src/components/Services/EventTrigger/Modify/Modify.scss
@@ -53,8 +53,6 @@
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
-  background-color: #e6cd8f;
-  border-color: #e6cd8f;
 }
 
 .modifyWebhookCollapsed {
diff --git a/console/src/components/Services/EventTrigger/Notification.js b/console/src/components/Services/EventTrigger/Notification.js
index 69e265fff5b..fc5c86ae592 100644
--- a/console/src/components/Services/EventTrigger/Notification.js
+++ b/console/src/components/Services/EventTrigger/Notification.js
@@ -2,6 +2,7 @@ import React from 'react';
 import AceEditor from 'react-ace';
 import { showNotification, showTempNotification } from '../../App/Actions';
 import { notifExpand, notifMsg } from '../../App/Actions';
+import Button from '../Layout/Button/Button';
 
 const styles = require('./TableCommon/Table.scss');
 
@@ -47,15 +48,17 @@ const showErrorNotification = (title, message, reqBody, error) => {
   let finalJson = error ? error.message : '{}';
   if (error && 'action' in error) {
     refreshBtn = (
-      <button
-        className={styles.yellow_button + ' ' + styles.add_mar_top_small}
+      <Button
+        className={styles.add_mar_top_small}
+        color="yellow"
+        size="sm"
         onClick={e => {
           e.preventDefault();
           window.location.reload();
         }}
       >
         Refresh Console
-      </button>
+      </Button>
     );
     finalJson = error.action;
   } else if (error && 'internal' in error) {
diff --git a/console/src/components/Services/EventTrigger/PageContainer/PageContainer.js b/console/src/components/Services/EventTrigger/PageContainer/PageContainer.js
index 42beeabea93..cc504f82fc3 100644
--- a/console/src/components/Services/EventTrigger/PageContainer/PageContainer.js
+++ b/console/src/components/Services/EventTrigger/PageContainer/PageContainer.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { Link } from 'react-router';
 import globals from '../../../../Globals';
+import Button from '../../Layout/Button/Button';
 
 import { LISTING_TRIGGER } from '../EventActions';
 
@@ -114,12 +115,14 @@ const PageContainer = ({
                 className={styles.padd_remove_full}
                 to={'/events/manage/triggers/add'}
               >
-                <button
-                  className={styles.add_mar_right + ' btn btn-xs btn-default'}
+                <Button
+                  className={styles.add_mar_right}
+                  color="white"
+                  size="xs"
                   data-test="sidebar-add-table"
                 >
                   Add Trigger
-                </button>
+                </Button>
               </Link>
             </div>
           ) : null}
diff --git a/console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.js b/console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.js
index b95a78c56df..326ea31d8e6 100644
--- a/console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.js
+++ b/console/src/components/Services/EventTrigger/PendingEvents/FilterQuery.js
@@ -21,6 +21,7 @@ import {
   addOrder,
   removeOrder,
 } from './FilterActions.js';
+import Button from '../../Layout/Button/Button';
 import { setDefaultQuery, runQuery } from './FilterActions';
 import { vMakeRequest } from './ViewActions';
 
@@ -223,16 +224,19 @@ class FilterQuery extends Component {
             </div>
           </div>
           <div className={`${styles.padd_right} ${styles.clear_fix}`}>
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
+              color="yellow"
+              size="sm"
               data-test="run-query"
             >
               Run query
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={this.watchChanges.bind(this)}
-              className={styles.add_mar_left + ' btn btn-default'}
+              className={styles.add_mar_left}
+              color="white"
+              size="sm"
               data-test="run-query"
             >
               {this.state.isWatching ? (
@@ -242,7 +246,7 @@ class FilterQuery extends Component {
               ) : (
                 'Watch'
               )}
-            </button>
+            </Button>
           </div>
         </form>
       </div>
diff --git a/console/src/components/Services/EventTrigger/ProcessedEvents/FilterQuery.js b/console/src/components/Services/EventTrigger/ProcessedEvents/FilterQuery.js
index b95a78c56df..326ea31d8e6 100644
--- a/console/src/components/Services/EventTrigger/ProcessedEvents/FilterQuery.js
+++ b/console/src/components/Services/EventTrigger/ProcessedEvents/FilterQuery.js
@@ -21,6 +21,7 @@ import {
   addOrder,
   removeOrder,
 } from './FilterActions.js';
+import Button from '../../Layout/Button/Button';
 import { setDefaultQuery, runQuery } from './FilterActions';
 import { vMakeRequest } from './ViewActions';
 
@@ -223,16 +224,19 @@ class FilterQuery extends Component {
             </div>
           </div>
           <div className={`${styles.padd_right} ${styles.clear_fix}`}>
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
+              color="yellow"
+              size="sm"
               data-test="run-query"
             >
               Run query
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={this.watchChanges.bind(this)}
-              className={styles.add_mar_left + ' btn btn-default'}
+              className={styles.add_mar_left}
+              color="white"
+              size="sm"
               data-test="run-query"
             >
               {this.state.isWatching ? (
@@ -242,7 +246,7 @@ class FilterQuery extends Component {
               ) : (
                 'Watch'
               )}
-            </button>
+            </Button>
           </div>
         </form>
       </div>
diff --git a/console/src/components/Services/EventTrigger/RunningEvents/FilterQuery.js b/console/src/components/Services/EventTrigger/RunningEvents/FilterQuery.js
index b95a78c56df..7eef5e28b13 100644
--- a/console/src/components/Services/EventTrigger/RunningEvents/FilterQuery.js
+++ b/console/src/components/Services/EventTrigger/RunningEvents/FilterQuery.js
@@ -23,6 +23,7 @@ import {
 } from './FilterActions.js';
 import { setDefaultQuery, runQuery } from './FilterActions';
 import { vMakeRequest } from './ViewActions';
+import Button from '../../Layout/Button/Button';
 
 const renderCols = (colName, triggerSchema, onChange, usage, key) => {
   const columns = ['id', 'delivered', 'created_at'];
@@ -223,16 +224,19 @@ class FilterQuery extends Component {
             </div>
           </div>
           <div className={`${styles.padd_right} ${styles.clear_fix}`}>
-            <button
+            <Button
               type="submit"
-              className={`btn ${styles.yellow_button}`}
               data-test="run-query"
+              color="yellow"
+              size="sm"
             >
               Run query
-            </button>
-            <button
+            </Button>
+            <Button
               onClick={this.watchChanges.bind(this)}
-              className={styles.add_mar_left + ' btn btn-default'}
+              className={styles.add_mar_left}
+              color="white"
+              size="sm"
               data-test="run-query"
             >
               {this.state.isWatching ? (
@@ -242,7 +246,7 @@ class FilterQuery extends Component {
               ) : (
                 'Watch'
               )}
-            </button>
+            </Button>
           </div>
         </form>
       </div>
diff --git a/console/src/components/Services/EventTrigger/Schema/AutoAddRelations.js b/console/src/components/Services/EventTrigger/Schema/AutoAddRelations.js
deleted file mode 100644
index 831a1cdd810..00000000000
--- a/console/src/components/Services/EventTrigger/Schema/AutoAddRelations.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/* eslint-disable space-infix-ops */
-/* eslint-disable no-loop-func  */
-
-import PropTypes from 'prop-types';
-
-import React, { Component } from 'react';
-import {
-  autoTrackRelations,
-  autoAddRelName,
-} from '../TableRelationships/Actions';
-import { getRelationshipLine } from '../TableRelationships/Relationships';
-import suggestedRelationshipsRaw from '../TableRelationships/autoRelations';
-
-class AutoAddRelations extends Component {
-  trackAllRelations = () => {
-    this.props.dispatch(autoTrackRelations());
-  };
-  render() {
-    const { schema, untrackedRelations, dispatch } = this.props;
-    const styles = require('../PageContainer/PageContainer.scss');
-    const handleAutoAddIndivRel = obj => {
-      dispatch(autoAddRelName(obj));
-    };
-
-    if (untrackedRelations.length === 0) {
-      return (
-        <div
-          className={styles.display_inline + ' ' + styles.padd_bottom}
-          key="no-untracked-rel"
-        >
-          There are no untracked relations
-        </div>
-      );
-    }
-    const untrackedIndivHtml = [];
-    schema.map(table => {
-      const currentTable = table.table_name;
-      const currentTableRel = suggestedRelationshipsRaw(currentTable, schema);
-      currentTableRel.objectRel.map(obj => {
-        untrackedIndivHtml.push(
-          <div
-            className={styles.padd_top_medium}
-            key={'untrackedIndiv' + table.table_name}
-          >
-            <button
-              className={`${styles.display_inline} btn btn-xs btn-default`}
-              onClick={e => {
-                e.preventDefault();
-                handleAutoAddIndivRel(obj);
-              }}
-            >
-              Add
-            </button>
-            <div className={styles.display_inline + ' ' + styles.add_pad_left}>
-              <b>{obj.tableName}</b> -{' '}
-              {getRelationshipLine(
-                obj.isObjRel,
-                obj.lcol,
-                obj.rcol,
-                obj.rTable
-              )}
-            </div>
-          </div>
-        );
-      });
-      currentTableRel.arrayRel.map(obj => {
-        untrackedIndivHtml.push(
-          <div
-            className={styles.padd_top_medium}
-            key={'untrackedIndiv' + table.table_name}
-          >
-            <button
-              className={`${styles.display_inline} btn btn-xs btn-default`}
-              onClick={e => {
-                e.preventDefault();
-                handleAutoAddIndivRel(obj);
-              }}
-            >
-              Add
-            </button>
-            <div className={styles.display_inline + ' ' + styles.add_pad_left}>
-              <b>{obj.tableName}</b> -{' '}
-              {getRelationshipLine(
-                obj.isObjRel,
-                obj.lcol,
-                obj.rcol,
-                obj.rTable
-              )}
-            </div>
-          </div>
-        );
-      });
-    });
-    return (
-      <div>
-        {untrackedRelations.length === 0 ? (
-          <div
-            className={styles.display_inline + ' ' + styles.padd_bottom}
-            key="no-untracked-rel"
-          >
-            There are no untracked relations
-          </div>
-        ) : (
-          <div
-            className={styles.display_inline + ' ' + styles.padd_bottom}
-            key="untracked-rel"
-          >
-            There are {untrackedRelations.length} untracked relations
-          </div>
-        )}
-        <button
-          onClick={this.trackAllRelations}
-          className={
-            styles.display_inline +
-            ' btn btn-xs btn-default ' +
-            styles.add_mar_left
-          }
-          data-test="track-all-relationships"
-        >
-          Track All Relations
-        </button>
-        <div className={styles.padd_top_small}>{untrackedIndivHtml}</div>
-      </div>
-    );
-  }
-}
-
-AutoAddRelations.propTypes = {
-  untrackedRelations: PropTypes.array.isRequired,
-  schema: PropTypes.array.isRequired,
-  dispatch: PropTypes.func.isRequired,
-};
-
-export default AutoAddRelations;
diff --git a/console/src/components/Services/EventTrigger/Schema/Schema.js b/console/src/components/Services/EventTrigger/Schema/Schema.js
index c70067f42b6..3d25a069b0d 100644
--- a/console/src/components/Services/EventTrigger/Schema/Schema.js
+++ b/console/src/components/Services/EventTrigger/Schema/Schema.js
@@ -8,6 +8,7 @@ import Helmet from 'react-helmet';
 import { push } from 'react-router-redux';
 import { loadTriggers } from '../EventActions';
 import globals from '../../../../Globals';
+import Button from '../../Layout/Button/Button';
 
 const appPrefix = globals.urlPrefix + '/events';
 
@@ -38,16 +39,17 @@ class Schema extends Component {
               Event Triggers{' '}
             </h2>
             {migrationMode ? (
-              <button
+              <Button
                 data-test="data-create-trigger"
-                className={styles.yellow_button}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch(push(`${appPrefix}/manage/triggers/add`));
                 }}
               >
                 Create Trigger
-              </button>
+              </Button>
             ) : null}
           </div>
           <hr />
diff --git a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
index 0e29aef1d70..c39958b59c5 100644
--- a/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
+++ b/console/src/components/Services/EventTrigger/StreamingLogs/Logs.js
@@ -28,6 +28,7 @@ import {
 import * as tooltip from '../Common/Tooltips';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import { convertDateTimeToLocale } from '../utils';
+import Button from '../../Layout/Button/Button';
 
 class StreamingLogs extends Component {
   constructor(props) {
@@ -287,9 +288,11 @@ class StreamingLogs extends Component {
         />
         <br />
         <div className={'hide'}>
-          <button
+          <Button
             onClick={this.watchChanges.bind(this)}
-            className={styles.watchBtn + ' btn btn-default'}
+            className={styles.watchBtn}
+            color="white"
+            size="sm"
             data-test="run-query"
           >
             {this.state.isWatching ? (
@@ -302,7 +305,7 @@ class StreamingLogs extends Component {
                 Stream Logs <i className={'fa fa-play'} />
               </span>
             )}
-          </button>
+          </Button>
         </div>
         {invocationRowsData.length ? (
           <div className={styles.streamingLogs + ' streamingLogs'}>
@@ -315,9 +318,11 @@ class StreamingLogs extends Component {
                   onChange={this.filterAll.bind(this)}
                 />
               </div>
-              <button
+              <Button
                 onClick={this.handleNewerEvents.bind(this)}
-                className={styles.newBtn + ' btn btn-default'}
+                className={styles.newBtn}
+                color="white"
+                size="sm"
               >
                 {log.isLoadingNewer ? (
                   <span>
@@ -326,7 +331,7 @@ class StreamingLogs extends Component {
                 ) : (
                   <span>Load newer logs</span>
                 )}
-              </button>
+              </Button>
               {!log.isNewAvailable ? (
                 <span> No new logs available at this time </span>
               ) : null}
@@ -432,34 +437,34 @@ class StreamingLogs extends Component {
                           >
                             {finalResponse.status_code
                               ? [
-                                  'Status Code: ',
-                                  finalResponse.status_code === 200 ? (
-                                    <i
-                                      className={
-                                        styles.invocationSuccess +
+                                'Status Code: ',
+                                finalResponse.status_code === 200 ? (
+                                  <i
+                                    className={
+                                      styles.invocationSuccess +
                                         ' fa fa-check'
-                                      }
-                                    />
-                                  ) : (
-                                    <i
-                                      className={
-                                        styles.invocationFailure +
+                                    }
+                                  />
+                                ) : (
+                                  <i
+                                    className={
+                                      styles.invocationFailure +
                                         ' fa fa-times'
-                                      }
-                                    />
-                                  ),
-                                  finalResponse.status_code,
-                                  ' ',
-                                  <OverlayTrigger
-                                    placement="top"
-                                    overlay={tooltip.statusCodeDescription}
-                                  >
-                                    <i
-                                      className="fa fa-question-circle"
-                                      aria-hidden="true"
-                                    />
-                                  </OverlayTrigger>,
-                                ]
+                                    }
+                                  />
+                                ),
+                                finalResponse.status_code,
+                                ' ',
+                                <OverlayTrigger
+                                  placement="top"
+                                  overlay={tooltip.statusCodeDescription}
+                                >
+                                  <i
+                                    className="fa fa-question-circle"
+                                    aria-hidden="true"
+                                  />
+                                </OverlayTrigger>,
+                              ]
                               : null}
                           </div>
                           <AceEditor
@@ -482,9 +487,10 @@ class StreamingLogs extends Component {
             />
             <div className={styles.loadOlder}>
               {log.isOldAvailable ? (
-                <button
+                <Button
                   onClick={this.handleOlderEvents.bind(this)}
-                  className={styles.oldBtn + ' btn btn-default'}
+                  color="white"
+                  size="sm"
                 >
                   {log.isLoadingOlder ? (
                     <span>
@@ -493,7 +499,7 @@ class StreamingLogs extends Component {
                   ) : (
                     <span>Load older logs</span>
                   )}
-                </button>
+                </Button>
               ) : (
                 <div> No more logs available </div>
               )}
diff --git a/console/src/components/Services/EventTrigger/TableCommon/RedeliverEvent.js b/console/src/components/Services/EventTrigger/TableCommon/RedeliverEvent.js
index a923f30f57f..10ca922675d 100644
--- a/console/src/components/Services/EventTrigger/TableCommon/RedeliverEvent.js
+++ b/console/src/components/Services/EventTrigger/TableCommon/RedeliverEvent.js
@@ -12,6 +12,7 @@ import {
 } from '../EventActions';
 import AceEditor from 'react-ace';
 import 'brace/mode/json';
+import Button from '../../Layout/Button/Button';
 
 class RedeliverEvent extends Component {
   constructor(props) {
@@ -211,12 +212,14 @@ class RedeliverEvent extends Component {
                 <div className="col-md-12">
                   <div className={styles.add_mar_bottom}>
                     Event ID - {log.redeliverEventId}
-                    <button
+                    <Button
                       onClick={this.handleRedeliver.bind(this)}
-                      className={'hide btn btn-default'}
+                      className="hide"
+                      color="white"
+                      size="sm"
                     >
                       Deliver again
-                    </button>
+                    </Button>
                   </div>
                   <div className={styles.padd_left_remove + ' col-md-5'}>
                     <div> Request </div>
@@ -227,10 +230,10 @@ class RedeliverEvent extends Component {
                       value={
                         log.eventInvocations[0]
                           ? JSON.stringify(
-                              log.eventInvocations[0].request,
-                              null,
-                              4
-                            )
+                            log.eventInvocations[0].request,
+                            null,
+                            4
+                          )
                           : ''
                       }
                       minLines={8}
diff --git a/console/src/components/Services/EventTrigger/TableCommon/Table.scss b/console/src/components/Services/EventTrigger/TableCommon/Table.scss
index 786d7f891c3..abdfd9e62b3 100644
--- a/console/src/components/Services/EventTrigger/TableCommon/Table.scss
+++ b/console/src/components/Services/EventTrigger/TableCommon/Table.scss
@@ -272,7 +272,6 @@ a.expanded {
 
 .advancedToggleBtn {
   width: 300px;
-  background: #f2f2f2 !important;
   i {
     padding-left: 5px;
   }
@@ -293,7 +292,6 @@ a.expanded {
   min-height: 41px;
 }
 .newBtn {
-  font-size: 12px;
   margin-right: 10px;
 }
 .loadNewer {
@@ -314,9 +312,6 @@ a.expanded {
     margin-left: 10px;
   }
 }
-.oldBtn {
-  font-size: 12px;
-}
 .retryEvent {
   cursor: pointer;
 }
@@ -346,3 +341,12 @@ a.expanded {
     margin-left: 5px;
   }
 }
+.toggleAdvanced {
+  cursor: pointer;
+  b {
+    font-size: 15px;
+  }
+  i:hover {
+    color: #4D4D4D ;
+  }
+}
\ No newline at end of file
diff --git a/console/src/components/Services/Layout/Button/Button.js b/console/src/components/Services/Layout/Button/Button.js
new file mode 100644
index 00000000000..1ad704caca0
--- /dev/null
+++ b/console/src/components/Services/Layout/Button/Button.js
@@ -0,0 +1,40 @@
+import React from 'react';
+import styles from '../../../Common/Common.scss';
+
+/*
+  This is a Button HOC that takes al the props supported by <button> and also
+  - color: (default: white) color of the button; currently supports yellow, red, green, gray, white
+  - size: size of the button; currently supports xs (extra small), sm(small)
+  - className: although you can provide any CSS classname, it is recommended to use only the positioning related classes and not the ones that change the appearance (color, font, size) of the button
+*/
+
+const Button = props => {
+  const { children, size, color, className } = props;
+  let extendedClassName = `${className || ''} btn ${
+    size ? `btn-${size} ` : 'button '
+  }`;
+  switch (color) {
+    case 'yellow':
+      extendedClassName += styles.yellow_button;
+      break;
+    case 'red':
+      extendedClassName += 'btn-danger';
+      break;
+    case 'green':
+      extendedClassName += 'btn-success';
+      break;
+    case 'gray':
+      extendedClassName += styles.gray_button;
+      break;
+    default:
+      extendedClassName += 'btn-default';
+      break;
+  }
+  return (
+    <button {...props} className={extendedClassName}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;
diff --git a/console/src/components/Services/Layout/LeftNavBar/LeftNavBar.js b/console/src/components/Services/Layout/LeftNavBar/LeftNavBar.js
index 36ef2ed45c8..20c02bcbfe9 100644
--- a/console/src/components/Services/Layout/LeftNavBar/LeftNavBar.js
+++ b/console/src/components/Services/Layout/LeftNavBar/LeftNavBar.js
@@ -4,6 +4,7 @@ import React from 'react';
 import { Link } from 'react-router';
 
 import { LISTING_SCHEMA } from '../../Data/DataActions';
+import Button from '../Button/Button';
 
 const LeftNavBar = ({
   appPrefix,
@@ -69,12 +70,14 @@ const LeftNavBar = ({
                 className={styles.padd_remove_full}
                 to={`${appPrefix}/manage/add`}
               >
-                <button
-                  className={styles.add_mar_right + ' btn btn-xs btn-default'}
+                <Button
+                  className={styles.add_mar_right}
+                  color="white"
+                  size="xs"
                   data-test="remote-schema-sidebar-add-table"
                 >
                   Add
-                </button>
+                </Button>
               </Link>
             </div>
           ) : null}
diff --git a/console/src/components/Services/Layout/RightLayoutWrapper/Schema.js b/console/src/components/Services/Layout/RightLayoutWrapper/Schema.js
index c70067f42b6..6e03ad3f324 100644
--- a/console/src/components/Services/Layout/RightLayoutWrapper/Schema.js
+++ b/console/src/components/Services/Layout/RightLayoutWrapper/Schema.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 
 import React, { Component } from 'react';
 import Helmet from 'react-helmet';
+import Button from '../Button/Button';
 import { push } from 'react-router-redux';
 import { loadTriggers } from '../EventActions';
 import globals from '../../../../Globals';
@@ -38,16 +39,18 @@ class Schema extends Component {
               Event Triggers{' '}
             </h2>
             {migrationMode ? (
-              <button
+              <Button
                 data-test="data-create-trigger"
-                className={styles.yellow_button}
+                className={styles.button_mar_right}
+                color="yellow"
+                size="sm"
                 onClick={e => {
                   e.preventDefault();
                   dispatch(push(`${appPrefix}/manage/triggers/add`));
                 }}
               >
                 Create Trigger
-              </button>
+              </Button>
             ) : null}
           </div>
           <hr />