style: Pass at propagating (and enhancing) Button component throughout Superset (#10649)

* getting rid of weird focus/active outline ring

* Buttons... buttons _everywhere_

* linting

* Nixing views/CRUD/dataset/Button component

* fixing 2 typing errors

* fixing more TS errors

* prefer src path for include

* one more real button, one less CSS class

* one more "button" to "Button"

* Published Status is now a proper clickable Label

* nixing the CRUD button again

* touching up stories, with SupersetButton story

* SIP-34 button colors

* adding polished package to mix colors

* updating button colors to match Superset theme

* abstracting away from bootstrap-specific props (might pivot libraries soon!)

* more abstraction from bsStyle/bsSize props

* exchanging styles for a prop

* linting

* restoring feature flag to stock

* using src alias

* last <button> replacement

* this classname would never be applied

* more linting action

* fixing unsupported bsSize 'medium', and cta typing error

* more cta action

* unnecessary styles

* errant bsSize prop

* cleanup

* tweaks to make new New button work

* Linting

* fixing a couple tests

* fixing theme based test failure

* margin tweak for NEW button

* another fixed test

* another fixed test

* fixing two more tests

* fixing last broken tests.

* always be linting

* Adding tertiary/dashed buttons

* cleaning up QueryAndSave buttons

* fixing "link" button styles

* fixing/updating link button styles

* cta buttons on Modal component

* linting.

* exporting button story knobs, making ALL knobs safe for export.

* capitalizing a file... no big whoop

* Basic button tests

* renaming button - temporarily

* renaming file to fix capitalization issue

* passing theme through to a difficult popover.

* fixin' a newly busted unit test

* lint fixin'

* oops, shouldn't have changed this prop!

* adding a dive() to themedShallow, and fixing a cypress/jest test

* addressing lint stuff

* touching up stories, with SupersetButton story

* SIP-34 button colors

* updating button colors to match Superset theme

* abstracting away from bootstrap-specific props (might pivot libraries soon!)

* linting

* restoring feature flag to stock

* cleanup

* Linting

* renaming button - temporarily

* renaming file to fix capitalization issue

* oops, shouldn't have changed this prop!

* adding a dive() to themedShallow, and fixing a cypress/jest test

* addressing lint stuff

* nixing new modal button

* Fixing another popover/button issue that should break cypress

* lint ✨

* passing classNames through to new button (should fix some tests)

* cleaning unused classes, making cypress tests use data attrs

* fixin' the test

* fixing another class-based test with data-test attr

* no longer passing theme as prop to buttons in popovers... themeprovider is better

* outline/border tweaks!

superset-frontend/cypress-base/cypress/integration/explore/AdhocFilters.test.ts

@@ -40,7 +40,7 @@ describe('AdhocFilters', () => {
       cy.get('button').contains('Save').click();
     });
 
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
     cy.verifySliceSuccess({
       waitAlias: '@postJson',
       chartSelector: 'svg',
@@ -63,7 +63,7 @@ describe('AdhocFilters', () => {
       cy.get('button').contains('Save').click();
     });
 
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
     cy.verifySliceSuccess({
       waitAlias: '@postJson',
       chartSelector: 'svg',

superset-frontend/cypress-base/cypress/integration/explore/AdhocMetrics.test.ts

@@ -48,7 +48,7 @@ describe('AdhocMetrics', () => {
 
     cy.get('.metrics-select .metric-option').contains(metricName);
 
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
     cy.verifySliceSuccess({
       waitAlias: '@postJson',
       querySubstring: `${metric} AS "${metricName}"`, // SQL statement
@@ -77,7 +77,7 @@ describe('AdhocMetrics', () => {
       .type('/COUNT(DISTINCT name)', { force: true });
     cy.get('#metrics-edit-popover').find('button').contains('Save').click();
 
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
 
     const metric = 'SUM(num)/COUNT(DISTINCT name)';
     cy.verifySliceSuccess({
@@ -103,7 +103,7 @@ describe('AdhocMetrics', () => {
       cy.get('button').contains('Save').click();
     });
 
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
 
     const metric = 'SUM(num)';
     cy.verifySliceSuccess({
@@ -124,7 +124,7 @@ describe('AdhocMetrics', () => {
     });
 
     const metric = 'AVG(sum_boys)';
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
     cy.verifySliceSuccess({
       waitAlias: '@postJson',
       querySubstring: `${metric} AS "${metric}"`,

superset-frontend/cypress-base/cypress/integration/explore/advanced.test.ts

@@ -43,7 +43,7 @@ describe('Advanced analytics', () => {
       .find('.Select__multi-value__label')
       .contains('364 days');
 
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
     cy.wait('@postJson');
     cy.reload();
     cy.verifySliceSuccess({
@@ -90,7 +90,7 @@ describe('Annotations', () => {
       cy.get('button').contains('OK').click();
     });
 
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
     cy.verifySliceSuccess({
       waitAlias: '@postJson',
       chartSelector: 'svg',

superset-frontend/cypress-base/cypress/integration/explore/control.test.ts

@@ -78,7 +78,7 @@ describe('Groupby control', () => {
       cy.get('.Select__control').click();
       cy.get('input[type=text]').type('state{enter}');
     });
-    cy.get('button.query').click();
+    cy.get('button[data-test="run-query-button"]').click();
     cy.verifySliceSuccess({ waitAlias: '@postJson', chartSelector: 'svg' });
   });
 });

superset-frontend/package-lock.json

@@ -34830,16 +34830,14 @@
       "version": "3.6.5",
       "resolved": "https://registry.npmjs.org/polished/-/polished-3.6.5.tgz",
       "integrity": "sha512-VwhC9MlhW7O5dg/z7k32dabcAFW1VI2+7fSe8cE/kXcfL7mVdoa5UxciYGW2sJU78ldDLT6+ROEKIZKFNTnUXQ==",
-      "dev": true,
       "requires": {
         "@babel/runtime": "^7.9.2"
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.10.5",
+          "version": "7.11.2",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.5.tgz",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.11.2.tgz",
-          "integrity": "sha512-otddXKhdNn7d0ptoFRHtMLa8LqDxLYwTjB4nYgM1yy5N6gU/MUf8zqyyLltCH3yAVitBzmwK4us+DD0l/MauAg==",
+          "integrity": "sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw==",
-          "dev": true,
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }

superset-frontend/package.json

@@ -145,6 +145,7 @@
     "mousetrap": "^1.6.1",
     "mustache": "^2.2.1",
     "omnibar": "^2.1.1",
+    "polished": "^3.6.5",
     "prop-types": "^15.7.2",
     "re-resizable": "^4.3.1",
     "react": "^16.13.1",

superset-frontend/spec/helpers/theming.ts

@@ -51,5 +51,5 @@ export function styledShallow(
       theme: supersetTheme,
       ...options?.wrappingComponentProps,
     },
-  });
+  }).dive();
 }

superset-frontend/spec/javascripts/addSlice/AddSliceContainer_spec.tsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Select from 'src/components/Select';
 import AddSliceContainer, {
   AddSliceContainerProps,
@@ -58,9 +58,9 @@ describe('AddSliceContainer', () => {
   });
 
   it('renders a disabled button if no datasource is selected', () => {
-    expect(
+    expect(wrapper.find(Button).dive().find({ disabled: true })).toHaveLength(
-      wrapper.find(Button).dive().find('.btn[disabled=true]'),
+      1,
-    ).toHaveLength(1);
+    );
   });
 
   it('renders an enabled button if datasource is selected', () => {
@@ -70,9 +70,9 @@ describe('AddSliceContainer', () => {
       datasourceId: datasourceValue.split('__')[0],
       datasourceType: datasourceValue.split('__')[1],
     });
-    expect(
+    expect(wrapper.find(Button).dive().find({ disabled: true })).toHaveLength(
-      wrapper.find(Button).dive().find('.btn[disabled=false]'),
+      0,
-    ).toHaveLength(1);
+    );
   });
 
   it('formats explore url', () => {

superset-frontend/spec/javascripts/components/ConfirmStatusChange_spec.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { supersetTheme, ThemeProvider } from '@superset-ui/style';
 import ConfirmStatusChange from 'src/components/ConfirmStatusChange';
 import Modal from 'src/components/Modal';
@@ -33,7 +33,7 @@ describe('ConfirmStatusChange', () => {
     <ConfirmStatusChange {...mockedProps}>
       {confirm => (
         <>
-          <button id="btn1" onClick={confirm} />
+          <Button id="btn1" onClick={confirm} />
         </>
       )}
     </ConfirmStatusChange>,
@@ -44,7 +44,7 @@ describe('ConfirmStatusChange', () => {
   );
 
   it('opens a confirm modal', () => {
-    wrapper.find('#btn1').props().onClick('foo');
+    wrapper.find('#btn1').first().props().onClick('foo');
 
     wrapper.update();
 

superset-frontend/spec/javascripts/dashboard/components/gridComponents/Tab_spec.jsx

@@ -18,7 +18,7 @@
  */
 import { Provider } from 'react-redux';
 import React from 'react';
-import { mount } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
 import sinon from 'sinon';
 
 import DashboardComponent from 'src/dashboard/containers/DashboardComponent';

superset-frontend/spec/javascripts/datasource/DatasourceModal_spec.jsx

@@ -83,7 +83,10 @@ describe('DatasourceModal', () => {
 
   it('saves on confirm', async () => {
     act(() => {
-      wrapper.find('[className="m-r-5"]').props().onClick();
+      wrapper
+        .find('button[data-test="datasource-modal-save"]')
+        .props()
+        .onClick();
     });
     await waitForComponentToPaint(wrapper);
     act(() => {

superset-frontend/spec/javascripts/explore/components/AdhocFilterEditPopover_spec.jsx

@@ -20,7 +20,8 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Button, Popover, Tab, Tabs } from 'react-bootstrap';
+import { Popover, Tab, Tabs } from 'react-bootstrap';
+import Button from 'src/components/Button';
 
 import AdhocFilter, {
   EXPRESSION_TYPES,
@@ -117,9 +118,9 @@ describe('AdhocFilterEditPopover', () => {
 
   it('highlights save if changes are present', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(Button).find({ bsStyle: 'primary' })).not.toExist();
+    expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).not.toExist();
     wrapper.instance().onAdhocFilterChange(sqlAdhocFilter);
-    expect(wrapper.find(Button).find({ bsStyle: 'primary' })).toExist();
+    expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).toExist();
   });
 
   it('will initiate a drag when clicked', () => {

superset-frontend/spec/javascripts/explore/components/AdhocFilterOption_spec.jsx

@@ -19,7 +19,7 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { styledShallow as shallow } from 'spec/helpers/theming';
 import { OverlayTrigger } from 'react-bootstrap';
 
 import Label from 'src/components/Label';
@@ -46,7 +46,7 @@ function setup(overrides) {
     datasource: {},
     ...overrides,
   };
-  const wrapper = shallow(<AdhocFilterOption {...props} />);
+  const wrapper = shallow(<AdhocFilterOption {...props} />).dive();
   return { wrapper };
 }
 

superset-frontend/spec/javascripts/explore/components/AdhocMetricEditPopover_spec.jsx

@@ -20,7 +20,8 @@
 import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
-import { Button, FormGroup, Popover } from 'react-bootstrap';
+import { FormGroup, Popover } from 'react-bootstrap';
+import Button from 'src/components/Button';
 
 import AdhocMetric, { EXPRESSION_TYPES } from 'src/explore/AdhocMetric';
 import AdhocMetricEditPopover from 'src/explore/components/AdhocMetricEditPopover';
@@ -117,9 +118,9 @@ describe('AdhocMetricEditPopover', () => {
 
   it('highlights save if changes are present', () => {
     const { wrapper } = setup();
-    expect(wrapper.find(Button).find({ bsStyle: 'primary' })).not.toExist();
+    expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).not.toExist();
     wrapper.instance().onColumnChange({ column: columns[1] });
-    expect(wrapper.find(Button).find({ bsStyle: 'primary' })).toExist();
+    expect(wrapper.find(Button).find({ buttonStyle: 'primary' })).toExist();
   });
 
   it('will initiate a drag when clicked', () => {

superset-frontend/spec/javascripts/explore/components/AdhocMetricOption_spec.jsx

@@ -19,7 +19,7 @@
 /* eslint-disable no-unused-expressions */
 import React from 'react';
 import sinon from 'sinon';
-import { shallow } from 'enzyme';
+import { styledShallow as shallow } from 'spec/helpers/theming';
 import { OverlayTrigger } from 'react-bootstrap';
 
 import Label from 'src/components/Label';
@@ -46,7 +46,7 @@ function setup(overrides) {
     columns,
     ...overrides,
   };
-  const wrapper = shallow(<AdhocMetricOption {...props} />);
+  const wrapper = shallow(<AdhocMetricOption {...props} />).dive();
   return { wrapper, onMetricEdit };
 }
 

superset-frontend/spec/javascripts/explore/components/DateFilterControl_spec.jsx

@@ -20,7 +20,7 @@
 import React from 'react';
 import sinon from 'sinon';
 import { styledMount as mount } from 'spec/helpers/theming';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 
 import Label from 'src/components/Label';
 import DateFilterControl from 'src/explore/components/controls/DateFilterControl';

superset-frontend/spec/javascripts/explore/components/QueryAndSaveBtns_spec.jsx

@@ -54,7 +54,7 @@ describe('QueryAndSaveButtons', () => {
     });
 
     it('calls onQuery when query button is clicked', () => {
-      const queryButton = wrapper.find('.query');
+      const queryButton = wrapper.find('[data-test="run-query-button"]');
       queryButton.simulate('click');
       expect(defaultProps.onQuery.called).toBe(true);
     });

superset-frontend/spec/javascripts/explore/components/SaveModal_spec.jsx

@@ -21,8 +21,10 @@ import configureStore from 'redux-mock-store';
 import thunk from 'redux-thunk';
 import { bindActionCreators } from 'redux';
 
-import { shallow, mount } from 'enzyme';
+import { shallow } from 'enzyme';
-import { FormControl, Modal, Button, Radio } from 'react-bootstrap';
+import { styledMount as mount } from 'spec/helpers/theming';
+import { FormControl, Modal, Radio } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import sinon from 'sinon';
 import fetchMock from 'fetch-mock';
 

superset-frontend/spec/javascripts/sqllab/QuerySearch_spec.jsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 import React from 'react';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
 

superset-frontend/spec/javascripts/sqllab/SouthPane_spec.jsx

@@ -78,7 +78,7 @@ describe('SouthPane', () => {
   const getWrapper = () =>
     shallow(<SouthPaneContainer {...mockedProps} />, {
       context: { store },
-    }).dive();
+    });
 
   let wrapper;
 

superset-frontend/src/CRUD/CollectionTable.tsx

@@ -19,7 +19,7 @@
 import React, { ReactNode } from 'react';
 import shortid from 'shortid';
 import { t } from '@superset-ui/translation';
-import Button from '../components/Button';
+import Button from 'src/components/Button';
 import Fieldset from './Fieldset';
 import { recurseReactClone } from './utils';
 import './crud.less';
@@ -167,7 +167,7 @@ export default class CRUDCollection extends React.PureComponent<
           {allowDeletes && !allowAddItem && <th className="tiny-cell" />}
           {allowAddItem && (
             <th>
-              <Button bsStyle="primary" onClick={this.onAddItem}>
+              <Button buttonStyle="primary" onClick={this.onAddItem}>
                 <i className="fa fa-plus" /> {t('Add Item')}
               </Button>
             </th>

superset-frontend/src/SqlLab/components/EstimateQueryCostButton.jsx

@@ -22,7 +22,7 @@ import { Table } from 'reactable-arc';
 import { Alert } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 
-import Button from '../../components/Button';
+import Button from 'src/components/Button';
 import Loading from '../../components/Loading';
 import ModalTrigger from '../../components/ModalTrigger';
 
@@ -85,8 +85,8 @@ class EstimateQueryCostButton extends React.PureComponent {
           modalBody={this.renderModalBody()}
           triggerNode={
             <Button
-              bsStyle="warning"
+              buttonStyle="warning"
-              bsSize="small"
+              buttonSize="small"
               onClick={this.onClick}
               key="query-estimate-btn"
               tooltip={tooltip}

superset-frontend/src/SqlLab/components/ExploreCtasResultsButton.jsx

@@ -24,9 +24,9 @@ import Dialog from 'react-bootstrap-dialog';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
+import Button from 'src/components/Button';
 import { exploreChart } from '../../explore/exploreUtils';
 import * as actions from '../actions/sqlLab';
-import Button from '../../components/Button';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -89,7 +89,7 @@ class ExploreCtasResultsButton extends React.PureComponent {
     return (
       <>
         <Button
-          bsSize="small"
+          buttonSize="small"
           onClick={this.onClick}
           tooltip={t('Explore the result set in the data exploration view')}
         >

superset-frontend/src/SqlLab/components/ExploreResultsButton.jsx

@@ -25,11 +25,11 @@ import { Alert } from 'react-bootstrap';
 import Dialog from 'react-bootstrap-dialog';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
-
 import shortid from 'shortid';
+
+import Button from 'src/components/Button';
 import { exploreChart } from '../../explore/exploreUtils';
 import * as actions from '../actions/sqlLab';
-import Button from '../../components/Button';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -213,7 +213,7 @@ class ExploreResultsButton extends React.PureComponent {
     return (
       <>
         <Button
-          bsSize="small"
+          buttonSize="small"
           onClick={this.onClick}
           disabled={!allowsSubquery}
           tooltip={t('Explore the result set in the data exploration view')}

superset-frontend/src/SqlLab/components/LimitControl.tsx

@@ -17,13 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import {
+import { FormGroup, FormControl, Overlay, Popover } from 'react-bootstrap';
-  Button,
+import Button from 'src/components/Button';
-  FormGroup,
-  FormControl,
-  Overlay,
-  Popover,
-} from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import styled from '@superset-ui/style';
 
@@ -119,8 +114,8 @@ export default class LimitControl extends React.PureComponent<
           </FormGroup>
           <div className="clearfix">
             <Button
-              bsSize="small"
+              buttonSize="small"
-              bsStyle="primary"
+              buttonStyle="primary"
               className="float-right ok m-l-5"
               disabled={!isValid}
               onClick={this.submitAndClose}
@@ -128,7 +123,7 @@ export default class LimitControl extends React.PureComponent<
               {t('Ok')}
             </Button>
             <Button
-              bsSize="small"
+              buttonSize="small"
               className="float-right reset"
               onClick={this.setValueAndClose.bind(
                 this,

superset-frontend/src/SqlLab/components/QuerySearch.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Select from 'src/components/Select';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
@@ -273,8 +273,8 @@ class QuerySearch extends React.PureComponent {
             />
 
             <Button
-              bsSize="small"
+              buttonSize="small"
-              bsStyle="success"
+              buttonStyle="success"
               onClick={this.refreshQueries}
             >
               {t('Search')}

superset-frontend/src/SqlLab/components/QueryTable.jsx

@@ -24,6 +24,7 @@ import { ProgressBar, Well } from 'react-bootstrap';
 import Label from 'src/components/Label';
 import { t } from '@superset-ui/translation';
 
+import Button from 'src/components/Button';
 import Link from '../../components/Link';
 import ResultSet from './ResultSet';
 import ModalTrigger from '../../components/ModalTrigger';
@@ -99,31 +100,34 @@ class QueryTable extends React.PureComponent {
           </div>
         );
         q.user = (
-          <button
+          <Button
-            className="btn btn-link btn-xs"
+            buttonSize="small"
+            buttonStyle="link"
             onClick={this.props.onUserClicked.bind(this, q.userId)}
           >
             {q.user}
-          </button>
+          </Button>
         );
         q.db = (
-          <button
+          <Button
-            className="btn btn-link btn-xs"
+            buttonSize="small"
+            buttonStyle="link"
             onClick={this.props.onDbClicked.bind(this, q.dbId)}
           >
             {q.db}
-          </button>
+          </Button>
         );
         q.started = moment(q.startDttm).format('HH:mm:ss');
         q.querylink = (
           <div style={{ width: '100px' }}>
-            <button
+            <Button
-              className="btn btn-link btn-xs"
+              buttonSize="small"
+              buttonStyle="link"
               onClick={this.openQuery.bind(this, q.queryId)}
             >
               <i className="fa fa-external-link m-r-3" />
               {t('Edit')}
-            </button>
+            </Button>
           </div>
         );
         q.sql = (

superset-frontend/src/SqlLab/components/ResultSet.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React, { CSSProperties } from 'react';
-import { Alert, Button, ButtonGroup, ProgressBar } from 'react-bootstrap';
+import { Alert, ButtonGroup, ProgressBar } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import shortid from 'shortid';
 import { t } from '@superset-ui/translation';
 
@@ -166,7 +167,7 @@ export default class ResultSet extends React.PureComponent<
               )}
             {this.props.csv && (
               <Button
-                bsSize="small"
+                buttonSize="small"
                 href={`/superset/csv/${this.props.query.id}`}
               >
                 <i className="fa fa-file-text-o" /> {t('.CSV')}
@@ -177,7 +178,7 @@ export default class ResultSet extends React.PureComponent<
               text={prepareCopyToClipboardTabularData(data)}
               wrapped={false}
               copyNode={
-                <Button bsSize="small">
+                <Button buttonSize="small">
                   <i className="fa fa-clipboard" /> {t('Clipboard')}
                 </Button>
               }
@@ -243,7 +244,7 @@ export default class ResultSet extends React.PureComponent<
             ] {t('was created')} &nbsp;
             <ButtonGroup>
               <Button
-                bsSize="small"
+                buttonSize="small"
                 className="m-r-5"
                 onClick={() => this.popSelectStar(tempSchema, tempTable)}
               >
@@ -296,9 +297,9 @@ export default class ResultSet extends React.PureComponent<
       if (query.isDataPreview) {
         return (
           <Button
-            bsSize="sm"
+            buttonSize="sm"
             className="fetch"
-            bsStyle="primary"
+            buttonStyle="primary"
             onClick={() =>
               this.reFetchQueryResults({
                 ...query,
@@ -312,9 +313,9 @@ export default class ResultSet extends React.PureComponent<
       } else if (query.resultsKey) {
         return (
           <Button
-            bsSize="sm"
+            buttonSize="sm"
             className="fetch"
-            bsStyle="primary"
+            buttonStyle="primary"
             onClick={() => this.fetchResults(query)}
           >
             {t('Refetch Results')}
@@ -336,7 +337,7 @@ export default class ResultSet extends React.PureComponent<
     if (query.trackingUrl) {
       trackingUrl = (
         <Button
-          bsSize="small"
+          buttonSize="small"
           onClick={() => query.trackingUrl && window.open(query.trackingUrl)}
         >
           {t('Track Job')}

superset-frontend/src/SqlLab/components/RunQueryActionButton.tsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import { t } from '@superset-ui/translation';
 
-import Button, { ButtonProps } from '../../components/Button';
+import Button, { ButtonProps } from 'src/components/Button';
 
 const NO_OP = () => undefined;
 
@@ -32,9 +32,6 @@ interface Props {
   stopQuery: () => void;
   sql: string;
 }
-const commonBtnStyle = {
-  width: '140px',
-};
 
 const RunQueryActionButton = ({
   allowAsync = false,
@@ -51,15 +48,14 @@ const RunQueryActionButton = ({
     !!queryState && ['running', 'pending'].indexOf(queryState) > -1;
 
   const commonBtnProps: ButtonProps = {
-    bsSize: 'small',
+    buttonSize: 'small',
-    bsStyle: btnStyle,
+    buttonStyle: btnStyle,
     disabled: !dbId,
-    style: commonBtnStyle,
   };
 
   if (shouldShowStopBtn) {
     return (
-      <Button {...commonBtnProps} onClick={stopQuery}>
+      <Button {...commonBtnProps} cta onClick={stopQuery}>
         <i className="fa fa-stop" /> {t('Stop')}
       </Button>
     );
@@ -67,6 +63,7 @@ const RunQueryActionButton = ({
     return (
       <Button
         {...commonBtnProps}
+        cta
         onClick={() => runQuery(true)}
         key="run-async-btn"
         tooltip={t('Run query asynchronously (Ctrl + ↵)')}
@@ -79,6 +76,7 @@ const RunQueryActionButton = ({
   return (
     <Button
       {...commonBtnProps}
+      cta
       onClick={() => runQuery(false)}
       key="run-btn"
       tooltip={t('Run query synchronously (Ctrl + ↵)')}

superset-frontend/src/SqlLab/components/SaveQuery.jsx

@@ -135,7 +135,7 @@ class SaveQuery extends React.PureComponent {
           <Col md={12}>
             {isSaved && (
               <Button
-                bsStyle="primary"
+                buttonStyle="primary"
                 onClick={this.onUpdate}
                 className="m-r-3"
               >
@@ -143,7 +143,7 @@ class SaveQuery extends React.PureComponent {
               </Button>
             )}
             <Button
-              bsStyle={isSaved ? undefined : 'primary'}
+              buttonStyle={isSaved ? undefined : 'primary'}
               onClick={this.onSave}
               className="m-r-3"
             >
@@ -169,7 +169,7 @@ class SaveQuery extends React.PureComponent {
           backdrop="static"
           triggerNode={
             <Button
-              bsSize="small"
+              buttonSize="small"
               className="toggleSave"
               onClick={this.toggleSave}
             >

superset-frontend/src/SqlLab/components/ScheduleQueryButton.jsx

@@ -192,7 +192,7 @@ class ScheduleQueryButton extends React.PureComponent {
           modalBody={this.renderModalBody()}
           triggerNode={
             <Button
-              bsSize="small"
+              buttonSize="small"
               className="toggleSchedule"
               onClick={this.toggleSchedule}
               disabled={this.props.disabled}

superset-frontend/src/SqlLab/components/ShareSqlLabQuery.jsx

@@ -22,7 +22,7 @@ import { Popover, OverlayTrigger } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { isFeatureEnabled, FeatureFlag } from 'src/featureFlags';
 
-import Button from '../../components/Button';
+import Button from 'src/components/Button';
 import CopyToClipboard from '../../components/CopyToClipboard';
 import { storeQuery } from '../../utils/common';
 import getClientErrorObject from '../../utils/getClientErrorObject';
@@ -110,7 +110,7 @@ class ShareSqlLabQuery extends React.Component {
         shouldUpdatePosition
         overlay={this.renderPopover()}
       >
-        <Button bsSize="small" className="toggleSave">
+        <Button buttonSize="small" className="toggleSave">
           <i className="fa fa-share" /> {t('Share')}
         </Button>
       </OverlayTrigger>

superset-frontend/src/SqlLab/components/SqlEditor.jsx

@@ -398,7 +398,7 @@ class SqlEditor extends React.PureComponent {
             <InputGroup.Button>
               {this.props.database.allow_ctas && (
                 <Button
-                  bsSize="small"
+                  buttonSize="small"
                   disabled={this.state.ctas.length === 0}
                   onClick={this.createTableAs.bind(this)}
                   tooltip={ctasToolTip}
@@ -408,7 +408,7 @@ class SqlEditor extends React.PureComponent {
               )}
               {this.props.database.allow_cvas && (
                 <Button
-                  bsSize="small"
+                  buttonSize="small"
                   disabled={this.state.ctas.length === 0}
                   onClick={this.createViewAs.bind(this)}
                   tooltip={cvasToolTip}

superset-frontend/src/SqlLab/components/SqlEditorLeftBar.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { t } from '@superset-ui/translation';
 import TableElement from './TableElement';
 import TableSelector from '../../components/TableSelector';
@@ -140,7 +140,11 @@ export default class SqlEditorLeftBar extends React.PureComponent {
           </div>
         </div>
         {shouldShowReset && (
-          <Button bsSize="small" bsStyle="danger" onClick={this.resetState}>
+          <Button
+            buttonSize="small"
+            buttonStyle="danger"
+            onClick={this.resetState}
+          >
             <i className="fa fa-bomb" /> {t('Reset State')}
           </Button>
         )}

superset-frontend/src/SqlLab/components/TemplateParamsEditor.jsx

@@ -29,8 +29,8 @@ import 'brace/theme/textmate';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
+import Button from 'src/components/Button';
 import ModalTrigger from '../../components/ModalTrigger';
-import Button from '../../components/Button';
 
 const propTypes = {
   onChange: PropTypes.func,

superset-frontend/src/addSlice/AddSliceContainer.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React from 'react';
-import { Button, Panel } from 'react-bootstrap';
+import { Panel } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Select from 'src/components/Select';
 import { t } from '@superset-ui/translation';
 
@@ -142,7 +143,7 @@ export default class AddSliceContainer extends React.PureComponent<
             <br />
             <hr />
             <Button
-              bsStyle="primary"
+              buttonStyle="primary"
               disabled={this.isBtnDisabled()}
               onClick={this.gotoSlice}
             >

superset-frontend/src/common/components/Modal.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import styled from '@superset-ui/style';
 import { Modal as BaseModal } from 'src/common/components';
 import { t } from '@superset-ui/translation';
-import Button from 'src/views/CRUD/data/dataset/Button';
+import Button from 'src/components/Button';
 
 interface ModalProps {
   className?: string;

superset-frontend/src/components/Button/Button.stories.jsx

@@ -25,13 +25,16 @@ export default {
   title: 'Button',
   component: Button,
   decorators: [withKnobs],
+  excludeStories: /.*Knob$/,
 };
 
-const bsStyleKnob = {
+export const buttonStyleKnob = {
   label: 'Types',
   options: {
     Primary: 'primary',
     Secondary: 'secondary',
+    Tertiary: 'tertiary',
+    Dashed: 'dashed',
     Danger: 'danger',
     Warning: 'warning',
     Success: 'success',
@@ -42,17 +45,18 @@ const bsStyleKnob = {
   defaultValue: null,
   // groupId: 'ButtonType',
 };
-const bsSizeKnob = {
+
+export const buttonSizeKnob = {
   label: 'Sizes',
   options: {
     XS: 'xsmall',
     S: 'small',
-    M: 'medium',
+    Default: null,
     L: 'large',
-    None: null,
   },
   defaultValue: null,
 };
+
 // TODO remove the use of these in the codebase where they're not necessary
 // const classKnob = {
 //   label: 'Known Classes',
@@ -62,7 +66,6 @@ const bsSizeKnob = {
 //     Reset: 'reset',
 //     Fetch: 'fetch',
 //     Query: 'query',
-//     saveBtn: 'save-btn',
 //     MR3: 'm-r-3',
 //     cancelQuery: 'cancelQuery',
 //     toggleSave: 'toggleSave',
@@ -101,43 +104,43 @@ const hrefKnob = {
 
 export const ButtonGallery = () => (
   <>
-    {Object.values(bsSizeKnob.options)
+    {Object.entries(buttonSizeKnob.options).map(([name, size]) => (
-      .filter(a => a)
+      <div key={size}>
-      .map(size => (
+        <h4>{name}</h4>
-        <div>
+        {Object.values(buttonStyleKnob.options)
-          <h4>{size}</h4>
+          .filter(o => o)
-          {Object.values(bsStyleKnob.options)
+          .map(style => (
-            .filter(o => o)
+            <Button
-            .map(style => (
+              disabled={boolean('Disabled', false)}
-              <Button
+              cta={boolean('CTA', false)}
-                disabled={boolean('Disabled', false)}
+              buttonStyle={style}
-                bsStyle={style}
+              buttonSize={size}
-                bsSize={size}
+              onClick={action('clicked')}
-                onClick={action('clicked')}
+              key={`${style}_${size}`}
-                style={{ marginRight: 5 }}
+            >
-              >
+              {style}
-                {style}
+            </Button>
-              </Button>
+          ))}
-            ))}
+      </div>
-        </div>
+    ))}
-      ))}
   </>
 );
 
 export const InteractiveButton = () => (
   <Button
     disabled={boolean('Disabled', false)}
-    bsStyle={select(
+    cta={boolean('CTA', false)}
-      bsStyleKnob.label,
+    buttonStyle={select(
-      bsStyleKnob.options,
+      buttonStyleKnob.label,
-      bsStyleKnob.defaultValue,
+      buttonStyleKnob.options,
-      bsStyleKnob.groupId,
+      buttonStyleKnob.defaultValue,
+      buttonStyleKnob.groupId,
     )}
-    bsSize={select(
+    size={select(
-      bsSizeKnob.label,
+      buttonSizeKnob.label,
-      bsSizeKnob.options,
+      buttonSizeKnob.options,
-      bsSizeKnob.defaultValue,
+      buttonSizeKnob.defaultValue,
-      bsSizeKnob.groupId,
+      buttonSizeKnob.groupId,
     )}
     onClick={action('clicked')}
     type={select(

superset-frontend/src/components/Button/Button.test.tsx

@@ -0,0 +1,68 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements.  See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership.  The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License.  You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { ReactWrapper } from 'enzyme';
+import { styledMount as mount } from 'spec/helpers/theming';
+import Button from '.';
+import {
+  ButtonGallery,
+  buttonSizeKnob,
+  buttonStyleKnob,
+} from './Button.stories';
+
+describe('Button', () => {
+  let wrapper: ReactWrapper;
+
+  // test the basic component
+  it('renders the base component', () => {
+    expect(React.isValidElement(<Button />)).toBe(true);
+  });
+
+  it('works with an onClick handler', () => {
+    const mockAction = jest.fn();
+    wrapper = mount(<Button onClick={mockAction} />);
+    wrapper.find('Button').first().simulate('click');
+    expect(mockAction).toHaveBeenCalled();
+  });
+
+  it('does not handle onClicks when disabled', () => {
+    const mockAction = jest.fn();
+    wrapper = mount(<Button onClick={mockAction} disabled />);
+    wrapper.find('Button').first().simulate('click');
+    expect(mockAction).toHaveBeenCalledTimes(0);
+  });
+
+  // test stories from the storybook!
+  it('All the sorybook gallery variants mount', () => {
+    wrapper = mount(<ButtonGallery />);
+
+    const permutationCount =
+      Object.values(buttonStyleKnob.options).filter(o => o).length *
+      Object.values(buttonSizeKnob.options).length;
+
+    expect(wrapper.find(Button).length).toEqual(permutationCount);
+  });
+
+  // test things NOT in the storybook!
+  it('renders custom button styles without melting', () => {
+    wrapper = mount(<Button buttonStyle="foobar" />);
+    expect(wrapper.find('Button.btn-foobar')).toHaveLength(1);
+  });
+});

superset-frontend/src/components/Button/index.tsx

@@ -18,6 +18,8 @@
  */
 import React from 'react';
 import { kebabCase } from 'lodash';
+import { mix } from 'polished';
+import cx from 'classnames';
 import {
   Button as BootstrapButton,
   Tooltip,
@@ -40,52 +42,201 @@ export interface ButtonProps {
   placement?: string;
   onClick?: OnClickHandler;
   disabled?: boolean;
-  bsStyle?: string;
+  buttonStyle?: string;
   btnStyles?: string;
-  bsSize?: BootstrapButton.ButtonProps['bsSize'];
+  buttonSize?: BootstrapButton.ButtonProps['bsSize'];
   style?: BootstrapButton.ButtonProps['style'];
   children?: React.ReactNode;
   dropdownItems?: DropdownItemProps[];
+  href?: string; // React-Bootstrap creates a link when this is passed in.
+  target?: string; // React-Bootstrap creates a link when this is passed in.
+  type?: string; // React-Bootstrap supports this when rendering an HTML button element
+  cta?: boolean;
 }
 
 const BUTTON_WRAPPER_STYLE = { display: 'inline-block', cursor: 'not-allowed' };
 
 const SupersetButton = styled(BootstrapButton)`
-  &.supersetButton {
+  &:focus,
-    border-radius: ${({ theme }) => theme.borderRadius}px;
+  &:active,
-    border: none;
+  &:focus:active {
-    color: ${({ theme }) => theme.colors.secondary.light5};
+    outline: none;
-    font-size: ${({ theme }) => theme.typography.sizes.s}px;
+    box-shadow: none;
-    font-weight: ${({ theme }) => theme.typography.weights.bold};
+  }
+  transition: all ${({ theme }) => theme.transitionTiming}s;
+  border-radius: ${({ theme }) => theme.borderRadius}px;
+  border: none;
+  font-size: ${({ theme }) => theme.typography.sizes.s}px;
+  font-weight: ${({ theme }) => theme.typography.weights.bold};
+  margin-left: ${({ theme }) => theme.gridUnit * 4}px;
+  &:first-of-type {
+    margin-left: 0;
+  }
+
+  i {
+    padding: 0 ${({ theme }) => theme.gridUnit * 2}px 0 0;
+  }
+
+  /* SIP 34 colors! */
+  &.btn {
+    border: 1px solid transparent; /* this just makes sure the height is the same as tertiary/dashed buttons */
+    &:hover,
+    &:active {
+      border: 1px solid transparent;
+    }
+    &-default,
+    &-secondary {
+      background-color: ${({ theme }) => theme.colors.primary.light4};
+      color: ${({ theme }) => theme.colors.primary.dark1};
+      &:hover {
+        background-color: ${({ theme }) =>
+          mix(0.1, theme.colors.grayscale.light5, theme.colors.primary.light4)};
+        color: ${({ theme }) => theme.colors.primary.dark1};
+      }
+      &:active {
+        background-color: ${({ theme }) =>
+          mix(0.25, theme.colors.primary.base, theme.colors.primary.light4)};
+        color: ${({ theme }) => theme.colors.primary.dark1};
+      }
+    }
+    &-tertiary,
+    &-dashed {
+      border-width: 1px;
+      border-style: solid;
+      background-color: ${({ theme }) => theme.colors.grayscale.light5};
+      color: ${({ theme }) => theme.colors.primary.dark1};
+      border-color: ${({ theme }) => theme.colors.primary.dark1};
+      &:hover {
+        background-color: ${({ theme }) => theme.colors.grayscale.light5};
+        color: ${({ theme }) => theme.colors.primary.dark1};
+        border-color: ${({ theme }) => theme.colors.primary.light1};
+      }
+      &:active {
+        background-color: ${({ theme }) => theme.colors.grayscale.light5};
+        color: ${({ theme }) => theme.colors.primary.dark1};
+        border-color: ${({ theme }) => theme.colors.primary.dark1};
+      }
+      &[disabled],
+      &[disabled]:hover {
+        background-color: ${({ theme }) => theme.colors.grayscale.light5};
+        color: ${({ theme }) => theme.colors.grayscale.base};
+        border-color: ${({ theme }) => theme.colors.grayscale.light2};
+      }
+    }
+    &-dashed {
+      border-style: dashed;
+      &:hover,
+      &:active {
+        border-style: dashed;
+      }
+    }
+    &-link {
+      background: none;
+      text-decoration: none;
+      color: ${({ theme }) => theme.colors.primary.dark1};
+      &:hover {
+        background: none;
+        color: ${({ theme }) => theme.colors.primary.base};
+      }
+      &:active {
+        background: none;
+        color: ${({ theme }) => theme.colors.primary.dark1};
+      }
+      &[disabled],
+      &[disabled]:hover {
+        background: none;
+        color: ${({ theme }) => theme.colors.grayscale.base};
+      }
+    }
+    &-primary {
+      background-color: ${({ theme }) => theme.colors.primary.dark1};
+      color: ${({ theme }) => theme.colors.grayscale.light5};
+      &:hover {
+        background-color: ${({ theme }) =>
+          mix(0.1, theme.colors.grayscale.light5, theme.colors.primary.dark1)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+      &:active {
+        background-color: ${({ theme }) =>
+          mix(0.2, theme.colors.grayscale.dark2, theme.colors.primary.dark1)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+    }
+    &-danger {
+      background-color: ${({ theme }) => theme.colors.error.base};
+      color: ${({ theme }) => theme.colors.grayscale.light5};
+      &:hover {
+        background-color: ${({ theme }) =>
+          mix(0.1, theme.colors.grayscale.light5, theme.colors.error.base)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+      &:active {
+        background-color: ${({ theme }) =>
+          mix(0.2, theme.colors.grayscale.dark2, theme.colors.error.base)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+    }
+    &-success {
+      background-color: ${({ theme }) => theme.colors.success.base};
+      color: ${({ theme }) => theme.colors.grayscale.light5};
+      &:hover {
+        background-color: ${({ theme }) =>
+          mix(0.1, theme.colors.grayscale.light5, theme.colors.success.base)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+      &:active {
+        background-color: ${({ theme }) =>
+          mix(0.2, theme.colors.grayscale.dark2, theme.colors.success.base)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+    }
+    &-warning {
+      background-color: ${({ theme }) => theme.colors.warning.base};
+      color: ${({ theme }) => theme.colors.grayscale.light5};
+      &:hover {
+        background-color: ${({ theme }) =>
+          mix(0.1, theme.colors.grayscale.light5, theme.colors.warning.base)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+      &:active {
+        background-color: ${({ theme }) =>
+          mix(0.2, theme.colors.grayscale.dark2, theme.colors.warning.base)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+    }
+    &-info {
+      background-color: ${({ theme }) => theme.colors.info.dark1};
+      color: ${({ theme }) => theme.colors.grayscale.light5};
+      &:hover {
+        background-color: ${({ theme }) =>
+          mix(0.1, theme.colors.grayscale.light5, theme.colors.info.dark1)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+      &:active {
+        background-color: ${({ theme }) =>
+          mix(0.2, theme.colors.grayscale.dark2, theme.colors.info.dark1)};
+        color: ${({ theme }) => theme.colors.grayscale.light5};
+      }
+    }
+    &[disabled],
+    &[disabled]:hover {
+      background-color: ${({ theme }) => theme.colors.grayscale.light2};
+      color: ${({ theme }) => theme.colors.grayscale.light1};
+    }
+  }
+
+  /* big Call to Action buttons */
+  &.cta {
     min-width: ${({ theme }) => theme.gridUnit * 36}px;
     min-height: ${({ theme }) => theme.gridUnit * 8}px;
     text-transform: uppercase;
-    margin-left: ${({ theme }) => theme.gridUnit * 4}px;
-    &:first-of-type {
-      margin-left: 0;
-    }
-
-    i {
-      padding: 0 ${({ theme }) => theme.gridUnit * 2}px 0 0;
-    }
-
-    &.primary {
-      background-color: ${({ theme }) => theme.colors.primary.base};
-    }
-    &.secondary {
-      color: ${({ theme }) => theme.colors.primary.base};
-      background-color: ${({ theme }) => theme.colors.primary.light4};
-    }
-    &.danger {
-      background-color: ${({ theme }) => theme.colors.error.base};
-    }
   }
 `;
 
 export default function Button(props: ButtonProps) {
   const buttonProps = {
     ...props,
-    bsSize: props.bsSize || 'sm',
+    bsSize: props.buttonSize,
     placement: props.placement || 'top',
   };
   const tooltip = props.tooltip;
@@ -100,17 +251,40 @@ export default function Button(props: ButtonProps) {
     buttonProps.style = { pointerEvents: 'none' };
   }
 
-  let button = (
+  const officialBootstrapStyles = [
-    <SupersetButton {...buttonProps}>{props.children}</SupersetButton>
+    'success',
-  );
+    'warning',
+    'danger',
+    'info',
+    'default',
+    'primary',
+  ];
 
-  const whittledProps = { ...buttonProps };
+  const transformedProps = {
-  delete whittledProps.dropdownItems;
+    ...buttonProps,
+    bsStyle: officialBootstrapStyles.includes(props.buttonStyle || '')
+      ? props.buttonStyle
+      : 'default',
+    className: cx(props.className, {
+      cta: !!buttonProps.cta,
+      [`btn-${props.buttonStyle}`]: !officialBootstrapStyles.includes(
+        props.buttonStyle || '',
+      ),
+    }),
+  };
+  delete transformedProps.dropdownItems;
+  delete transformedProps.buttonSize;
+  delete transformedProps.buttonStyle;
+  delete transformedProps.cta;
+
+  let button = (
+    <SupersetButton {...transformedProps}>{props.children}</SupersetButton>
+  );
 
   if (dropdownItems) {
     button = (
       <div style={BUTTON_WRAPPER_STYLE}>
-        <SupersetButton {...whittledProps} data-toggle="dropdown">
+        <SupersetButton {...transformedProps} data-toggle="dropdown">
           {props.children}
         </SupersetButton>
         <ul className="dropdown-menu">

superset-frontend/src/components/ErrorMessage/ErrorAlert.tsx

@@ -21,7 +21,7 @@ import { Modal } from 'react-bootstrap';
 import { styled, supersetTheme } from '@superset-ui/style';
 import { t } from '@superset-ui/translation';
 import { noOp } from 'src/utils/common';
-import Button from 'src/views/CRUD/data/dataset/Button';
+import Button from 'src/components/Button';
 
 import Icon from '../Icon';
 import { ErrorLevel, ErrorSource } from './types';
@@ -190,7 +190,11 @@ export default function ErrorAlert({
                 copyNode={<Button onClick={noOp}>{t('Copy Message')}</Button>}
               />
             )}
-            <Button bsStyle="primary" onClick={() => setIsModalOpen(false)}>
+            <Button
+              cta
+              buttonStyle="primary"
+              onClick={() => setIsModalOpen(false)}
+            >
               {t('Close')}
             </Button>
           </Modal.Footer>

superset-frontend/src/components/ExpandableList.tsx

@@ -39,12 +39,12 @@ export default function ExpandableList({ items, display = 3 }: Props) {
   const showMoreAction = items.length > display;
 
   const lessAction = (
-    <Button bsStyle="link" bsSize="xsmall" onClick={toggleShowingAll}>
+    <Button buttonStyle="link" buttonSize="xsmall" onClick={toggleShowingAll}>
       less
     </Button>
   );
   const moreAction = (
-    <Button bsStyle="link" bsSize="xsmall" onClick={toggleShowingAll}>
+    <Button buttonStyle="link" buttonSize="xsmall" onClick={toggleShowingAll}>
       {items.length - itemsToDisplay.length} more
     </Button>
   );

superset-frontend/src/components/Label/Label.stories.tsx

@@ -25,7 +25,7 @@ export default {
   title: 'Label',
   component: Label,
   decorators: [withKnobs],
-  excludeStories: ['bsStyleKnob'],
+  excludeStories: /.*Knob$/,
 };
 
 export const bsStyleKnob = {

superset-frontend/src/components/ListView/ListView.tsx

@@ -311,11 +311,12 @@ function ListView<T extends object = any>({
                     <Button
                       data-test="bulk-select-action"
                       key={action.key}
-                      className={cx('supersetButton', {
+                      className={cx({
                         danger: action.type === 'danger',
                         primary: action.type === 'primary',
                         secondary: action.type === 'secondary',
                       })}
+                      cta
                       onClick={() =>
                         action.onSelect(selectedFlatRows.map(r => r.original))
                       }

superset-frontend/src/components/Menu/Menu.tsx

@@ -129,6 +129,14 @@ const StyledHeader = styled.header`
     margin-bottom: 8px;
     border-bottom: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
   }
+  .navbar-right {
+    display: flex;
+    align-items: center;
+    .dropdown:first-of-type {
+      /* this is the "+ NEW" button. Sweep this up when it's replaced */
+      margin-right: ${({ theme }) => theme.gridUnit * 2}px;
+    }
+  }
 `;
 
 export function Menu({

superset-frontend/src/components/Menu/NewMenu.tsx

@@ -17,15 +17,9 @@
  * under the License.
  */
 import React from 'react';
-import styled from '@superset-ui/style';
 import { t } from '@superset-ui/translation';
 import Button, { DropdownItemProps } from '../Button';
 
-const StyledButton = styled(Button)`
-  margin-top: 12px;
-  margin-right: 30px;
-`;
-
 const dropdownItems: DropdownItemProps[] = [
   {
     label: t('SQL Query'),
@@ -47,12 +41,9 @@ const dropdownItems: DropdownItemProps[] = [
 export default function NewMenu() {
   return (
     <li className="dropdown">
-      <StyledButton
+      <Button buttonStyle="primary" dropdownItems={dropdownItems}>
-        className="dropdown-toggle btn btn-sm btn-primary"
-        dropdownItems={dropdownItems}
-      >
         <i className="fa fa-plus" /> New
-      </StyledButton>
+      </Button>
     </li>
   );
 }

superset-frontend/src/components/Menu/SubMenu.tsx

@@ -26,12 +26,8 @@ const StyledHeader = styled.header`
     font-weight: ${({ theme }) => theme.typography.weights.bold};
   }
   .navbar-right {
-    .supersetButton {
+    padding: 8px 0;
-      margin: ${({ theme }) =>
+    margin-right: 0;
-        `${theme.gridUnit * 2}px ${theme.gridUnit * 4}px ${
-          theme.gridUnit * 2
-        }px 0`};
-    }
   }
   .navbar-nav {
     li {
@@ -94,16 +90,18 @@ const SubMenu: React.FunctionComponent<SubMenuProps> = props => {
         <Nav className="navbar-right">
           {props.secondaryButton && (
             <Button
-              className="supersetButton secondary"
+              buttonStyle="secondary"
               onClick={props.secondaryButton.onClick}
+              cta
             >
               {props.secondaryButton.name}
             </Button>
           )}
           {props.primaryButton && (
             <Button
-              className="supersetButton primary"
+              buttonStyle="primary"
               onClick={props.primaryButton.onClick}
+              cta
             >
               {props.primaryButton.name}
             </Button>

superset-frontend/src/components/Modal.tsx

@@ -20,7 +20,7 @@ import React from 'react';
 import styled from '@superset-ui/style';
 import { Modal as BaseModal } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
-import Button from 'src/views/CRUD/data/dataset/Button';
+import Button from 'src/components/Button';
 
 interface ModalProps {
   children: React.ReactNode;
@@ -54,9 +54,6 @@ const StyledModal = styled(BaseModal)`
   .modal-footer {
     border-top: 1px solid ${({ theme }) => theme.colors.grayscale.light2};
     padding: 16px;
-    .btn + .btn {
-      margin-left: 8px;
-    }
   }
 `;
 
@@ -86,11 +83,14 @@ export default function Modal({
       <BaseModal.Body>{children}</BaseModal.Body>
       <BaseModal.Footer>
         <span className="float-right">
-          <Button onClick={onHide}>{t('Cancel')}</Button>
+          <Button onClick={onHide} cta>
+            {t('Cancel')}
+          </Button>
           <Button
-            bsStyle={primaryButtonType}
+            buttonStyle={primaryButtonType}
             disabled={disablePrimaryButton}
             onClick={onHandledPrimaryAction}
+            cta
           >
             {primaryButtonName}
           </Button>

superset-frontend/src/components/ModalTrigger.jsx

@@ -19,9 +19,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Modal, MenuItem } from 'react-bootstrap';
-import cx from 'classnames';
 
-import Button from './Button';
+import Button from 'src/components/Button';
 
 const propTypes = {
   dialogClassName: PropTypes.string,
@@ -96,9 +95,6 @@ export default class ModalTrigger extends React.Component {
   }
 
   render() {
-    const classNames = cx({
-      'btn btn-default btn-sm': this.props.isButton,
-    });
     if (this.props.isButton) {
       return (
         <>
@@ -123,7 +119,7 @@ export default class ModalTrigger extends React.Component {
     /* eslint-disable jsx-a11y/interactive-supports-focus */
     return (
       <>
-        <span className={classNames} onClick={this.open} role="button">
+        <span onClick={this.open} role="button">
           {this.props.triggerNode}
         </span>
         {this.renderModal()}

superset-frontend/src/components/RefreshChartOverlay.tsx

@@ -53,7 +53,7 @@ class RefreshChartOverlay extends React.PureComponent<Props> {
           <Button
             className="refresh-btn"
             onClick={this.props.onQuery}
-            bsStyle="primary"
+            buttonStyle="primary"
           >
             {t('Run Query')}
           </Button>

superset-frontend/src/dashboard/components/DeleteComponentModal.jsx

@@ -18,7 +18,7 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { t } from '@superset-ui/translation';
 
 import ModalTrigger from '../../components/ModalTrigger';
@@ -66,7 +66,7 @@ export default class DeleteComponentModal extends React.PureComponent {
             </div>
             <div className="dashboard-modal-actions-container">
               <Button onClick={this.close}>{t('Cancel')}</Button>
-              <Button bsStyle="primary" onClick={this.deleteTab}>
+              <Button buttonStyle="primary" onClick={this.deleteTab}>
                 {t('Delete')}
               </Button>
             </div>

superset-frontend/src/dashboard/components/Header.jsx

@@ -26,10 +26,10 @@ import { CategoricalColorNamespace } from '@superset-ui/color';
 import { t } from '@superset-ui/translation';
 
 import Icon from 'src/components/Icon';
+import Button from 'src/components/Button';
 
 import HeaderActionsDropdown from './HeaderActionsDropdown';
 import EditableTitle from '../../components/EditableTitle';
-import Button from '../../components/Button';
 import FaveStar from '../../components/FaveStar';
 import PublishedStatus from './PublishedStatus';
 import UndoRedoKeylisteners from './UndoRedoKeylisteners';
@@ -390,36 +390,40 @@ class Header extends React.PureComponent {
                 <>
                   <ButtonGroup className="m-r-5">
                     <Button
-                      bsSize="small"
+                      buttonSize="small"
                       onClick={onUndo}
                       disabled={undoLength < 1}
-                      bsStyle={this.state.emphasizeUndo ? 'primary' : undefined}
+                      buttonStyle={
+                        this.state.emphasizeUndo ? 'primary' : undefined
+                      }
                     >
                       <i title="Undo" className="undo-action fa fa-reply" />
                       &nbsp;
                     </Button>
                     <Button
-                      bsSize="small"
+                      buttonSize="small"
                       onClick={onRedo}
                       disabled={redoLength < 1}
-                      bsStyle={this.state.emphasizeRedo ? 'primary' : undefined}
+                      buttonStyle={
+                        this.state.emphasizeRedo ? 'primary' : undefined
+                      }
                     >
                       &nbsp;
                       <i title="Redo" className="redo-action fa fa-share" />
                     </Button>
                   </ButtonGroup>
                   <Button
-                    bsSize="small"
+                    buttonSize="small"
                     className="m-r-5"
                     onClick={this.constructor.discardChanges}
-                    bsStyle="default"
+                    buttonStyle="default"
                   >
                     {t('Discard Changes')}
                   </Button>
                   <Button
-                    bsSize="small"
+                    buttonSize="small"
                     disabled={!hasUnsavedChanges}
-                    bsStyle="primary"
+                    buttonStyle="primary"
                     onClick={this.overwriteDashboard}
                   >
                     {t('Save')}

superset-frontend/src/dashboard/components/PropertiesModal.jsx

@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, Button, Modal, FormControl } from 'react-bootstrap';
+import { Row, Col, Modal, FormControl } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Dialog from 'react-bootstrap-dialog';
 import { AsyncSelect } from 'src/components/Select';
 import AceEditor from 'react-ace';
@@ -288,11 +289,7 @@ class PropertiesModal extends React.PureComponent {
             <Row>
               <Col md={12}>
                 <h3 style={{ marginTop: '1em' }}>
-                  <button
+                  <Button buttonStyle="link" onClick={this.toggleAdvanced}>
-                    type="button"
-                    className="text-button"
-                    onClick={this.toggleAdvanced}
-                  >
                     <i
                       className={`fa fa-angle-${
                         isAdvancedOpen ? 'down' : 'right'
@@ -300,7 +297,7 @@ class PropertiesModal extends React.PureComponent {
                       style={{ minWidth: '1em' }}
                     />
                     {t('Advanced')}
-                  </button>
+                  </Button>
                 </h3>
                 {isAdvancedOpen && (
                   <>
@@ -332,14 +329,15 @@ class PropertiesModal extends React.PureComponent {
             <span className="float-right">
               <Button
                 type="submit"
-                bsSize="sm"
+                buttonSize="sm"
-                bsStyle="primary"
+                buttonStyle="primary"
                 className="m-r-5"
                 disabled={errors.length > 0}
+                cta
               >
                 {saveLabel}
               </Button>
-              <Button type="button" bsSize="sm" onClick={onHide}>
+              <Button type="button" buttonSize="sm" onClick={onHide} cta>
                 {t('Cancel')}
               </Button>
               <Dialog

superset-frontend/src/dashboard/components/PublishedStatus.jsx

@@ -19,7 +19,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { t } from '@superset-ui/translation';
-import TooltipWrapper from '../../components/TooltipWrapper';
+import TooltipWrapper from 'src/components/TooltipWrapper';
+import Label from 'src/components/Label';
 
 const propTypes = {
   dashboardId: PropTypes.number.isRequired,
@@ -43,14 +44,6 @@ const publishedTooltip = t(
   'This dashboard is published. Click to make it a draft.',
 );
 
-const divStyle = {
-  border: '1px dotted black',
-  backgroundColor: '#F9F9F9',
-  padding: '3px 7px 3px 7px',
-  fontFamily: 'Monospace',
-  fontSize: '16px',
-};
-
 export default class PublishedStatus extends React.Component {
   componentDidMount() {
     this.togglePublished = this.togglePublished.bind(this);
@@ -71,14 +64,13 @@ export default class PublishedStatus extends React.Component {
             placement="bottom"
             tooltip={draftButtonTooltip}
           >
-            <button
+            <Label
-              style={divStyle}
               onClick={() => {
                 this.togglePublished();
               }}
             >
               Draft
-            </button>
+            </Label>
           </TooltipWrapper>
         );
       }
@@ -88,7 +80,7 @@ export default class PublishedStatus extends React.Component {
           placement="bottom"
           tooltip={draftDivTooltip}
         >
-          <div style={divStyle}>Draft</div>
+          <Label>Draft</Label>
         </TooltipWrapper>
       );
     }
@@ -101,14 +93,13 @@ export default class PublishedStatus extends React.Component {
           placement="bottom"
           tooltip={publishedTooltip}
         >
-          <button
+          <Label
-            style={divStyle}
             onClick={() => {
               this.togglePublished();
             }}
           >
             Published
-          </button>
+          </Label>
         </TooltipWrapper>
       );
     }

superset-frontend/src/dashboard/components/RefreshIntervalModal.jsx

@@ -20,7 +20,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Select from 'src/components/Select';
 import { t } from '@superset-ui/translation';
-import { Alert, Button } from 'react-bootstrap';
+import { Alert } from 'react-bootstrap';
+import Button from 'src/components/Button';
 
 import ModalTrigger from 'src/components/ModalTrigger';
 import FormLabel from 'src/components/FormLabel';
@@ -116,10 +117,10 @@ class RefreshIntervalModal extends React.PureComponent {
         }
         modalFooter={
           <>
-            <Button bsStyle="primary" bsSize="sm" onClick={this.onSave}>
+            <Button buttonStyle="primary" buttonSize="sm" onClick={this.onSave}>
               {editMode ? t('Save') : t('Save for this session')}
             </Button>
-            <Button onClick={this.onCancel} bsSize="sm">
+            <Button onClick={this.onCancel} buttonSize="sm">
               {t('Cancel')}
             </Button>
           </>

superset-frontend/src/dashboard/components/SaveModal.jsx

@@ -19,7 +19,8 @@
 /* eslint-env browser */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormControl, FormGroup, Radio } from 'react-bootstrap';
+import { FormControl, FormGroup, Radio } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { CategoricalColorNamespace } from '@superset-ui/color';
 import { t } from '@superset-ui/translation';
 
@@ -191,7 +192,7 @@ class SaveModal extends React.PureComponent {
         }
         modalFooter={
           <div>
-            <Button bsStyle="primary" onClick={this.saveDashboard}>
+            <Button buttonStyle="primary" onClick={this.saveDashboard}>
               {t('Save')}
             </Button>
           </div>

superset-frontend/src/dashboard/components/filterscope/FilterScopeSelector.jsx

@@ -19,7 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cx from 'classnames';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { t } from '@superset-ui/translation';
 
 import buildFilterScopeTreeEntry from '../../util/buildFilterScopeTreeEntry';
@@ -513,11 +513,11 @@ export default class FilterScopeSelector extends React.PureComponent {
         </div>
 
         <div className="dashboard-modal-actions-container">
-          <Button bsSize="sm" onClick={this.onClose}>
+          <Button buttonSize="sm" onClick={this.onClose}>
             {t('Close')}
           </Button>
           {showSelector && (
-            <Button bsSize="sm" bsStyle="primary" onClick={this.onSave}>
+            <Button buttonSize="sm" buttonStyle="primary" onClick={this.onSave}>
               {t('Save')}
             </Button>
           )}

superset-frontend/src/dashboard/stylesheets/buttons.less

@@ -41,14 +41,3 @@
   padding-left: 8px;
   font-size: @font-size-m;
 }
-
-.text-button {
-  outline: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  background: none;
-  text-decoration: none;
-  font-size: inherit;
-  font-weight: inherit;
-}

superset-frontend/src/datasource/DatasourceEditor.jsx

@@ -784,7 +784,7 @@ export class DatasourceEditor extends React.PureComponent {
                   }
                 />
                 <Button
-                  bsStyle="primary"
+                  buttonStyle="primary"
                   onClick={this.syncMetadata}
                   className="sync-from-source"
                   disabled={!!datasource.sql}

superset-frontend/src/datasource/DatasourceModal.tsx

@@ -17,7 +17,8 @@
  * under the License.
  */
 import React, { FunctionComponent, useState, useRef } from 'react';
-import { Alert, Button, Modal } from 'react-bootstrap';
+import { Alert, Modal } from 'react-bootstrap';
+import Button from 'src/components/Button';
 // @ts-ignore
 import Dialog from 'react-bootstrap-dialog';
 import { t } from '@superset-ui/translation';
@@ -158,8 +159,8 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
       <Modal.Footer>
         <span className="float-left">
           <Button
-            bsSize="sm"
+            buttonSize="sm"
-            bsStyle="default"
+            buttonStyle="default"
             target="_blank"
             href={currentDatasource.edit_url || currentDatasource.url}
           >
@@ -169,15 +170,16 @@ const DatasourceModal: FunctionComponent<DatasourceModalProps> = ({
 
         <span className="float-right">
           <Button
-            bsSize="sm"
+            buttonSize="sm"
-            bsStyle="primary"
+            buttonStyle="primary"
             className="m-r-5"
+            data-test="datasource-modal-save"
             onClick={onClickSave}
             disabled={errors.length > 0}
           >
             {t('Save')}
           </Button>
-          <Button bsSize="sm" onClick={onHide}>
+          <Button buttonSize="sm" onClick={onHide}>
             {t('Cancel')}
           </Button>
           <Dialog ref={dialog} />

superset-frontend/src/explore/components/AdhocFilterEditPopover.jsx

@@ -18,7 +18,9 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Popover, Tab, Tabs } from 'react-bootstrap';
+import { Popover, Tab, Tabs } from 'react-bootstrap';
+import Button from 'src/components/Button';
+import { ThemeProvider } from '@superset-ui/style';
 
 import columnType from '../propTypes/columnType';
 import adhocMetricType from '../propTypes/adhocMetricType';
@@ -40,6 +42,7 @@ const propTypes = {
   ).isRequired,
   datasource: PropTypes.object,
   partitionColumn: PropTypes.string,
+  theme: PropTypes.object,
 };
 
 const startingWidth = 300;
@@ -119,6 +122,7 @@ export default class AdhocFilterEditPopover extends React.Component {
       onResize,
       datasource,
       partitionColumn,
+      theme,
       ...popoverProps
     } = this.props;
 
@@ -129,68 +133,74 @@ export default class AdhocFilterEditPopover extends React.Component {
 
     return (
       <Popover id="filter-edit-popover" {...popoverProps}>
-        <Tabs
+        <ThemeProvider theme={theme}>
-          id="adhoc-filter-edit-tabs"
+          <Tabs
-          defaultActiveKey={adhocFilter.expressionType}
+            id="adhoc-filter-edit-tabs"
-          className="adhoc-filter-edit-tabs"
+            defaultActiveKey={adhocFilter.expressionType}
-          style={{ height: this.state.height, width: this.state.width }}
+            className="adhoc-filter-edit-tabs"
-        >
+            style={{ height: this.state.height, width: this.state.width }}
-          <Tab
-            className="adhoc-filter-edit-tab"
-            eventKey={EXPRESSION_TYPES.SIMPLE}
-            title="Simple"
           >
-            <AdhocFilterEditPopoverSimpleTabContent
+            <Tab
-              adhocFilter={this.state.adhocFilter}
+              className="adhoc-filter-edit-tab"
-              onChange={this.onAdhocFilterChange}
+              eventKey={EXPRESSION_TYPES.SIMPLE}
-              options={options}
+              title="Simple"
-              datasource={datasource}
+            >
-              onHeightChange={this.adjustHeight}
+              <AdhocFilterEditPopoverSimpleTabContent
-              partitionColumn={partitionColumn}
-            />
-          </Tab>
-          <Tab
-            className="adhoc-filter-edit-tab"
-            eventKey={EXPRESSION_TYPES.SQL}
-            title="Custom SQL"
-          >
-            {!this.props.datasource ||
-            this.props.datasource.type !== 'druid' ? (
-              <AdhocFilterEditPopoverSqlTabContent
                 adhocFilter={this.state.adhocFilter}
                 onChange={this.onAdhocFilterChange}
-                options={this.props.options}
+                options={options}
-                height={this.state.height}
+                datasource={datasource}
+                onHeightChange={this.adjustHeight}
+                partitionColumn={partitionColumn}
               />
-            ) : (
+            </Tab>
-              <div className="custom-sql-disabled-message">
+            <Tab
-                Custom SQL Filters are not available on druid datasources
+              className="adhoc-filter-edit-tab"
-              </div>
+              eventKey={EXPRESSION_TYPES.SQL}
-            )}
+              title="Custom SQL"
-          </Tab>
+            >
-        </Tabs>
+              {!this.props.datasource ||
-        <div>
+              this.props.datasource.type !== 'druid' ? (
-          <Button
+                <AdhocFilterEditPopoverSqlTabContent
-            disabled={!stateIsValid}
+                  adhocFilter={this.state.adhocFilter}
-            bsStyle={hasUnsavedChanges && stateIsValid ? 'primary' : 'default'}
+                  onChange={this.onAdhocFilterChange}
-            bsSize="small"
+                  options={this.props.options}
-            className="m-r-5"
+                  height={this.state.height}
-            onClick={this.onSave}
+                />
-          >
+              ) : (
-            Save
+                <div className="custom-sql-disabled-message">
-          </Button>
+                  Custom SQL Filters are not available on druid datasources
-          <Button bsSize="small" onClick={this.props.onClose}>
+                </div>
-            Close
+              )}
-          </Button>
+            </Tab>
-          <i
+          </Tabs>
-            role="button"
+          <div>
-            tabIndex={0}
+            <Button
-            onMouseDown={this.onDragDown}
+              disabled={!stateIsValid}
-            className="fa fa-expand edit-popover-resize text-muted"
+              buttonStyle={
-          />
+                hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
-        </div>
+              }
+              buttonSize="small"
+              className="m-r-5"
+              onClick={this.onSave}
+              cta
+            >
+              Save
+            </Button>
+            <Button buttonSize="small" onClick={this.props.onClose} cta>
+              Close
+            </Button>
+            <i
+              role="button"
+              tabIndex={0}
+              onMouseDown={this.onDragDown}
+              className="fa fa-expand edit-popover-resize text-muted"
+            />
+          </div>
+        </ThemeProvider>
       </Popover>
     );
   }
 }
+
 AdhocFilterEditPopover.propTypes = propTypes;

superset-frontend/src/explore/components/AdhocFilterOption.jsx

@@ -21,6 +21,7 @@ import PropTypes from 'prop-types';
 import { OverlayTrigger } from 'react-bootstrap';
 import { t } from '@superset-ui/translation';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
+import { withTheme } from '@superset-ui/style';
 
 import Label from 'src/components/Label';
 import AdhocFilterEditPopover from './AdhocFilterEditPopover';
@@ -41,8 +42,7 @@ const propTypes = {
   datasource: PropTypes.object,
   partitionColumn: PropTypes.string,
 };
-
+class AdhocFilterOption extends React.PureComponent {
-export default class AdhocFilterOption extends React.PureComponent {
   constructor(props) {
     super(props);
     this.closeFilterEditOverlay = this.closeFilterEditOverlay.bind(this);
@@ -73,7 +73,7 @@ export default class AdhocFilterOption extends React.PureComponent {
   }
 
   render() {
-    const { adhocFilter } = this.props;
+    const { adhocFilter, theme } = this.props;
     const overlay = (
       <AdhocFilterEditPopover
         onResize={this.onPopoverResize}
@@ -83,6 +83,7 @@ export default class AdhocFilterOption extends React.PureComponent {
         options={this.props.options}
         datasource={this.props.datasource}
         partitionColumn={this.props.partitionColumn}
+        theme={theme}
       />
     );
     return (
@@ -123,4 +124,7 @@ export default class AdhocFilterOption extends React.PureComponent {
     );
   }
 }
+
+export default withTheme(AdhocFilterOption);
+
 AdhocFilterOption.propTypes = propTypes;

superset-frontend/src/explore/components/AdhocMetricEditPopover.jsx

@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormGroup, Popover, Tab, Tabs } from 'react-bootstrap';
+import { FormGroup, Popover, Tab, Tabs } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Select from 'src/components/Select';
 import ace from 'brace';
 import AceEditor from 'react-ace';
@@ -27,6 +28,7 @@ import 'brace/theme/github';
 import 'brace/ext/language_tools';
 import { t } from '@superset-ui/translation';
 import { ColumnOption } from '@superset-ui/chart-controls';
+import { ThemeProvider } from '@superset-ui/style';
 
 import FormLabel from 'src/components/FormLabel';
 
@@ -45,6 +47,7 @@ const propTypes = {
   onResize: PropTypes.func.isRequired,
   columns: PropTypes.arrayOf(columnType),
   datasourceType: PropTypes.string,
+  theme: PropTypes.object,
 };
 
 const defaultProps = {
@@ -192,6 +195,7 @@ export default class AdhocMetricEditPopover extends React.Component {
       onClose,
       onResize,
       datasourceType,
+      theme,
       ...popoverProps
     } = this.props;
 
@@ -232,98 +236,104 @@ export default class AdhocMetricEditPopover extends React.Component {
     const hasUnsavedChanges = !adhocMetric.equals(propsAdhocMetric);
     return (
       <Popover id="metrics-edit-popover" title={popoverTitle} {...popoverProps}>
-        <Tabs
+        <ThemeProvider theme={theme}>
-          id="adhoc-metric-edit-tabs"
+          <Tabs
-          defaultActiveKey={adhocMetric.expressionType}
+            id="adhoc-metric-edit-tabs"
-          className="adhoc-metric-edit-tabs"
+            defaultActiveKey={adhocMetric.expressionType}
-          style={{ height: this.state.height, width: this.state.width }}
+            className="adhoc-metric-edit-tabs"
-          onSelect={this.refreshAceEditor}
+            style={{ height: this.state.height, width: this.state.width }}
-          animation={false}
+            onSelect={this.refreshAceEditor}
-        >
+            animation={false}
-          <Tab
-            className="adhoc-metric-edit-tab"
-            eventKey={EXPRESSION_TYPES.SIMPLE}
-            title="Simple"
           >
-            <FormGroup>
+            <Tab
-              <FormLabel>
+              className="adhoc-metric-edit-tab"
-                <strong>column</strong>
+              eventKey={EXPRESSION_TYPES.SIMPLE}
-              </FormLabel>
+              title="Simple"
-              <Select
+            >
-                name="select-column"
-                {...this.selectProps}
-                {...columnSelectProps}
-              />
-            </FormGroup>
-            <FormGroup>
-              <FormLabel>
-                <strong>aggregate</strong>
-              </FormLabel>
-              <Select
-                name="select-aggregate"
-                {...this.selectProps}
-                {...aggregateSelectProps}
-                autoFocus
-              />
-            </FormGroup>
-          </Tab>
-          <Tab
-            className="adhoc-metric-edit-tab"
-            eventKey={EXPRESSION_TYPES.SQL}
-            title="Custom SQL"
-            data-test="adhoc-metric-edit-tab#custom"
-          >
-            {this.props.datasourceType !== 'druid' ? (
               <FormGroup>
-                <AceEditor
+                <FormLabel>
-                  ref={this.handleAceEditorRef}
+                  <strong>column</strong>
-                  mode="sql"
+                </FormLabel>
-                  theme="github"
+                <Select
-                  height={`${this.state.height - 43}px`}
+                  name="select-column"
-                  onChange={this.onSqlExpressionChange}
+                  {...this.selectProps}
-                  width="100%"
+                  {...columnSelectProps}
-                  showGutter={false}
-                  value={
-                    adhocMetric.sqlExpression || adhocMetric.translateToSql()
-                  }
-                  editorProps={{ $blockScrolling: true }}
-                  enableLiveAutocompletion
-                  className="adhoc-filter-sql-editor"
-                  wrapEnabled
                 />
               </FormGroup>
-            ) : (
+              <FormGroup>
-              <div className="custom-sql-disabled-message">
+                <FormLabel>
-                Custom SQL Metrics are not available on druid datasources
+                  <strong>aggregate</strong>
-              </div>
+                </FormLabel>
-            )}
+                <Select
-          </Tab>
+                  name="select-aggregate"
-        </Tabs>
+                  {...this.selectProps}
-        <div>
+                  {...aggregateSelectProps}
-          <Button
+                  autoFocus
-            disabled={!stateIsValid}
+                />
-            bsStyle={hasUnsavedChanges && stateIsValid ? 'primary' : 'default'}
+              </FormGroup>
-            bsSize="small"
+            </Tab>
-            className="m-r-5"
+            <Tab
-            data-test="AdhocMetricEdit#save"
+              className="adhoc-metric-edit-tab"
-            onClick={this.onSave}
+              eventKey={EXPRESSION_TYPES.SQL}
-          >
+              title="Custom SQL"
-            Save
+              data-test="adhoc-metric-edit-tab#custom"
-          </Button>
+            >
-          <Button
+              {this.props.datasourceType !== 'druid' ? (
-            bsSize="small"
+                <FormGroup>
-            onClick={this.props.onClose}
+                  <AceEditor
-            data-test="AdhocMetricEdit#cancel"
+                    ref={this.handleAceEditorRef}
-          >
+                    mode="sql"
-            Close
+                    theme="github"
-          </Button>
+                    height={`${this.state.height - 43}px`}
-          <i
+                    onChange={this.onSqlExpressionChange}
-            role="button"
+                    width="100%"
-            tabIndex={0}
+                    showGutter={false}
-            onMouseDown={this.onDragDown}
+                    value={
-            className="fa fa-expand edit-popover-resize text-muted"
+                      adhocMetric.sqlExpression || adhocMetric.translateToSql()
-          />
+                    }
-        </div>
+                    editorProps={{ $blockScrolling: true }}
+                    enableLiveAutocompletion
+                    className="adhoc-filter-sql-editor"
+                    wrapEnabled
+                  />
+                </FormGroup>
+              ) : (
+                <div className="custom-sql-disabled-message">
+                  Custom SQL Metrics are not available on druid datasources
+                </div>
+              )}
+            </Tab>
+          </Tabs>
+          <div>
+            <Button
+              disabled={!stateIsValid}
+              buttonStyle={
+                hasUnsavedChanges && stateIsValid ? 'primary' : 'default'
+              }
+              buttonSize="small"
+              className="m-r-5"
+              data-test="AdhocMetricEdit#save"
+              onClick={this.onSave}
+              cta
+            >
+              Save
+            </Button>
+            <Button
+              buttonSize="small"
+              onClick={this.props.onClose}
+              data-test="AdhocMetricEdit#cancel"
+              cta
+            >
+              Close
+            </Button>
+            <i
+              role="button"
+              tabIndex={0}
+              onMouseDown={this.onDragDown}
+              className="fa fa-expand edit-popover-resize text-muted"
+            />
+          </div>
+        </ThemeProvider>
       </Popover>
     );
   }

superset-frontend/src/explore/components/AdhocMetricOption.jsx

@@ -19,6 +19,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { OverlayTrigger } from 'react-bootstrap';
+import { withTheme } from '@superset-ui/style';
 
 import Label from 'src/components/Label';
 import AdhocMetricEditPopover from './AdhocMetricEditPopover';
@@ -33,7 +34,7 @@ const propTypes = {
   datasourceType: PropTypes.string,
 };
 
-export default class AdhocMetricOption extends React.PureComponent {
+class AdhocMetricOption extends React.PureComponent {
   constructor(props) {
     super(props);
     this.closeMetricEditOverlay = this.closeMetricEditOverlay.bind(this);
@@ -65,7 +66,7 @@ export default class AdhocMetricOption extends React.PureComponent {
   }
 
   render() {
-    const { adhocMetric } = this.props;
+    const { adhocMetric, theme } = this.props;
     const overlayContent = (
       <AdhocMetricEditPopover
         onResize={this.onPopoverResize}
@@ -74,6 +75,7 @@ export default class AdhocMetricOption extends React.PureComponent {
         onClose={this.closeMetricEditOverlay}
         columns={this.props.columns}
         datasourceType={this.props.datasourceType}
+        theme={theme}
       />
     );
 
@@ -109,4 +111,7 @@ export default class AdhocMetricOption extends React.PureComponent {
     );
   }
 }
+
+export default withTheme(AdhocMetricOption);
+
 AdhocMetricOption.propTypes = propTypes;

superset-frontend/src/explore/components/DisplayQueryButton.jsx

@@ -38,13 +38,13 @@ import {
 import { Table } from 'reactable-arc';
 import { t } from '@superset-ui/translation';
 
+import Button from 'src/components/Button';
 import getClientErrorObject from '../../utils/getClientErrorObject';
 import CopyToClipboard from './../../components/CopyToClipboard';
 import { getChartDataRequest } from '../../chart/chartAction';
 import downloadAsImage from '../../utils/downloadAsImage';
 import Loading from '../../components/Loading';
 import ModalTrigger from './../../components/ModalTrigger';
-import Button from '../../components/Button';
 import RowCountLabel from './RowCountLabel';
 import {
   applyFormattingToTabularData,

superset-frontend/src/explore/components/ExploreActionButtons.jsx

@@ -47,7 +47,7 @@ export default function ExploreActionButtons({
   slice,
 }) {
   const exportToCSVClasses = cx('btn btn-default btn-sm', {
-    'disabled disabledButton': !canDownload,
+    disabled: !canDownload,
   });
   const doExportCSV = exportChart.bind(this, {
     formData: latestQueryFormData,

superset-frontend/src/explore/components/PropertiesModal.tsx

@@ -18,7 +18,6 @@
  */
 import React, { useState, useEffect, useRef } from 'react';
 import {
-  Button,
   Modal,
   Row,
   Col,
@@ -26,6 +25,7 @@ import {
   FormGroup,
   // @ts-ignore
 } from 'react-bootstrap';
+import Button from 'src/components/Button';
 // @ts-ignore
 import Dialog from 'react-bootstrap-dialog';
 import { OptionsType } from 'react-select/src/types';
@@ -263,15 +263,15 @@ function PropertiesModal({ slice, onHide, onSave }: InternalProps) {
         </Row>
       </Modal.Body>
       <Modal.Footer>
-        <Button type="button" bsSize="sm" onClick={onHide}>
+        <Button type="button" buttonSize="sm" onClick={onHide} cta>
           {t('Cancel')}
         </Button>
         <Button
           type="submit"
-          bsSize="sm"
+          buttonSize="sm"
-          bsStyle="primary"
+          buttonStyle="primary"
-          className="m-r-5"
           disabled={!owners || submitting || !name}
+          cta
         >
           {t('Save')}
         </Button>

superset-frontend/src/explore/components/QueryAndSaveBtns.jsx

@@ -19,11 +19,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { ButtonGroup, OverlayTrigger, Tooltip } from 'react-bootstrap';
-import classnames from 'classnames';
 import { t } from '@superset-ui/translation';
 import styled from '@superset-ui/style';
 
-import Button from '../../components/Button';
+import Button from 'src/components/Button';
 import Hotkeys from '../../components/Hotkeys';
 
 const propTypes = {
@@ -61,7 +60,8 @@ const Styles = styled.div`
   align-items: center;
   padding-bottom: ${({ theme }) => 2 * theme.gridUnit}px;
 
-  .save-btn {
+  .btn {
+    /* just to make sure buttons don't jiggle */
     width: 100px;
   }
 `;
@@ -75,12 +75,7 @@ export default function QueryAndSaveBtns({
   chartIsStale,
   errorMessage,
 }) {
-  const saveClasses = classnames({
+  let qryButtonStyle = 'secondary';
-    'disabled disabledButton': !canAdd,
-    'save-btn': true,
-  });
-
-  let qryButtonStyle = 'default';
   if (errorMessage) {
     qryButtonStyle = 'danger';
   } else if (chartIsStale) {
@@ -89,15 +84,21 @@ export default function QueryAndSaveBtns({
 
   const saveButtonDisabled = errorMessage ? true : loading;
   const qryOrStopButton = loading ? (
-    <Button onClick={onStop} bsStyle="warning" className="save-btn">
+    <Button
+      onClick={onStop}
+      buttonStyle="warning"
+      buttonSize="small"
+      disabled={!canAdd}
+    >
       <i className="fa fa-stop-circle-o" /> Stop
     </Button>
   ) : (
     <Button
-      className="query save-btn"
+      buttonSize="small"
       onClick={onQuery}
-      bsStyle={qryButtonStyle}
+      buttonStyle={qryButtonStyle}
       disabled={!!errorMessage}
+      data-test="run-query-button"
     >
       <i className="fa fa-bolt" /> {t('Run')}
     </Button>
@@ -109,7 +110,8 @@ export default function QueryAndSaveBtns({
         <ButtonGroup className="query-and-save">
           {qryOrStopButton}
           <Button
-            className={saveClasses}
+            buttonStyle="secondary"
+            buttonSize="small"
             data-target="#save_modal"
             data-toggle="modal"
             disabled={saveButtonDisabled}

superset-frontend/src/explore/components/SaveModal.jsx

@@ -20,14 +20,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import {
+import { Alert, FormControl, FormGroup, Modal, Radio } from 'react-bootstrap';
-  Alert,
+import Button from 'src/components/Button';
-  Button,
-  FormControl,
-  FormGroup,
-  Modal,
-  Radio,
-} from 'react-bootstrap';
 import FormLabel from 'src/components/FormLabel';
 import { CreatableSelect } from 'src/components/Select/SupersetStyledSelect';
 import { t } from '@superset-ui/translation';
@@ -208,18 +202,12 @@ class SaveModal extends React.Component {
 
         <Modal.Footer>
           <div className="float-right">
-            <Button
+            <Button id="btn_cancel" buttonSize="sm" onClick={this.props.onHide}>
-              type="button"
-              id="btn_cancel"
-              bsSize="sm"
-              onClick={this.props.onHide}
-            >
               {t('Cancel')}
             </Button>
             <Button
-              type="button"
               id="btn_modal_save_goto_dash"
-              bsSize="sm"
+              buttonSize="sm"
               disabled={
                 !this.state.newSliceName || !this.state.newDashboardName
               }
@@ -228,10 +216,9 @@ class SaveModal extends React.Component {
               {t('Save & go to dashboard')}
             </Button>
             <Button
-              type="button"
               id="btn_modal_save"
-              bsSize="sm"
+              buttonSize="sm"
-              bsStyle="primary"
+              buttonStyle="primary"
               onClick={this.saveOrOverwrite.bind(this, false)}
               disabled={!this.state.newSliceName}
             >

superset-frontend/src/explore/components/controls/AnnotationLayer.jsx

@@ -19,13 +19,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { CompactPicker } from 'react-color';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import mathjs from 'mathjs';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 import { getCategoricalSchemeRegistry } from '@superset-ui/color';
 import { getChartMetadataRegistry } from '@superset-ui/chart';
 import { validateNonEmpty } from '@superset-ui/validator';
+import { ThemeProvider } from '@superset-ui/style';
 
 import SelectControl from './SelectControl';
 import TextControl from './TextControl';
@@ -63,6 +64,7 @@ const propTypes = {
   timeColumn: PropTypes.string,
   intervalEndColumn: PropTypes.string,
   vizType: PropTypes.string,
+  theme: PropTypes.object,
 
   error: PropTypes.string,
   colorScheme: PropTypes.string,
@@ -619,8 +621,8 @@ export default class AnnotationLayer extends React.PureComponent {
             />
             <Button
               style={{ marginTop: '0.5rem', marginBottom: '0.5rem' }}
-              bsStyle={color === AUTOMATIC_COLOR ? 'success' : 'default'}
+              buttonStyle={color === AUTOMATIC_COLOR ? 'success' : 'default'}
-              bsSize="xsmall"
+              buttonSize="xsmall"
               onClick={() => this.setState({ color: AUTOMATIC_COLOR })}
             >
               Automatic Color
@@ -661,7 +663,7 @@ export default class AnnotationLayer extends React.PureComponent {
   render() {
     const { isNew, name, annotationType, sourceType, show } = this.state;
     const isValid = this.isValidForm();
-
+    const { theme } = this.props;
     const metadata = getChartMetadataRegistry().get(this.props.vizType);
     const supportedAnnotationTypes = metadata
       ? metadata.supportedAnnotationTypes.map(
@@ -671,7 +673,7 @@ export default class AnnotationLayer extends React.PureComponent {
     const supportedSourceTypes = this.getSupportedSourceTypes(annotationType);
 
     return (
-      <div>
+      <ThemeProvider theme={theme}>
         {this.props.error && (
           <span style={{ color: 'red' }}>ERROR: {this.props.error}</span>
         )}
@@ -724,12 +726,12 @@ export default class AnnotationLayer extends React.PureComponent {
           {this.renderDisplayConfiguration()}
         </div>
         <div style={{ display: 'flex', justifyContent: 'space-between' }}>
-          <Button bsSize="sm" onClick={this.deleteAnnotation}>
+          <Button buttonSize="sm" onClick={this.deleteAnnotation}>
             {!isNew ? t('Remove') : t('Cancel')}
           </Button>
           <div>
             <Button
-              bsSize="sm"
+              buttonSize="sm"
               disabled={!isValid}
               onClick={this.applyAnnotation}
             >
@@ -737,7 +739,7 @@ export default class AnnotationLayer extends React.PureComponent {
             </Button>
 
             <Button
-              bsSize="sm"
+              buttonSize="sm"
               disabled={!isValid}
               onClick={this.submitAnnotation}
             >
@@ -745,7 +747,7 @@ export default class AnnotationLayer extends React.PureComponent {
             </Button>
           </div>
         </div>
-      </div>
+      </ThemeProvider>
     );
   }
 }

superset-frontend/src/explore/components/controls/AnnotationLayerControl.jsx

@@ -26,6 +26,7 @@ import {
 } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import { t } from '@superset-ui/translation';
+import { withTheme } from '@superset-ui/style';
 import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 import { getChartKey } from '../../exploreUtils';
 import { runAnnotationQuery } from '../../../chart/chartAction';
@@ -100,6 +101,7 @@ class AnnotationLayerControl extends React.PureComponent {
 
   renderPopover(parent, annotation, error) {
     const id = !annotation ? '_new' : annotation.name;
+    const { theme } = this.props;
     return (
       <Popover
         style={{ maxWidth: 'none' }}
@@ -116,6 +118,7 @@ class AnnotationLayerControl extends React.PureComponent {
           addAnnotationLayer={this.addAnnotationLayer}
           removeAnnotationLayer={this.removeAnnotationLayer}
           close={() => this.refs[parent].hide()}
+          theme={theme}
         />
       </Popover>
     );
@@ -208,7 +211,9 @@ function mapDispatchToProps(dispatch) {
   };
 }
 
+const themedAnnotationLayerControl = withTheme(AnnotationLayerControl);
+
 export default connect(
   mapStateToProps,
   mapDispatchToProps,
-)(AnnotationLayerControl);
+)(themedAnnotationLayerControl);

superset-frontend/src/explore/components/controls/DateFilterControl.jsx

@@ -19,7 +19,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {
-  Button,
   DropdownButton,
   FormControl,
   FormGroup,
@@ -32,6 +31,7 @@ import {
   Tabs,
   Tooltip,
 } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import Datetime from 'react-datetime';
 import 'react-datetime/css/react-datetime.css';
 import moment from 'moment';
@@ -365,7 +365,7 @@ class DateFilterControl extends React.Component {
             onClick={() => {}}
           />
           <InputGroup.Button onClick={() => this.toggleCalendar(key)}>
-            <Button>
+            <Button theme={this.props.theme}>
               <i className="fa fa-calendar" />
             </Button>
           </InputGroup.Button>
@@ -563,10 +563,11 @@ class DateFilterControl extends React.Component {
           </Tabs>
           <div className="clearfix">
             <Button
-              bsSize="small"
+              buttonSize="small"
               className="float-right ok"
-              bsStyle="primary"
+              buttonStyle="primary"
               onClick={this.close}
+              theme={this.props.theme}
             >
               Ok
             </Button>

superset-frontend/src/explore/components/controls/SpatialControl.jsx

@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, Button, OverlayTrigger, Popover } from 'react-bootstrap';
+import { Row, Col, OverlayTrigger, Popover } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { t } from '@superset-ui/translation';
 
 import Label from 'src/components/Label';
@@ -204,9 +205,9 @@ export default class SpatialControl extends React.Component {
           </PopoverSection>
           <div className="clearfix">
             <Button
-              bsSize="small"
+              buttonSize="small"
               className="float-left ok"
-              bsStyle="primary"
+              buttonStyle="primary"
               onClick={this.close.bind(this)}
             >
               Ok

superset-frontend/src/explore/components/controls/TextAreaControl.jsx

@@ -18,7 +18,8 @@
  */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormGroup, FormControl } from 'react-bootstrap';
+import { FormGroup, FormControl } from 'react-bootstrap';
+import Button from 'src/components/Button';
 
 import AceEditor from 'react-ace';
 import 'brace/mode/sql';
@@ -121,7 +122,7 @@ export default class TextAreaControl extends React.Component {
             bsSize="large"
             modalTitle={controlHeader}
             triggerNode={
-              <Button bsSize="small" className="m-t-5">
+              <Button buttonSize="small" className="m-t-5">
                 {t('Edit')} <strong>{this.props.language}</strong>{' '}
                 {t('in modal')}
               </Button>

superset-frontend/src/views/CRUD/data/dataset/Button.tsx

@@ -1,72 +0,0 @@
-/**
- * Licensed to the Apache Software Foundation (ASF) under one
- * or more contributor license agreements.  See the NOTICE file
- * distributed with this work for additional information
- * regarding copyright ownership.  The ASF licenses this file
- * to you under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance
- * with the License.  You may obtain a copy of the License at
- *
- *   http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied.  See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-import React from 'react';
-import styled from '@superset-ui/style';
-import BaseButton from 'src/components/Button';
-
-interface ModalProps {
-  children: React.ReactNode;
-  disabled?: boolean;
-  onClick: () => void;
-  padding?: number;
-  bsStyle?: 'default' | 'primary' | 'danger';
-  width?: number;
-}
-
-const StyledButton = styled(BaseButton)`
-  border-radius: ${({ theme }) => theme.borderRadius}px;
-  border: none;
-  padding: ${(props: ModalProps) => props.padding || 8}px;
-  text-transform: uppercase;
-  width: ${(props: ModalProps) => props.width || 160}px;
-
-  &.btn,
-  &.btn:hover {
-    background-color: ${({ theme }) => theme.colors.primary.light4};
-    color: ${({ theme }) => theme.colors.primary.base};
-  }
-  &.btn[disabled],
-  &.btn[disabled]:hover {
-    background-color: ${({ theme }) => theme.colors.grayscale.light2};
-    color: ${({ theme }) => theme.colors.grayscale.light1};
-  }
-  &.btn-primary,
-  &.btn-primary:hover {
-    background-color: ${({ theme }) => theme.colors.primary.base};
-    color: ${({ theme }) => theme.colors.grayscale.light5};
-  }
-  &.btn-danger,
-  &.btn-danger:hover {
-    background-color: ${({ theme }) => theme.colors.error.base};
-    color: ${({ theme }) => theme.colors.grayscale.light5};
-  }
-`;
-
-export default function Modal({
-  bsStyle = 'default',
-  disabled,
-  onClick,
-  children,
-}: ModalProps) {
-  return (
-    <StyledButton disabled={disabled} bsStyle={bsStyle} onClick={onClick}>
-      {children}
-    </StyledButton>
-  );
-}

superset-frontend/src/visualizations/FilterBox/FilterBox.jsx

@@ -21,7 +21,7 @@ import PropTypes from 'prop-types';
 import { debounce } from 'lodash';
 import { max as d3Max } from 'd3-array';
 import { AsyncCreatableSelect, CreatableSelect } from 'src/components/Select';
-import { Button } from 'react-bootstrap';
+import Button from 'src/components/Button';
 import { t } from '@superset-ui/translation';
 import { SupersetClient } from '@superset-ui/connection';
 import styled from '@superset-ui/style';
@@ -438,8 +438,8 @@ class FilterBox extends React.Component {
         {this.renderFilters()}
         {!instantFiltering && (
           <Button
-            bsSize="small"
+            buttonSize="small"
-            bsStyle="primary"
+            buttonStyle="primary"
             onClick={this.clickApply.bind(this)}
             disabled={!this.state.hasChanged}
           >

superset-frontend/stylesheets/superset.less

@@ -196,6 +196,10 @@ table.table-no-hover tr:hover {
   background-color: initial;
 }
 
+.editable-title {
+  margin-right: 8px;
+}
+
 .editable-title input {
   outline: none;
   background: transparent;

superset/assets/src/SqlLab/components/ExploreCtasResultsButton.jsx

@@ -26,7 +26,7 @@ import { InfoTooltipWithTrigger } from '@superset-ui/chart-controls';
 
 import { exploreChart } from '../../explore/exploreUtils';
 import * as actions from '../actions/sqlLab';
-import Button from '../../components/Button';
+import Button from 'src/components/Button';
 
 const propTypes = {
   actions: PropTypes.object.isRequired,
@@ -88,7 +88,7 @@ class ExploreCtasResultsButton extends React.PureComponent {
     return (
       <>
         <Button
-          bsSize="small"
+          buttonSize="small"
           onClick={this.onClick}
           tooltip={t('Explore the result set in the data exploration view')}
         >