diff --git a/jsapp/js/account/accountSettings.scss b/jsapp/js/account/accountSettings.scss
index c79fef751a..f22ec9e19f 100644
--- a/jsapp/js/account/accountSettings.scss
+++ b/jsapp/js/account/accountSettings.scss
@@ -79,10 +79,6 @@
     .account-settings-save:last-child {
       margin-right: sizes.$x50;
     }
-
-    .account-settings-close {
-      padding: 0 12px;
-    }
   }
 
   .form-modal__item {
diff --git a/jsapp/js/account/changePasswordRoute.component.tsx b/jsapp/js/account/changePasswordRoute.component.tsx
index 7122b1c98b..8cde65feb1 100644
--- a/jsapp/js/account/changePasswordRoute.component.tsx
+++ b/jsapp/js/account/changePasswordRoute.component.tsx
@@ -9,6 +9,7 @@ import type {WithRouterProps} from 'jsapp/js/router/legacy';
 import './accountSettings.scss';
 import styles from './changePasswordRoute.module.scss';
 import UpdatePasswordForm from './security/password/updatePasswordForm.component';
+import Button from 'js/components/common/button';
 
 bem.AccountSettings = makeBem(null, 'account-settings');
 bem.AccountSettings__left = makeBem(bem.AccountSettings, 'left');
@@ -33,12 +34,13 @@ const ChangePasswordRoute = class ChangePassword extends React.Component<WithRou
       <DocumentTitle title={`${accountName} | KoboToolbox`}>
         <bem.AccountSettings>
           <bem.AccountSettings__actions>
-            <button
+            <Button
+              type='bare'
+              color='storm'
+              size='l'
+              startIcon='close'
               onClick={this.close.bind(this)}
-              className='account-settings-close mdl-button mdl-button--icon'
-            >
-              <i className='k-icon k-icon-close' />
-            </button>
+            />
           </bem.AccountSettings__actions>
 
           <bem.AccountSettings__item m='column'>
diff --git a/jsapp/js/bemComponents.ts b/jsapp/js/bemComponents.ts
index 4a83f0bd37..dc1045a95d 100644
--- a/jsapp/js/bemComponents.ts
+++ b/jsapp/js/bemComponents.ts
@@ -6,17 +6,6 @@
 
 import bem, {makeBem} from 'js/bem';
 
-// DEPRECATED: please don't use this component. From now on, we will only use
-// the `Button` component (from `js/components/common/button`) as it covers
-// all possible cases.
-bem.Button = makeBem(null, 'mdl-button', 'button');
-bem.KoboButton = makeBem(null, 'kobo-button', 'button');
-bem.KoboLightButton = makeBem(null, 'kobo-light-button', 'button');
-bem.KoboTextButton = makeBem(null, 'kobo-text-button', 'button');
-// END DEPRECATED
-
-bem.KoboLightBadge = makeBem(null, 'kobo-light-badge', 'span');
-
 bem.KoboSelect = makeBem(null, 'kobo-select');
 bem.KoboSelect__wrapper = makeBem(bem.KoboSelect, 'wrapper');
 bem.KoboSelect__label = makeBem(bem.KoboSelect, 'label', 'span');
@@ -31,13 +20,10 @@ bem.EmptyContent = makeBem(null, 'empty-content', 'section');
 bem.EmptyContent__icon = makeBem(bem.EmptyContent, 'icon', 'i');
 bem.EmptyContent__title = makeBem(bem.EmptyContent, 'title', 'h1');
 bem.EmptyContent__message = makeBem(bem.EmptyContent, 'message', 'p');
-bem.EmptyContent__button = makeBem(bem.EmptyContent, 'button', 'button');
 
 bem.ServiceRow = makeBem(null, 'service-row');
 bem.ServiceRow__column = makeBem(bem.ServiceRow, 'column');
-bem.ServiceRow__actionButton = makeBem(bem.ServiceRow, 'action-button', 'button');
 bem.ServiceRow__linkOverlay = makeBem(bem.ServiceRow, 'link-overlay', 'a');
-bem.ServiceRowButton = makeBem(null, 'service-row-button', 'button');
 
 bem.FormBuilder = makeBem(null, 'form-builder');
 bem.FormBuilder__contents = makeBem(bem.FormBuilder, 'contents');
@@ -55,8 +41,6 @@ bem.FormBuilderHeader = makeBem(null, 'form-builder-header');
 bem.FormBuilderHeader__row = makeBem(bem.FormBuilderHeader, 'row');
 bem.FormBuilderHeader__cell = makeBem(bem.FormBuilderHeader, 'cell');
 bem.FormBuilderHeader__item = makeBem(bem.FormBuilderHeader, 'item', 'span');
-bem.FormBuilderHeader__button = makeBem(bem.FormBuilderHeader, 'button', 'button');
-bem.FormBuilderHeader__close = makeBem(bem.FormBuilderHeader, 'close', 'button');
 
 bem.FormMedia = makeBem(null, 'form-media');
 bem.FormMedia__title = makeBem(bem.FormMedia, 'title');
@@ -101,16 +85,6 @@ bem.TableMeta__bulkOptions = makeBem(bem.TableMeta, 'bulk-options');
 
 bem.CollectionsWrapper = makeBem(null, 'collections-wrapper');
 
-bem.CollectionNav = makeBem(null, 'collection-nav');
-bem.CollectionNav__search = makeBem(bem.CollectionNav, 'search');
-bem.CollectionNav__searchcriteria = makeBem(bem.CollectionNav, 'searchcriteria', 'ul');
-bem.CollectionNav__searchcriterion = makeBem(bem.CollectionNav, 'searchcriterion', 'li');
-bem.CollectionNav__actions = makeBem(bem.CollectionNav, 'actions');
-bem.CollectionNav__button = makeBem(bem.CollectionNav, 'button', 'button');
-bem.CollectionNav__link = makeBem(bem.CollectionNav, 'link', 'a');
-bem.CollectionNav__searchcancel = makeBem(bem.CollectionNav, 'searchcancel', 'i');
-bem.CollectionNav__searchicon = makeBem(bem.CollectionNav, 'searchicon', 'i');
-
 bem.FormView = makeBem(null, 'form-view');
 // used in header.es6
 bem.FormView__title = makeBem(bem.FormView, 'title');
@@ -123,7 +97,6 @@ bem.FormView__sidetabs = makeBem(bem.FormView, 'sidetabs');
 bem.FormView__label = makeBem(bem.FormView, 'label');
 bem.FormView__group = makeBem(bem.FormView, 'group');
 bem.FormView__item = makeBem(bem.FormView, 'item');
-bem.FormView__iconButton = makeBem(bem.FormView, 'icon-button', 'button');
 
 bem.FormView__row = makeBem(bem.FormView, 'row');
 bem.FormView__cell = makeBem(bem.FormView, 'cell');
@@ -131,9 +104,6 @@ bem.FormView__cellLabel = makeBem(bem.FormView, 'cell-label');
 bem.FormView__column = makeBem(bem.FormView, 'column');
 
 bem.FormView__banner = makeBem(bem.FormView, 'banner');
-bem.FormView__link = makeBem(bem.FormView, 'link', 'a');
-bem.FormView__secondaryButtons = makeBem(bem.FormView, 'secondaryButtons');
-bem.FormView__secondaryButton = makeBem(bem.FormView, 'secondaryButton', 'button');
 bem.FormView__reportButtons = makeBem(bem.FormView, 'reportButtons');
 bem.FormView__form = makeBem(bem.FormView, 'form', 'form');
 
@@ -147,7 +117,6 @@ bem.ReportView__item = makeBem(bem.ReportView, 'item');
 bem.ReportView__itemHeading = makeBem(bem.ReportView, 'itemHeading');
 bem.ReportView__headingMeta = makeBem(bem.ReportView, 'headingMeta');
 bem.ReportView__itemContent = makeBem(bem.ReportView, 'itemContent');
-bem.ReportView__headingButton = makeBem(bem.ReportView, 'headingButton', 'button');
 bem.ReportView__chart = makeBem(bem.ReportView, 'chart');
 
 bem.GraphSettings = makeBem(null, 'graph-settings');
@@ -236,7 +205,6 @@ bem.Breadcrumbs__divider = makeBem(bem.Breadcrumbs, 'divider', 'i');
 bem.AssetInfoBox = makeBem(null, 'asset-info-box');
 bem.AssetInfoBox__column = makeBem(bem.AssetInfoBox, 'column');
 bem.AssetInfoBox__cell = makeBem(bem.AssetInfoBox, 'cell');
-bem.AssetInfoBox__toggle = makeBem(bem.AssetInfoBox, 'toggle', 'button');
 
 bem.PrintOnly = makeBem(null, 'print-only');
 
@@ -245,13 +213,11 @@ bem.ProjectDownloads__advancedView = makeBem(bem.ProjectDownloads, 'advanced-vie
 bem.ProjectDownloads__column = makeBem(bem.ProjectDownloads, 'column');
 bem.ProjectDownloads__columnRow = makeBem(bem.ProjectDownloads, 'column-row');
 bem.ProjectDownloads__title = makeBem(bem.ProjectDownloads, 'title', 'span');
-bem.ProjectDownloads__textButton = makeBem(bem.ProjectDownloads, 'text-button', 'button');
 bem.ProjectDownloads__selectorRow = makeBem(bem.ProjectDownloads, 'selector-row');
 bem.ProjectDownloads__anonymousRow = makeBem(bem.ProjectDownloads, 'anonymous-row');
 bem.ProjectDownloads__legacyIframeWrapper = makeBem(bem.ProjectDownloads, 'legacy-iframe-wrapper');
 bem.ProjectDownloads__submitRow = makeBem(bem.ProjectDownloads, 'submit-row', 'footer');
 bem.ProjectDownloads__exportsSelector = makeBem(bem.ProjectDownloads, 'exports-selector');
-bem.ProjectDownloads__deleteSettingsButton = makeBem(bem.ProjectDownloads, 'delete-settings-button', 'button');
 bem.ProjectDownloads__exportsCreator = makeBem(bem.ProjectDownloads, 'exports-creator');
 
 bem.BackgroundAudioPlayer = makeBem(null, 'background-audio-player');
diff --git a/jsapp/js/components/RESTServices.scss b/jsapp/js/components/RESTServices.scss
index 56e18b904b..33de8a3cae 100644
--- a/jsapp/js/components/RESTServices.scss
+++ b/jsapp/js/components/RESTServices.scss
@@ -53,14 +53,6 @@
   }
 
   .rest-services-list__header-right {float: right;}
-
-  .rest-services-list__header-back-button {
-    @extend .mdl-button, .mdl-button--icon;
-
-    i {
-      vertical-align: middle;
-    }
-  }
 }
 
 // custom styles for RESTServicesForm
diff --git a/jsapp/js/components/RESTServices/RESTServiceLogs.es6 b/jsapp/js/components/RESTServices/RESTServiceLogs.es6
index 7c5133198d..de8f6b04f0 100644
--- a/jsapp/js/components/RESTServices/RESTServiceLogs.es6
+++ b/jsapp/js/components/RESTServices/RESTServiceLogs.es6
@@ -15,6 +15,7 @@ import {
   HOOK_LOG_STATUSES,
   MODAL_TYPES
 } from '../../constants';
+import Button from 'js/components/common/button';
 
 export default class RESTServiceLogs extends React.Component {
   constructor(props){
@@ -203,13 +204,16 @@ export default class RESTServiceLogs extends React.Component {
   renderHeader() {
     return (
       <header className='rest-services-list__header'>
-        <a
-          className='rest-services-list__header-back-button'
-          href={`/#/forms/${this.state.assetUid}/settings/rest`}
-        >
-          <i className='k-icon k-icon-angle-left' />
-          {t('Back to REST Services')}
-        </a>
+        <Button
+          type='frame'
+          color='storm'
+          size='m'
+          onClick={() => {
+            window.location.assign(`/#/forms/${this.state.assetUid}/settings/rest`);
+          }}
+          startIcon='angle-left'
+          label={t('Back to REST Services')}
+        />
 
         <h2 className='rest-services-list__header-label rest-services-list__header-label--big'>
           {this.state.hookName}
@@ -224,12 +228,14 @@ export default class RESTServiceLogs extends React.Component {
     }
 
     return (
-      <bem.ServiceRowButton
-        m={this.state.isLoadingLogs ? 'loading' : null}
-        onClick={this.loadMore}
-      >
-        {this.state.isLoadingLogs ? t('Loading…') : t('Load more')}
-      </bem.ServiceRowButton>
+      <Button
+        type='frame'
+        color='blue'
+        size='l'
+        isPending={this.state.isLoadingLogs}
+        onClick={this.loadMore.bind(this)}
+        label={t('Load more')}
+      />
     );
   }
 
@@ -261,13 +267,15 @@ export default class RESTServiceLogs extends React.Component {
               <bem.ServiceRow__column m='status'>
                 {t('Status')}
                 { this.hasAnyFailedLogs() &&
-                  <bem.ServiceRow__actionButton
+                  <Button
+                    type='bare'
+                    color='storm'
+                    size='m'
                     onClick={this.retryAll.bind(this)}
-                    data-tip={t('Retry all submissions')}
-                    disabled={!this.state.isHookActive}
-                  >
-                    <i className='k-icon k-icon-replace'/>
-                  </bem.ServiceRow__actionButton>
+                    tooltip={t('Retry all submissions')}
+                    isDisabled={!this.state.isHookActive}
+                    startIcon='replace'
+                  />
                 }
               </bem.ServiceRow__column>
               <bem.ServiceRow__column m='date'>{t('Date')}</bem.ServiceRow__column>
@@ -310,22 +318,26 @@ export default class RESTServiceLogs extends React.Component {
                     {statusLabel}
 
                     {log.status === HOOK_LOG_STATUSES.FAILED &&
-                      <bem.ServiceRow__actionButton
-                        disabled={!this.state.isHookActive}
+                      <Button
+                        type='bare'
+                        color='storm'
+                        size='m'
+                        isDisabled={!this.state.isHookActive}
                         onClick={this.retryLog.bind(this, log)}
-                        data-tip={t('Retry submission')}
-                      >
-                        <i className='k-icon k-icon-replace' />
-                      </bem.ServiceRow__actionButton>
+                        tooltip={t('Retry submission')}
+                        startIcon='replace'
+                      />
                     }
 
                     {this.hasInfoToDisplay(log) &&
-                      <bem.ServiceRow__actionButton
+                      <Button
+                        type='bare'
+                        color='storm'
+                        size='m'
                         onClick={this.showLogInfo.bind(this, log)}
-                        data-tip={t('More info')}
-                      >
-                        <i className='k-icon k-icon-information' />
-                      </bem.ServiceRow__actionButton>
+                        tooltip={t('More info')}
+                        startIcon='information'
+                      />
                     }
                   </bem.ServiceRow__column>
 
diff --git a/jsapp/js/components/RESTServices/RESTServicesForm.es6 b/jsapp/js/components/RESTServices/RESTServicesForm.es6
index 3d966631cf..c7f04a07f8 100644
--- a/jsapp/js/components/RESTServices/RESTServicesForm.es6
+++ b/jsapp/js/components/RESTServices/RESTServicesForm.es6
@@ -1,7 +1,6 @@
 import React from 'react';
 import autoBind from 'react-autobind';
 import KoboTagsInput from 'js/components/common/koboTagsInput';
-import alertify from 'alertifyjs';
 import bem from 'js/bem';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
 import {dataInterface} from '../../dataInterface';
@@ -14,6 +13,7 @@ import {KEY_CODES} from 'js/constants';
 import envStore from 'js/envStore';
 import {notify} from 'js/utils';
 import pageState from 'js/pageState.store';
+import Button from 'js/components/common/button';
 
 const EXPORT_TYPES = {
   json: {
@@ -335,6 +335,8 @@ export default class RESTServicesForm extends React.Component {
         </label>
 
         {this.state.customHeaders.map((item, n) => {
+          // TODO change these inputs into `<TextBox>`es, make sure that that
+          // weird onChange handling is turned into something less confusing
           return (
             <bem.FormModal__item m='http-header-row' key={n}>
               <input
@@ -344,8 +346,8 @@ export default class RESTServicesForm extends React.Component {
                 name='headerName'
                 value={this.state.customHeaders[n].name}
                 data-index={n}
-                onChange={this.handleCustomHeaderChange}
-                onKeyPress={this.onCustomHeaderInputKeyPress}
+                onChange={this.handleCustomHeaderChange.bind(this)}
+                onKeyPress={this.onCustomHeaderInputKeyPress.bind(this)}
               />
 
               <input
@@ -355,29 +357,31 @@ export default class RESTServicesForm extends React.Component {
                 name='headerValue'
                 value={this.state.customHeaders[n].value}
                 data-index={n}
-                onChange={this.handleCustomHeaderChange}
-                onKeyPress={this.onCustomHeaderInputKeyPress}
+                onChange={this.handleCustomHeaderChange.bind(this)}
+                onKeyPress={this.onCustomHeaderInputKeyPress.bind(this)}
               />
 
-              <bem.Button
-                m='icon'
+              <Button
+                type='bare'
+                color='red'
+                size='m'
                 className='http-header-row-remove'
                 data-index={n}
-                onClick={this.removeCustomHeaderRow}
-              >
-                <i className='k-icon k-icon-trash'/>
-              </bem.Button>
+                startIcon='trash'
+                onClick={this.removeCustomHeaderRow.bind(this)}
+              />
             </bem.FormModal__item>
           );
         })}
 
-        <bem.KoboButton
-          m='small'
-          onClick={this.addNewCustomHeaderRow}
-        >
-          <i className='k-icon k-icon-plus' />
-          {t('Add header')}
-        </bem.KoboButton>
+        <Button
+          type='full'
+          color='storm'
+          size='s'
+          startIcon='plus'
+          onClick={this.addNewCustomHeaderRow.bind(this)}
+          label={t('Add header')}
+        />
       </bem.FormModal__item>
     );
   }
@@ -521,13 +525,14 @@ export default class RESTServicesForm extends React.Component {
           </bem.FormModal__item>
 
           <bem.Modal__footer>
-            <bem.KoboButton
-              m='blue'
-              onClick={this.onSubmit}
-              disabled={this.state.isSubmitPending}
-            >
-              { isEditingExistingHook ? t('Save') : t('Create') }
-            </bem.KoboButton>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              onClick={this.onSubmit.bind(this)}
+              isDisabled={this.state.isSubmitPending}
+              label={isEditingExistingHook ? t('Save') : t('Create')}
+            />
           </bem.Modal__footer>
         </bem.FormModal__form>
       );
diff --git a/jsapp/js/components/RESTServices/RESTServicesList.es6 b/jsapp/js/components/RESTServices/RESTServicesList.es6
index c2dd03caa0..1ebf3ea0f7 100644
--- a/jsapp/js/components/RESTServices/RESTServicesList.es6
+++ b/jsapp/js/components/RESTServices/RESTServicesList.es6
@@ -13,6 +13,7 @@ import {
   escapeHtml,
 } from 'js/utils';
 import pageState from 'js/pageState.store';
+import Button from 'js/components/common/button';
 
 const REST_SERVICES_SUPPORT_URL = 'rest_services.html';
 
@@ -59,17 +60,15 @@ export default class RESTServicesList extends React.Component {
     })
   }
 
-  editHook(evt) {
+  editHook(hookUid) {
     pageState.showModal({
       assetUid: this.state.assetUid,
       type: MODAL_TYPES.REST_SERVICES,
-      hookUid: evt.currentTarget.dataset.hookUid
+      hookUid: hookUid
     });
   }
 
-  deleteHookSafe(evt) {
-    const hookName = evt.currentTarget.dataset.hookName;
-    const hookUid = evt.currentTarget.dataset.hookUid;
+  deleteHookSafe(hookUid, hookName) {
     if (this.state.assetUid) {
       const dialog = alertify.dialog('confirm');
       const title = t('Are you sure you want to delete ##target?')
@@ -107,12 +106,13 @@ export default class RESTServicesList extends React.Component {
 
   renderModalButton() {
     return (
-      <bem.KoboButton
-        m='blue'
+      <Button
+        type='full'
+        color='blue'
+        size='l'
         onClick={this.openNewRESTServiceModal}
-      >
-        {t('Register a New Service')}
-      </bem.KoboButton>
+        label={t('Register a New Service')}
+      />
     );
   }
 
@@ -181,22 +181,25 @@ export default class RESTServicesList extends React.Component {
                   <bem.ServiceRow__column m='count'>{hook.failed_count}</bem.ServiceRow__column>
 
                   <bem.ServiceRow__column m='actions'>
-                    <bem.ServiceRow__actionButton
-                      onClick={this.editHook}
-                      data-hook-uid={hook.uid}
-                      data-tip={t('Edit')}
-                    >
-                      <i className='k-icon k-icon-edit' />
-                    </bem.ServiceRow__actionButton>
-
-                    <bem.ServiceRow__actionButton
-                      onClick={this.deleteHookSafe.bind(this)}
-                      data-hook-name={hook.name}
-                      data-hook-uid={hook.uid}
-                      data-tip={t('Delete')}
-                    >
-                      <i className='k-icon k-icon-trash' />
-                    </bem.ServiceRow__actionButton>
+                    <Button
+                      type='bare'
+                      color='storm'
+                      size='m'
+                      onClick={() => this.editHook(hook.uid)}
+                      tooltip={t('Edit')}
+                      tooltipPosition='right'
+                      startIcon='edit'
+                    />
+
+                    <Button
+                      type='bare'
+                      color='red'
+                      size='m'
+                      onClick={() => this.deleteHookSafe(hook.uid, hook.name)}
+                      tooltip={t('Delete')}
+                      tooltipPosition='right'
+                      startIcon='trash'
+                    />
                   </bem.ServiceRow__column>
                 </bem.ServiceRow>
               );
diff --git a/jsapp/js/components/assetsTable/assetActionButtons.scss b/jsapp/js/components/assetsTable/assetActionButtons.scss
index e541b5cc2b..88b07d1a56 100644
--- a/jsapp/js/components/assetsTable/assetActionButtons.scss
+++ b/jsapp/js/components/assetsTable/assetActionButtons.scss
@@ -16,99 +16,3 @@
     display: block;
   }
 }
-
-.asset-action-buttons .k-icon,
-.asset-action-buttons__button .k-icon,
-.asset-action-buttons__icon-button .k-icon {
-  font-size: 24px;
-  margin: 0 3px;
-  color: inherit;
-}
-
-.asset-action-buttons__button,
-.asset-action-buttons__icon-button {
-  display: block;
-  cursor: pointer;
-
-  .k-icon {
-    display: block;
-  }
-}
-
-.asset-action-buttons__button {
-  border-radius: 3px;
-  font-size: 0.9em;
-  font-weight: 500;
-  text-transform: uppercase;
-  overflow: hidden;
-  position: relative;
-  padding: 5px 8px 5px 30px;
-  color: colors.$kobo-gray-40;
-  background-color: transparent;
-  border: 1px solid currentColor;
-
-  &:hover {
-    color: colors.$kobo-white;
-    background-color: colors.$kobo-gray-40;
-    border-color: colors.$kobo-gray-40;
-  }
-
-  &:active {
-    transform: translateY(1px);
-  }
-
-  &[disabled] {
-    pointer-events: none;
-
-    &.asset-action-buttons__button--on,
-    &.asset-action-buttons__button--off {
-      color: colors.$kobo-gray-65;
-    }
-  }
-
-  &.asset-action-buttons__button--pending {
-    &.asset-action-buttons__button--on,
-    &.asset-action-buttons__button--off {
-      padding-left: 8px;
-    }
-  }
-
-  .k-icon {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    left: 0;
-  }
-
-  &.asset-action-buttons__button--on {
-    color: colors.$kobo-teal;
-
-    &:hover {
-      color: colors.$kobo-white;
-      background-color: colors.$kobo-teal;
-      border-color: colors.$kobo-teal;
-    }
-  }
-
-  &.asset-action-buttons__button--off {
-    color: colors.$kobo-red;
-
-    &:hover {
-      color: colors.$kobo-white;
-      background-color: colors.$kobo-red;
-      border-color: colors.$kobo-red;
-    }
-  }
-}
-
-.asset-action-buttons__icon-button {
-  color: colors.$kobo-gray-40;
-
-  &:hover {
-    color: colors.$kobo-blue;
-  }
-}
-
-.asset-action-buttons__button + .asset-action-buttons__icon-button {
-  margin-left: 5px;
-}
diff --git a/jsapp/js/components/assetsTable/assetActionButtons.tsx b/jsapp/js/components/assetsTable/assetActionButtons.tsx
index a98c2afdd3..ca4dc83764 100644
--- a/jsapp/js/components/assetsTable/assetActionButtons.tsx
+++ b/jsapp/js/components/assetsTable/assetActionButtons.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import autoBind from 'react-autobind';
 import debounce from 'lodash.debounce';
 import PopoverMenu from 'js/popoverMenu';
-import bem, {makeBem} from 'js/bem';
+import bem from 'js/bem';
 import {actions} from 'js/actions';
 import assetUtils from 'js/assetUtils';
 import {ASSET_TYPES, ACCESS_TYPES} from 'js/constants';
@@ -41,14 +41,10 @@ import {
   manageAssetSettings
 } from 'jsapp/js/assetQuickActions';
 import {userCan} from 'js/components/permissions/utils';
-
-bem.AssetActionButtons = makeBem(null, 'asset-action-buttons', 'menu');
-bem.AssetActionButtons__button = makeBem(bem.AssetActionButtons, 'button', 'a');
-bem.AssetActionButtons__iconButton = makeBem(
-  bem.AssetActionButtons,
-  'icon-button',
-  'a'
-);
+import {Link} from 'react-router-dom';
+import Button from 'js/components/common/button';
+import type {ButtonColor} from 'js/components/common/button';
+import type {IconName} from 'jsapp/fonts/k-icons';
 
 interface AssetActionButtonsProps extends WithRouterProps {
   asset: AssetResponse;
@@ -260,9 +256,14 @@ class AssetActionButtons extends React.Component<
     }
 
     return (
-      <div className='right-tooltip' data-tip={t('More actions')}>
-        <i className='k-icon k-icon-more' />
-      </div>
+      <Button
+        type='bare'
+        color='storm'
+        size='m'
+        tooltip={t('More actions')}
+        tooltipPosition='right'
+        startIcon='more'
+      />
     );
   }
 
@@ -392,7 +393,7 @@ class AssetActionButtons extends React.Component<
           )}
 
         {userCanEdit && userCanDelete && (
-          <bem.PopoverMenu__link onClick={this.delete}>
+          <bem.PopoverMenu__link onClick={this.delete} m='red'>
             <i className='k-icon k-icon-trash' />
             {t('Delete')}
           </bem.PopoverMenu__link>
@@ -413,34 +414,28 @@ class AssetActionButtons extends React.Component<
       isPublic &&
       this.props.asset.asset_type === ASSET_TYPES.collection.id
     ) {
-      const modifiers = isUserSubscribed ? ['off'] : ['on'];
-      const fn = isUserSubscribed
-        ? this.unsubscribeFromCollection.bind(this)
-        : this.subscribeToCollection.bind(this);
-      if (this.state.isSubscribePending) {
-        modifiers.push('pending');
-      }
-      let icon = null;
-      let title = t('Pending…');
-      if (!this.state.isSubscribePending) {
-        if (isUserSubscribed) {
-          icon = <i className='k-icon k-icon-close' />;
-          title = t('Unsubscribe');
-        } else {
-          icon = <i className='k-icon k-icon-subscribe' />;
-          title = t('Subscribe');
-        }
+      let color: ButtonColor = 'teal';
+      let callbackFunction = this.subscribeToCollection.bind(this);
+      let icon: IconName = 'subscribe';
+      let label = t('Subscribe');
+
+      if (isUserSubscribed) {
+        color = 'red';
+        callbackFunction = this.unsubscribeFromCollection.bind(this);
+        icon = 'close';
+        label = t('Unsubscribe');
       }
 
       return (
-        <bem.AssetActionButtons__button
-          m={modifiers}
-          onClick={fn}
-          disabled={this.state.isSubscribePending}
-        >
-          {icon}
-          {title}
-        </bem.AssetActionButtons__button>
+        <Button
+          type='frame'
+          color={color}
+          size='m'
+          onClick={callbackFunction}
+          startIcon={icon}
+          label={label}
+          isPending={this.state.isSubscribePending}
+        />
       );
     }
 
@@ -461,86 +456,102 @@ class AssetActionButtons extends React.Component<
     const routeAssetUid = getRouteAssetUid();
 
     return (
-      <bem.AssetActionButtons
+      <menu
+        className='asset-action-buttons'
         onMouseLeave={this.onMouseLeave}
         onMouseEnter={this.onMouseEnter}
       >
         {this.renderSubButton()}
 
         {userCanEdit && assetType !== ASSET_TYPES.collection.id && (
-          <bem.AssetActionButtons__iconButton
-            href={this.getFormBuilderLink()}
-            data-tip={t('Edit in Form Builder')}
-            className='right-tooltip'
-          >
-            <i className='k-icon k-icon-edit' />
-          </bem.AssetActionButtons__iconButton>
+          <Link to={this.getFormBuilderLink()}>
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              tooltip={t('Edit in Form Builder')}
+              tooltipPosition='right'
+              startIcon='edit'
+            />
+          </Link>
         )}
 
         {userCanEdit && hasDetailsEditable && (
-          <bem.AssetActionButtons__iconButton
-            onClick={this.modifyDetails}
-            data-tip={t('Modify details')}
-            className='right-tooltip'
-          >
-            <i className='k-icon k-icon-settings' />
-          </bem.AssetActionButtons__iconButton>
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            onClick={this.modifyDetails.bind(this)}
+            tooltip={t('Modify details')}
+            tooltipPosition='right'
+            startIcon='settings'
+          />
         )}
 
         {userCanEdit && (
-          <bem.AssetActionButtons__iconButton
-            onClick={this.showTagsModal}
-            data-tip={t('Edit Tags')}
-            className='right-tooltip'
-          >
-            <i className='k-icon k-icon-tag' />
-          </bem.AssetActionButtons__iconButton>
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            onClick={this.showTagsModal.bind(this)}
+            tooltip={t('Edit Tags')}
+            tooltipPosition='right'
+            startIcon='tag'
+          />
         )}
 
         {userCanEdit && (
-          <bem.AssetActionButtons__iconButton
-            onClick={this.share}
-            data-tip={t('Share')}
-            className='right-tooltip'
-          >
-            <i className='k-icon k-icon-user-share' />
-          </bem.AssetActionButtons__iconButton>
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            onClick={this.share.bind(this)}
+            tooltip={t('Share')}
+            tooltipPosition='right'
+            startIcon='user-share'
+          />
         )}
 
         {assetType !== ASSET_TYPES.collection.id && (
-          <bem.AssetActionButtons__iconButton
-            onClick={this.clone}
-            data-tip={t('Clone')}
-            className='right-tooltip'
-          >
-            <i className='k-icon k-icon-duplicate' />
-          </bem.AssetActionButtons__iconButton>
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            onClick={this.clone.bind(this)}
+            tooltip={t('Clone')}
+            tooltipPosition='right'
+            startIcon='duplicate'
+          />
         )}
 
         {assetType === ASSET_TYPES.template.id && (
-          <bem.AssetActionButtons__iconButton
-            onClick={this.cloneAsSurvey}
-            data-tip={t('Create project')}
-            className='right-tooltip'
-          >
-            <i className='k-icon k-icon-projects' />
-          </bem.AssetActionButtons__iconButton>
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            onClick={this.cloneAsSurvey.bind(this)}
+            tooltip={t('Create project')}
+            tooltipPosition='right'
+            startIcon='projects'
+          />
         )}
 
         {routeAssetUid &&
           this.props.asset.parent !== null &&
           !this.props.asset.parent.includes(routeAssetUid) && (
-            <bem.AssetActionButtons__iconButton
-              onClick={this.viewContainingCollection}
-              data-tip={t('View containing Collection')}
-              className='right-tooltip'
-            >
-              <i className='k-icon k-icon-folder' />
-            </bem.AssetActionButtons__iconButton>
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              onClick={this.viewContainingCollection.bind(this)}
+              tooltip={t('View containing Collection')}
+              tooltipPosition='right'
+              startIcon='folder'
+            />
           )}
 
         {this.renderMoreActions()}
-      </bem.AssetActionButtons>
+      </menu>
     );
   }
 }
diff --git a/jsapp/js/components/assetsTable/assetsTable.scss b/jsapp/js/components/assetsTable/assetsTable.scss
index 08dd4384c2..92b9b8bb64 100644
--- a/jsapp/js/components/assetsTable/assetsTable.scss
+++ b/jsapp/js/components/assetsTable/assetsTable.scss
@@ -70,22 +70,6 @@ $assets-table-hover-bg: colors.$kobo-gray-98;
   color: colors.$kobo-gray-40;
   background-color: colors.$kobo-gray-96;
   height: 40px;
-
-  .mdl-button {
-    margin-left: 0;
-    margin-right: 0;
-    padding-right: 0;
-    padding-left: 12px;
-    line-height: 32px;
-    height: 32px;
-    min-height: 32px;
-
-    .k-icon {
-      font-size: 24px;
-      margin: 0 3px;
-      float: right;
-    }
-  }
 }
 
 .assets-table--MY_LIBRARY,
diff --git a/jsapp/js/components/common/badge.module.scss b/jsapp/js/components/common/badge.module.scss
index 1370ea7bc9..6b44281950 100644
--- a/jsapp/js/components/common/badge.module.scss
+++ b/jsapp/js/components/common/badge.module.scss
@@ -1,4 +1,5 @@
 @use 'scss/sizes';
+@use 'scss/mixins';
 @use '~kobo-common/src/styles/colors';
 
 $badge-height-s: sizes.$x24;
@@ -14,6 +15,8 @@ $badge-font-l: sizes.$x14;
   display: inline-block;
   vertical-align: middle;
   text-align: center;
+  @include mixins.textEllipsis;
+  max-width: 100%;
 }
 
 .icon {
@@ -37,7 +40,7 @@ $badge-font-l: sizes.$x14;
 
 .color-light-red {
   color: colors.$kobo-dark-red;
-  background-color: colors.$kobo-light-red;  
+  background-color: colors.$kobo-light-red;
 }
 
 .color-light-teal {
diff --git a/jsapp/js/components/common/button.scss b/jsapp/js/components/common/button.scss
index 07e62dd235..8ba6550ac3 100644
--- a/jsapp/js/components/common/button.scss
+++ b/jsapp/js/components/common/button.scss
@@ -219,6 +219,10 @@ $button-border-radius: sizes.$x6;
   justify-content: center;
 }
 
+.k-button.k-button--upper-case {
+  text-transform: uppercase;
+}
+
 // teal button ↓
 
 .k-button.k-button--color-teal.k-button--type-bare {
@@ -290,6 +294,26 @@ $button-border-radius: sizes.$x6;
   );
 }
 
+// dark-red button ↓
+
+.k-button.k-button--color-dark-red.k-button--type-bare {
+  @include button-bare(
+    colors.$kobo-dark-red,
+    color.adjust(colors.$kobo-dark-red, $lightness: -5%)
+  );
+}
+
+.k-button.k-button--color-dark-red.k-button--type-frame {
+  @include button-frame(colors.$kobo-dark-red);
+}
+
+.k-button.k-button--color-dark-red.k-button--type-full {
+  @include button-full(
+    colors.$kobo-dark-red,
+    color.adjust(colors.$kobo-dark-red, $lightness: -5%)
+  );
+}
+
 // storm button ↓
 
 .k-button.k-button--color-storm.k-button--type-bare {
diff --git a/jsapp/js/components/common/button.tsx b/jsapp/js/components/common/button.tsx
index b079e113b6..03cf02087a 100644
--- a/jsapp/js/components/common/button.tsx
+++ b/jsapp/js/components/common/button.tsx
@@ -6,6 +6,7 @@ import './button.scss';
 import type {TooltipAlignment} from './tooltip';
 import Tooltip from './tooltip';
 import {useId} from 'js/hooks/useId.hook';
+import cx from 'classnames';
 
 /**
  * Note: we use a simple TypeScript types here instead of enums, so we don't
@@ -24,6 +25,7 @@ export type ButtonColor =
   | 'blue'
   | 'light-blue'
   | 'red'
+  | 'dark-red'
   | 'storm'
   | 'light-storm'
   | 'dark-blue';
@@ -73,6 +75,12 @@ export interface ButtonProps {
   isSubmit?: boolean;
   /** Simply changes the width. */
   isFullWidth?: boolean;
+  /**
+   * Forces the label text to be uppercase. This is a legacy thing, as it is
+   * easier for us to have this here, rather than changing the labels (which
+   * requires new translations to be made).
+   */
+  isUpperCase?: boolean;
   /** Additional class names. */
   className?: string;
   /** You don't need to pass the callback for `isSubmit` option. */
@@ -96,46 +104,10 @@ const Button = (props: ButtonProps) => {
     throw new Error('Button is missing a required properties: icon or label!');
   }
 
-  let classNames: string[] = [];
-
-  // Additional class names.
-  if (props.className) {
-    classNames.push(props.className);
-  }
-
-  // Base class with mandatory ones.
-  classNames.push('k-button');
-  classNames.push(`k-button--type-${props.type}`);
-  classNames.push(`k-button--color-${props.color}`);
-
-  if (props.isPending) {
-    classNames.push('k-button--pending');
-  }
-
-  if (props.startIcon) {
-    classNames.push('k-button--has-start-icon');
-  }
-
-  // Ensures only one icon is being displayed.
-  if (!props.startIcon && props.endIcon) {
-    classNames.push('k-button--has-end-icon');
-  }
-
-  if (props.label) {
-    classNames.push('k-button--has-label');
-  }
-
-  if (props.isFullWidth) {
-    classNames.push('k-button--full-width');
-  }
-
-  const size = props.size;
-  classNames.push(`k-button--size-${size}`);
-
   // Size depends on label being there or not
-  let iconSize = ButtonToIconAloneMap.get(size);
+  let iconSize = ButtonToIconAloneMap.get(props.size);
   if (props.label) {
-    iconSize = ButtonToIconMap.get(size);
+    iconSize = ButtonToIconMap.get(props.size);
   }
 
   // For the attributes that don't have a falsy value.
@@ -158,7 +130,19 @@ const Button = (props: ButtonProps) => {
 
   const renderButton = () => (
     <button
-      className={classNames.join(' ')}
+      className={cx({
+        ['k-button']: true,
+        [`k-button--type-${props.type}`]: true,
+        [`k-button--color-${props.color}`]: true,
+        [`k-button--size-${props.size}`]: true,
+        ['k-button--pending']: props.isPending,
+        ['k-button--has-start-icon']: props.startIcon,
+        // Ensures only one icon is being displayed.
+        ['k-button--has-end-icon']: !props.startIcon && props.endIcon,
+        ['k-button--has-label']: Boolean(props.label),
+        ['k-button--full-width']: props.isFullWidth,
+        ['k-button--upper-case']: props.isUpperCase,
+      }, props.className)}
       type={props.isSubmit ? 'submit' : 'button'}
       aria-disabled={props.isDisabled}
       onClick={handleClick}
diff --git a/jsapp/js/components/common/modal.scss b/jsapp/js/components/common/modal.scss
index 32d7875f97..e1dcdb7ee7 100644
--- a/jsapp/js/components/common/modal.scss
+++ b/jsapp/js/components/common/modal.scss
@@ -3,6 +3,7 @@
 @use 'scss/sizes';
 @use 'scss/libs/_mdl';
 @use 'scss/_variables';
+@use 'scss/mixins';
 
 $z-modal-backdrop: 1101;
 $z-enketo-iframe-icon: 1100;
@@ -286,24 +287,6 @@ $modal-custom-header-height: sizes.$x60;
           font-size: 20px;
         }
       }
-
-      .kobo-light-button {
-        border-width: 2px;
-        line-height: 12px;
-
-        i.k-icon {
-          margin-right: -3px;
-        }
-
-        i.k-icon-download {
-          font-weight: 800;
-          margin-left: 3px;
-        }
-
-        &:not(:last-child) {
-          margin-right: 12px;
-        }
-      }
     }
   }
 
@@ -466,32 +449,14 @@ $modal-custom-header-height: sizes.$x60;
 
 .form-modal__item--http-headers {
   .form-modal__item--http-header-row {
+    @include mixins.centerRowFlex;
+    gap: 10px;
+
     margin-top: 10px;
 
     input[type="text"] {
-      width: calc(50% - 20px);
       background-color: rgba(colors.$kobo-gray-24, 0.05);
-      padding-left: 5px;
-      padding-right: 5px;
-
-      &:not(:first-child) {
-        margin-left: 10px;
-      }
-    }
-  }
-
-  .http-header-row-remove {
-    height: 30px;
-    min-height: 30px;
-    line-height: 30px;
-    width: 30px;
-    vertical-align: top;
-    padding: 0;
-    &:hover {color: colors.$kobo-red;}
-
-    .k-icon {
-      font-size: 1.2em;
-      vertical-align: middle;
+      padding: 5px;
     }
   }
 }
@@ -524,28 +489,6 @@ $modal-custom-header-height: sizes.$x60;
       flex-direction: row;
       align-items: center;
     }
-
-    .form-view__cell--translation-name .form-view__icon-button {
-      opacity: 0;
-      visibility: hidden;
-      transition: 250ms;
-    }
-
-    &:hover .form-view__cell--translation-name .form-view__icon-button {
-      opacity: 1;
-      visibility: visible;
-
-      // Hide the on hover button completely if disabled
-      &:disabled {
-        display: none;
-      }
-    }
-
-    .form-view__icon-button.right-tooltip {
-      &:disabled {
-        color: colors.$kobo-gray-65;
-      }
-    }
   }
 
   .form-view__cell--translation-actions {
@@ -570,10 +513,10 @@ $modal-custom-header-height: sizes.$x60;
     padding: 15px;
     position: relative;
 
-    .form-view__link--close {
+    .add-language-form-close {
       position: absolute;
-      right: 0px;
-      top: 6px;
+      right: 5px;
+      top: 5px;
 
       i {
         font-size: 18px;
@@ -620,10 +563,10 @@ $modal-custom-header-height: sizes.$x60;
     padding: 15px;
     position: relative;
 
-    .form-view__link--close {
+    .add-language-form-close {
       position: absolute;
-      right: 0px;
-      top: 6px;
+      right: 5px;
+      top: 5px;
 
       i {
         font-size: 18px;
@@ -704,17 +647,58 @@ $modal-custom-header-height: sizes.$x60;
   padding-bottom: 12px;
 }
 
-.encrypt-help {
-  color: colors.$kobo-gray-40;
-  background: transparent;
-  border: 0;
-  font-size: 28px;
+.encrypt-form-footer {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: flex-end;
+  gap: 5px;
+}
+
+.encrypt-form-footer-left {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+}
+
+// Tab button - styles were copied from the deprecated `mdl-button`
+.legacy-modal-tab-button {
+  text-decoration: none;
+  text-align: center;
+  font-weight: normal;
+  font-size: variables.$base-font-size;
+  letter-spacing: 0;
+  margin: 0;
+  border: none;
   vertical-align: middle;
+  background: transparent;
+  position: relative;
+  display: inline-block;
+  overflow: hidden;
   cursor: pointer;
-}
+  color: colors.$kobo-white;
+  opacity: 0.7;
+  border-radius: 0;
+  border-bottom: 2px solid transparent;
+  text-transform: uppercase;
+  height: 50px;
+  line-height: 50px;
+  padding: 0 32px;
+
+  &::-moz-focus-inner {
+    border: 0;
+  }
+
+  &:hover {
+    opacity: 1;
+    color: colors.$kobo-white;
+  }
 
-.remove-encryption {
-  float: right;
+  &.legacy-modal-tab-button--active {
+    opacity: 1;
+    border-bottom: 2px solid white;
+  }
 }
 
 // TODO: rework all these media queries to mobile first
@@ -726,14 +710,6 @@ $modal-custom-header-height: sizes.$x60;
     .table-media-preview-header__title {
       display: flex;
     }
-
-    .kobo-light-button {
-      display: block;
-      width: 90%;
-      margin-left: auto;
-      margin-right: auto;
-      margin-top: 12px;
-    }
   }
 }
 
diff --git a/jsapp/js/components/dataAttachments/connect-projects.scss b/jsapp/js/components/dataAttachments/connect-projects.scss
index 7aaae95d90..c110b224a8 100644
--- a/jsapp/js/components/dataAttachments/connect-projects.scss
+++ b/jsapp/js/components/dataAttachments/connect-projects.scss
@@ -179,7 +179,7 @@
   .modal__footer {
     text-align: center;
 
-    button {
+    .data-attachment-modal-footer-button {
       padding-left: sizes.$x60;
       padding-right: sizes.$x60;
     }
diff --git a/jsapp/js/components/dataAttachments/dataAttachmentColumnsForm.es6 b/jsapp/js/components/dataAttachments/dataAttachmentColumnsForm.es6
index 05d1ee2c7b..002ae44182 100644
--- a/jsapp/js/components/dataAttachments/dataAttachmentColumnsForm.es6
+++ b/jsapp/js/components/dataAttachments/dataAttachmentColumnsForm.es6
@@ -5,6 +5,7 @@ import MultiCheckbox from 'js/components/common/multiCheckbox';
 import bem from 'js/bem';
 import {actions} from 'js/actions';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
+import Button from 'js/components/common/button';
 
 /**
  * Attributes from source needed to generate `columnsToDisplay`
@@ -182,7 +183,7 @@ class DataAttachmentColumnsForm extends React.Component {
 
   render() {
     return (
-      // TODO: Use BEM elements
+      // TODO: Don't use BEM elements
       // See: https://github.com/kobotoolbox/kpi/issues/3912
       <bem.FormModal__form m='data-attachment-columns'>
         <div className='header'>
@@ -196,23 +197,25 @@ class DataAttachmentColumnsForm extends React.Component {
             </span>
 
             <div className='bulk-options__buttons'>
-              <bem.KoboLightButton
-                m='blue'
-                onClick={this.onBulkSelect}
-              >
-                {t('Select all')}
-              </bem.KoboLightButton>
+              <Button
+                type='frame'
+                color='blue'
+                size='s'
+                onClick={this.onBulkSelect.bind(this)}
+                label={t('Select all')}
+              />
 
               <span>
                 {t('|')}
               </span>
 
-              <bem.KoboLightButton
-                m='blue'
-                onClick={this.onBulkDeselect}
-              >
-                {t('Deselect all')}
-              </bem.KoboLightButton>
+              <Button
+                type='frame'
+                color='blue'
+                size='s'
+                onClick={this.onBulkDeselect.bind(this)}
+                label={t('Deselect all')}
+              />
             </div>
           </div>
         </div>
@@ -234,14 +237,16 @@ class DataAttachmentColumnsForm extends React.Component {
         }
 
         <footer className='modal__footer'>
-          <bem.KoboButton
-            m='blue'
-            type='submit'
-            onClick={this.onSubmit}
-            disabled={this.state.isLoading}
-          >
-            {t('Accept')}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            isSubmit
+            onClick={this.onSubmit.bind(this)}
+            isDisabled={this.state.isLoading}
+            label={t('Accept')}
+            className='data-attachment-modal-footer-button'
+          />
         </footer>
 
       </bem.FormModal__form>
diff --git a/jsapp/js/components/drawer.es6 b/jsapp/js/components/drawer.es6
index b1a1093c6a..458584c411 100644
--- a/jsapp/js/components/drawer.es6
+++ b/jsapp/js/components/drawer.es6
@@ -16,6 +16,7 @@ import {ROUTES, PROJECTS_ROUTES} from 'js/router/routerConstants';
 import SidebarFormsList from '../lists/sidebarForms';
 import envStore from 'js/envStore';
 import {router, routerIsActive, withRouter} from '../router/legacy';
+import Button from 'js/components/common/button';
 import pageState from 'js/pageState.store';
 
 const AccountSidebar = lazy(() => import('js/account/accountSidebar'));
@@ -67,16 +68,20 @@ const FormSidebar = observer(
     }
     render() {
       return (
-        <React.Fragment>
-          <bem.KoboButton
-            m={['blue', 'fullwidth']}
-            disabled={!sessionStore.isLoggedIn}
-            onClick={this.newFormModal}
-          >
-            {t('new')}
-          </bem.KoboButton>
+        <>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            isFullWidth
+            isUpperCase
+            isDisabled={!sessionStore.isLoggedIn}
+            onClick={this.newFormModal.bind(this)}
+            label={t('new')}
+          />
+
           <SidebarFormsList />
-        </React.Fragment>
+        </>
       );
     }
     onRouteChange() {
diff --git a/jsapp/js/components/formLanding.js b/jsapp/js/components/formLanding.js
index 5c1a09fd5c..9b8cbfc16a 100644
--- a/jsapp/js/components/formLanding.js
+++ b/jsapp/js/components/formLanding.js
@@ -30,6 +30,7 @@ import {HELP_ARTICLE_ANON_SUBMISSIONS_URL} from 'js/constants';
 import AnonymousSubmission from './anonymousSubmission.component';
 import NewFeatureDialog from './newFeatureDialog.component';
 import pageState from 'js/pageState.store';
+import Button from 'js/components/common/button';
 
 const DVCOUNT_LIMIT_MINIMUM = 20;
 const ANON_CAN_ADD_PERM_URL = permConfig.getPermissionByCodename(
@@ -149,28 +150,34 @@ class FormLanding extends React.Component {
         </bem.FormView__cell>
         <bem.FormView__cell m='buttons'>
           {userCanEdit && this.state.deployment_status === 'deployed' && (
-            <a
-              className='kobo-button kobo-button--blue'
-              onClick={this.deployAsset}
-            >
-              {t('redeploy')}
-            </a>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              isUpperCase
+              onClick={this.deployAsset.bind(this)}
+              label={t('redeploy')}
+            />
           )}
           {userCanEdit && this.state.deployment_status === 'draft' && (
-            <a
-              className='kobo-button kobo-button--blue'
-              onClick={this.deployAsset}
-            >
-              {t('deploy')}
-            </a>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              isUpperCase
+              onClick={this.deployAsset.bind(this)}
+              label={t('deploy')}
+            />
           )}
           {userCanEdit && this.state.deployment_status === 'archived' && (
-            <a
-              className='kobo-button kobo-button--blue'
-              onClick={this.callUnarchiveAsset}
-            >
-              {t('unarchive')}
-            </a>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              isUpperCase
+              onClick={this.callUnarchiveAsset.bind(this)}
+              label={t('unarchive')}
+            />
           )}
         </bem.FormView__cell>
       </bem.FormView__cell>
@@ -308,16 +315,15 @@ class FormLanding extends React.Component {
                       {formatTime(item.date_deployed)}
                     </bem.FormView__label>
                     {isLoggedIn && (
-                      <bem.FormView__label m='clone' className='right-tooltip'>
-                        <bem.FormView__link
-                          m='clone'
-                          data-version-id={item.uid}
-                          data-tip={t('Clone this version as a new project')}
-                          onClick={this.saveCloneAs}
-                        >
-                          <i className='k-icon k-icon-duplicate' />
-                        </bem.FormView__link>
-                      </bem.FormView__label>
+                      <Button
+                        type='bare'
+                        color='storm'
+                        size='m'
+                        onClick={() => {this.saveCloneAs(item.uid);}}
+                        startIcon='duplicate'
+                        tooltip={t('Clone this version as a new project')}
+                        tooltipPosition='right'
+                      />
                     )}
                   </bem.FormView__group>
                 );
@@ -327,16 +333,24 @@ class FormLanding extends React.Component {
         </bem.FormView__cell>
         {this.state.deployed_versions.count > 1 && (
           <bem.FormView__cell m={['centered']}>
-            <bem.Button m='colored' onClick={this.toggleDeploymentHistory}>
-              {this.state.historyExpanded
-                ? t('Hide full history')
-                : t('Show full history')}
-            </bem.Button>
+            <Button
+              type='frame'
+              color='blue'
+              size='m'
+              startIcon={this.state.historyExpanded ? 'angle-up' : 'angle-down'}
+              onClick={this.toggleDeploymentHistory.bind(this)}
+              label={this.state.historyExpanded ? t('Hide full history') : t('Show full history')}
+            />
+
             {this.state.historyExpanded &&
               this.state.DVCOUNT_LIMIT < dvcount && (
-                <bem.Button m='colored' onClick={this.loadMoreVersions}>
-                  {t('Load more')}
-                </bem.Button>
+                <Button
+                  type='frame'
+                  color='blue'
+                  size='m'
+                  onClick={this.loadMoreVersions.bind(this)}
+                  label={t('Load more')}
+                />
               )}
           </bem.FormView__cell>
         )}
@@ -389,8 +403,11 @@ class FormLanding extends React.Component {
               </PopoverMenu>
             </bem.FormView__cell>
 
-            <bem.FormView__cell>{this.renderCollectLink()}</bem.FormView__cell>
+            <bem.FormView__cell className='collect-header-actions'>
+              {this.renderCollectLink()}
+            </bem.FormView__cell>
           </bem.FormView__cell>
+
           <bem.FormView__cell m={['small-padding', 'collect-meta']}>
             {chosenMethod !== COLLECTION_METHODS.android.id &&
               COLLECTION_METHODS[chosenMethod].desc}
@@ -464,13 +481,15 @@ class FormLanding extends React.Component {
 
     if (chosenMethod === COLLECTION_METHODS.android.id) {
       return (
-        <a
-          className='mdl-button mdl-button--colored'
-          target='_blank'
-          href={COLLECTION_METHODS.android.url}
-        >
-          {t('Download KoboCollect')}
-        </a>
+        <Button
+          type='frame'
+          color='blue'
+          size='m'
+          onClick={() => {
+            window.open(COLLECTION_METHODS.android.url, '_blank');
+          }}
+          label={t('Download KoboCollect')}
+        />
       );
     }
 
@@ -497,9 +516,12 @@ class FormLanding extends React.Component {
           }}
           options={{format: 'text/plain'}}
         >
-          <button className='copy mdl-button mdl-button--colored'>
-            {t('Copy')}
-          </button>
+          <Button
+            type='frame'
+            color='blue'
+            size='m'
+            label={t('Copy')}
+          />
         </CopyToClipboard>
       );
     }
@@ -513,18 +535,23 @@ class FormLanding extends React.Component {
           }}
           options={{format: 'text/plain'}}
         >
-          <button className='copy mdl-button mdl-button--colored'>
-            {t('Copy')}
-          </button>
+          <Button
+            type='frame'
+            color='blue'
+            size='m'
+            label={t('Copy')}
+          />
         </CopyToClipboard>
 
-        <a
-          className='mdl-button mdl-button--colored'
-          target='_blank'
-          href={chosenMethodLink}
-        >
-          {t('Open')}
-        </a>
+        <Button
+          type='frame'
+          color='blue'
+          size='m'
+          onClick={() => {
+            window.open(chosenMethodLink, '_blank');
+          }}
+          label={t('Open')}
+        />
       </React.Fragment>
     );
   }
@@ -563,53 +590,70 @@ class FormLanding extends React.Component {
     return (
       <React.Fragment>
         {userCanEdit ? (
-          <Link
-            to={`/forms/${this.state.uid}/edit`}
-            className='form-view__link form-view__link--edit'
-            data-tip={t('Edit in Form Builder')}
-          >
-            <i className='k-icon k-icon-edit' data-cy='edit' />
+          <Link to={`/forms/${this.state.uid}/edit`}>
+            {/*
+              We put non clickable button inside Link, so that it's possible
+              to open it in new tab.
+            */}
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              startIcon='edit'
+              data-cy='edit'
+              tooltip={t('Edit in Form Builder')}
+              tooltipPosition='right'
+            />
           </Link>
         ) : (
-          <bem.FormView__link
-            m={['edit', 'disabled']}
-            className='right-tooltip'
-            data-tip={t(
-              'Editing capabilities not granted, you can only view this form'
-            )}
-          >
-            <i className='k-icon k-icon-edit' />
-          </bem.FormView__link>
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            startIcon='edit'
+            tooltip={t('Editing capabilities not granted, you can only view this form')}
+            tooltipPosition='right'
+            isDisabled
+          />
         )}
 
-        <bem.FormView__link
-          m='preview'
-          onClick={this.enketoPreviewModal}
-          data-tip={t('Preview')}
-        >
-          <i className='k-icon k-icon-view' />
-        </bem.FormView__link>
+        <Button
+          type='bare'
+          color='storm'
+          size='m'
+          startIcon='view'
+          tooltip={t('Preview')}
+          tooltipPosition='right'
+          onClick={this.enketoPreviewModal.bind(this)}
+        />
 
         {userCanEdit && (
-          <bem.FormView__link
-            m='upload'
-            data-tip={t('Replace form')}
-            onClick={this.showReplaceProjectModal}
-          >
-            <i className='k-icon k-icon-replace' />
-          </bem.FormView__link>
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            startIcon='replace'
+            tooltip={t('Replace form')}
+            tooltipPosition='right'
+            onClick={this.showReplaceProjectModal.bind(this)}
+          />
         )}
 
         <PopoverMenu
           type='formLanding-menu'
           triggerLabel={
-            <div data-tip={t('More actions')}>
-              <i className='k-icon k-icon-more' />
-            </div>
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              startIcon='more'
+              tooltip={t('More actions')}
+              tooltipPosition='right'
+            />
           }
         >
-          {downloads.map((dl) => {
-            return (
+          {downloads.map((dl) =>
+            (
               <bem.PopoverMenu__link
                 m={`dl-${dl.format}`}
                 href={dl.url}
@@ -619,8 +663,8 @@ class FormLanding extends React.Component {
                 {t('Download')}&nbsp;
                 {dl.format.toString().toUpperCase()}
               </bem.PopoverMenu__link>
-            );
-          })}
+            )
+          )}
 
           {userCanEdit && (
             <bem.PopoverMenu__link onClick={this.showSharingModal}>
@@ -637,7 +681,7 @@ class FormLanding extends React.Component {
           )}
 
           {isLoggedIn && (
-            <bem.PopoverMenu__link onClick={this.saveCloneAs}>
+            <bem.PopoverMenu__link onClick={this.saveCloneAs.bind(this)}>
               <i className='k-icon k-icon-duplicate' />
               {t('Clone this project')}
             </bem.PopoverMenu__link>
@@ -682,21 +726,24 @@ class FormLanding extends React.Component {
             t('This project has no languages defined yet')}
           {this.hasLanguagesDefined(translations) && (
             <ul>
-              {translations.map((langString, n) => {
-                return <li key={n}>{langString || t('Unnamed language')}</li>;
-              })}
+              {translations.map((langString, n) =>
+                <li key={n}>{langString || t('Unnamed language')}</li>
+              )}
             </ul>
           )}
         </bem.FormView__cell>
 
         {canEdit && (
           <bem.FormView__cell>
-            <bem.FormView__link
-              data-tip={t('Manage translations')}
-              onClick={this.showLanguagesModal}
-            >
-              <i className='k-icon k-icon-language' />
-            </bem.FormView__link>
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              startIcon='language'
+              tooltip={t('Manage translations')}
+              tooltipPosition='right'
+              onClick={this.showLanguagesModal.bind(this)}
+            />
           </bem.FormView__cell>
         )}
       </bem.FormView__cell>
diff --git a/jsapp/js/components/header/accountMenu.tsx b/jsapp/js/components/header/accountMenu.tsx
index ad66eadef5..280f775b5f 100644
--- a/jsapp/js/components/header/accountMenu.tsx
+++ b/jsapp/js/components/header/accountMenu.tsx
@@ -10,6 +10,7 @@ import {dataInterface} from 'js/dataInterface';
 import {actions} from 'js/actions';
 import {ACCOUNT_ROUTES} from 'js/account/routes.constants';
 import {isAnyRouteBlockerActive} from 'js/router/routerUtils';
+import Button from 'js/components/common/button';
 
 /**
  * UI element that display things only for logged-in user. An avatar that gives
@@ -104,12 +105,14 @@ export default function AccountMenu() {
             */}
             {!isAnyRouteBlockerActive() && (
               <bem.AccountBox__menuItem m={'settings'}>
-                <bem.KoboButton
+                <Button
+                  type='full'
+                  color='blue'
+                  size='l'
+                  isFullWidth
                   onClick={openAccountSettings}
-                  m={['blue', 'fullwidth']}
-                >
-                  {t('Account Settings')}
-                </bem.KoboButton>
+                  label={t('Account Settings')}
+                />
               </bem.AccountBox__menuItem>
             )}
           </bem.AccountBox__menuLI>
diff --git a/jsapp/js/components/header/mainHeader.component.tsx b/jsapp/js/components/header/mainHeader.component.tsx
index 980cf9d6b9..53e4e45387 100644
--- a/jsapp/js/components/header/mainHeader.component.tsx
+++ b/jsapp/js/components/header/mainHeader.component.tsx
@@ -26,6 +26,7 @@ import MainHeaderLogo from './mainHeaderLogo.component';
 import GitRev from './gitRev.component';
 import pageState from 'js/pageState.store';
 import styles from './mainHeader.module.scss';
+import Button from 'js/components/common/button';
 
 interface MainHeaderProps extends WithRouterProps {
   assetUid: string | null;
@@ -71,9 +72,15 @@ const MainHeader = class MainHeader extends React.Component<MainHeaderProps> {
   renderLoginButton() {
     return (
       <bem.LoginBox>
-        <a href={getLoginUrl()} className='kobo-button kobo-button--blue'>
-          {t('Log In')}
-        </a>
+        <Button
+          type='full'
+          color='blue'
+          size='l'
+          label={t('Log In')}
+          onClick={() => {
+            window.location.assign(getLoginUrl());
+          }}
+        />
       </bem.LoginBox>
     );
   }
diff --git a/jsapp/js/components/library/assetInfoBox.scss b/jsapp/js/components/library/assetInfoBox.scss
index cb38ee21f1..1e67d521be 100644
--- a/jsapp/js/components/library/assetInfoBox.scss
+++ b/jsapp/js/components/library/assetInfoBox.scss
@@ -28,29 +28,6 @@
       }
     }
   }
-
-  .asset-info-box__toggle {
-    cursor: pointer;
-    color: colors.$kobo-blue;
-    background: transparent;
-    border: 0;
-    width: 100%;
-    text-align: center;
-
-    &:hover {
-      color: colors.$kobo-dark-blue;
-    }
-
-    &:active {
-      transform: translateY(1px);
-    }
-
-    .k-icon {
-      font-size: 18px;
-      margin-right: 3px;
-      vertical-align: -5px;
-    }
-  }
 }
 
 .asset-info-box__cell {
diff --git a/jsapp/js/components/library/assetInfoBox.tsx b/jsapp/js/components/library/assetInfoBox.tsx
index 0c6a2ffa1f..e0c85ccf95 100644
--- a/jsapp/js/components/library/assetInfoBox.tsx
+++ b/jsapp/js/components/library/assetInfoBox.tsx
@@ -10,6 +10,7 @@ import {
 } from 'js/utils';
 import './assetInfoBox.scss';
 import type {AssetResponse, AccountResponse} from 'js/dataInterface';
+import Button from 'js/components/common/button';
 
 interface AssetInfoBoxProps {
   asset: AssetResponse;
@@ -153,10 +154,14 @@ export default class AssetInfoBox extends React.Component<
         </bem.AssetInfoBox__column>
 
         <bem.AssetInfoBox__column m='toggle'>
-          <bem.AssetInfoBox__toggle onClick={this.toggleDetails.bind(this)}>
-            {this.state.areDetailsVisible ? <i className='k-icon k-icon-angle-up'/> : <i className='k-icon k-icon-angle-down'/>}
-            {this.state.areDetailsVisible ? t('Hide full details') : t('Show full details')}
-          </bem.AssetInfoBox__toggle>
+          <Button
+            type='bare'
+            color='blue'
+            size='s'
+            onClick={this.toggleDetails.bind(this)}
+            startIcon={this.state.areDetailsVisible ? 'angle-up' : 'angle-down'}
+            label={this.state.areDetailsVisible ? t('Hide full details') : t('Show full details')}
+          />
         </bem.AssetInfoBox__column>
       </bem.AssetInfoBox>
     );
diff --git a/jsapp/js/components/library/assetRoute.tsx b/jsapp/js/components/library/assetRoute.tsx
index 6b19aa321f..d1c29e77e2 100644
--- a/jsapp/js/components/library/assetRoute.tsx
+++ b/jsapp/js/components/library/assetRoute.tsx
@@ -84,17 +84,18 @@ export default class AssetRoute extends React.Component<
    * from Back End.
    */
   onAssetAccessTypeChanged(setSubscribed: boolean) {
-    let newAsset = clonedeep(this.state.asset);
+    const newAsset = clonedeep(this.state.asset);
     if (newAsset) {
       if (setSubscribed && newAsset.access_types === null) {
         newAsset.access_types = [ACCESS_TYPES.subscribed];
       } else if (setSubscribed && newAsset.access_types !== null) {
         newAsset.access_types.push(ACCESS_TYPES.subscribed);
       } else if (!setSubscribed && newAsset.access_types !== null) {
-        newAsset.access_types.splice(
-          newAsset.access_types.indexOf(ACCESS_TYPES.subscribed),
-          1
-        );
+        // Remove any 'subscribed' item from the array. There is a bug where
+        // duplicated items are present in the array, so we need to make sure
+        // all of them are removed.
+        newAsset.access_types = newAsset.access_types.filter((item) => item !== ACCESS_TYPES.subscribed);
+
         // Cleanup if empty array is left
         if (newAsset.access_types.length === 0) {
           newAsset.access_types = null;
diff --git a/jsapp/js/components/library/librarySidebar.tsx b/jsapp/js/components/library/librarySidebar.tsx
index d4d63498bb..acfc9e9c2a 100644
--- a/jsapp/js/components/library/librarySidebar.tsx
+++ b/jsapp/js/components/library/librarySidebar.tsx
@@ -6,6 +6,7 @@ import myLibraryStore from './myLibraryStore';
 import {routerIsActive} from 'js/router/legacy';
 import {ROUTES} from 'js/router/routerConstants';
 import {NavLink} from 'react-router-dom';
+import Button from 'js/components/common/button';
 import pageState from 'js/pageState.store';
 
 interface LibrarySidebarState {
@@ -56,13 +57,16 @@ export default class LibrarySidebar extends React.Component<
 
     return (
       <>
-        <bem.KoboButton
-          m={['blue', 'fullwidth']}
-          disabled={!sessionStore.isLoggedIn}
+        <Button
+          type='full'
+          color='blue'
+          size='l'
+          isFullWidth
+          isUpperCase
+          isDisabled={!sessionStore.isLoggedIn}
           onClick={this.showLibraryNewModal.bind(this)}
-        >
-          {t('new')}
-        </bem.KoboButton>
+          label={t('new')}
+        />
 
         <bem.FormSidebar m={sidebarModifier}>
           <NavLink
diff --git a/jsapp/js/components/library/myLibraryRoute.tsx b/jsapp/js/components/library/myLibraryRoute.tsx
index 49e5709ff7..afb3533d7b 100644
--- a/jsapp/js/components/library/myLibraryRoute.tsx
+++ b/jsapp/js/components/library/myLibraryRoute.tsx
@@ -3,7 +3,6 @@ import DocumentTitle from 'react-document-title';
 import Dropzone from 'react-dropzone';
 import bem from 'js/bem';
 import mixins from 'js/mixins';
-import {stores} from 'js/stores';
 import {validFileTypes} from 'js/utils';
 import myLibraryStore from './myLibraryStore';
 import AssetsTable from 'js/components/assetsTable/assetsTable';
diff --git a/jsapp/js/components/map.scss b/jsapp/js/components/map.scss
index f7fefa820d..7bb6c97c66 100644
--- a/jsapp/js/components/map.scss
+++ b/jsapp/js/components/map.scss
@@ -297,7 +297,7 @@ body .leaflet-control-layers,
 }
 
 .map-settings {
-  .form-modal__item--layer-upload label {
+  .form-modal__item--layer-upload label[for='name'] {
     display: block;
     padding: 10px 0 20px;
     position: relative;
diff --git a/jsapp/js/components/mapSettings.es6 b/jsapp/js/components/mapSettings.es6
index 43e00434f7..c186c9912e 100644
--- a/jsapp/js/components/mapSettings.es6
+++ b/jsapp/js/components/mapSettings.es6
@@ -14,6 +14,8 @@ import {
 } from 'js/constants';
 import { dataInterface } from '../dataInterface';
 import {userCan} from 'js/components/permissions/utils';
+import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 // see kobo.map.marker-colors.scss for styling details of each set
 const COLOR_SETS = ['a', 'b', 'c', 'd', 'e'];
@@ -272,9 +274,10 @@ class MapSettings extends React.Component {
     var modalTabs = tabs.map(function(tabId, i) {
       return (
         <button
-          className={`mdl-button mdl-button--tab ${
-            this.state.activeModalTab === tabId ? 'active' : ''
-          }`}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === tabId,
+          })}
           onClick={this.switchTab}
           data-tabid={tabId}
           key={i}
@@ -359,9 +362,13 @@ class MapSettings extends React.Component {
                     className='dropzone'
                     accept={'.csv,.kml,.geojson,.wkt,.json,.kmz'}
                   >
-                    <bem.KoboButton m='blue'>
-                      {t('Upload')}
-                    </bem.KoboButton>
+                    <Button
+                      type='full'
+                      color='blue'
+                      size='l'
+                      label={t('Upload')}
+                      isFullWidth
+                    />
                   </Dropzone>
                 </bem.FormModal__item>
               </div>
@@ -405,13 +412,22 @@ class MapSettings extends React.Component {
         {[TABS.get('geoquestion').id, TABS.get('colors').id, TABS.get('querylimit').id].includes(activeTab) &&
           <bem.Modal__footer>
             {userCan('change_asset', this.props.asset) && queryLimit !== QUERY_LIMIT_DEFAULT &&
-              <bem.KoboButton m='storm' onClick={this.resetMapSettings}>
-                {t('Reset')}
-              </bem.KoboButton>
+              <Button
+                type='full'
+                color='storm'
+                size='l'
+                onClick={this.resetMapSettings.bind(this)}
+                label={t('Reset')}
+              />
             }
-            <bem.KoboButton m='blue' onClick={this.onSave}>
-              {t('Save')}
-            </bem.KoboButton>
+
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              onClick={this.onSave.bind(this)}
+              label={t('Save')}
+            />
           </bem.Modal__footer>
         }
       </bem.GraphSettings>
diff --git a/jsapp/js/components/modalForms/assetTagsForm.es6 b/jsapp/js/components/modalForms/assetTagsForm.es6
index 3b4f3bb766..a4174e365b 100644
--- a/jsapp/js/components/modalForms/assetTagsForm.es6
+++ b/jsapp/js/components/modalForms/assetTagsForm.es6
@@ -7,6 +7,7 @@ import sessionStore from 'js/stores/session';
 import {actions} from 'js/actions';
 import {notify} from 'utils';
 import LoadingSpinner from 'js/components/common/loadingSpinner';
+import Button from 'js/components/common/button';
 import pageState from 'js/pageState.store';
 
 /**
@@ -60,14 +61,6 @@ export const AssetTagsForm = observer(class AssetTagsForm extends React.Componen
     this.setState({tags: newValue});
   }
 
-  getSubmitButtonLabel() {
-    if (this.state.isPending) {
-      return t('Updating…');
-    } else {
-      return t('Update');
-    }
-  }
-
   render() {
     if (!sessionStore.isLoggedIn) {
       return (<LoadingSpinner/>);
@@ -85,14 +78,15 @@ export const AssetTagsForm = observer(class AssetTagsForm extends React.Componen
         </bem.FormModal__item>
 
         <bem.Modal__footer>
-          <bem.KoboButton
-            m='blue'
-            type='submit'
-            onClick={this.onSubmit}
-            disabled={this.state.isPending}
-          >
-            {this.getSubmitButtonLabel()}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            isSubmit
+            onClick={this.onSubmit.bind(this)}
+            isPending={this.state.isPending}
+            label={t('Update')}
+          />
         </bem.Modal__footer>
       </bem.FormModal__form>
     );
diff --git a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6 b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
index 0233a7ce27..e43241977e 100644
--- a/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
+++ b/jsapp/js/components/modalForms/bulkEditSubmissionsForm.es6
@@ -14,6 +14,7 @@ import {
 import bem from 'js/bem';
 import {actions} from 'js/actions';
 import TextBox from 'js/components/common/textBox';
+import Button from 'js/components/common/button';
 import envStore from 'js/envStore';
 import './bulkEditSubmissionsForm.scss';
 
@@ -258,19 +259,18 @@ class BulkEditSubmissionsForm extends React.Component {
         </bem.SimpleTable__cell>
 
         <bem.SimpleTable__cell>
-          <bem.KoboTextButton
-            m={this.isEditDisabled(question.type) ? 'grey' : 'blue'}
-            onClick={(event) => {
+          <Button
+            type='frame'
+            color='blue'
+            size='m'
+            onClick={() => {
               if (!this.isEditDisabled(question.type)) {
                 this.selectQuestion(question);
-              } else {
-                event.preventDefault();
               }
             }}
-            aria-disabled={this.isEditDisabled(question.type)}
-          >
-            {t('Edit')}
-          </bem.KoboTextButton>
+            isDisabled={this.isEditDisabled(question.type)}
+            label={t('Edit')}
+          />
         </bem.SimpleTable__cell>
       </bem.SimpleTable__row>
     );
@@ -387,23 +387,24 @@ class BulkEditSubmissionsForm extends React.Component {
         </bem.SimpleTable>
 
         <bem.Modal__footer>
-          <bem.KoboButton
-            m='red'
-            type='button'
-            onClick={this.onReset}
-            disabled={this.state.isPending || Object.keys(this.state.overrides).length === 0}
-          >
-            {t('Discard Changes')}
-          </bem.KoboButton>
-
-          <bem.KoboButton
-            m='blue'
-            type='submit'
-            onClick={this.onSubmit}
-            disabled={this.state.isPending || Object.keys(this.state.overrides).length === 0}
-          >
-            {t('Confirm & close')}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='red'
+            size='l'
+            onClick={this.onReset.bind(this)}
+            isDisabled={this.state.isPending || Object.keys(this.state.overrides).length === 0}
+            label={t('Discard Changes')}
+          />
+
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            isSubmit
+            onClick={this.onSubmit.bind(this)}
+            isDisabled={this.state.isPending || Object.keys(this.state.overrides).length === 0}
+            label={t('Confirm & close')}
+          />
         </bem.Modal__footer>
       </React.Fragment>
     );
@@ -426,22 +427,22 @@ class BulkEditSubmissionsForm extends React.Component {
         </bem.FormModal__item>
 
         <bem.Modal__footer>
-          <bem.KoboButton
+          <Button
+            type='frame'
+            color='storm'
+            size='l'
+            onClick={this.goBackToList.bind(this)}
+            label={t('Back')}
             className='footer-back-button'
-            m='whitegray'
-            type='button'
-            onClick={this.goBackToList}
-          >
-            {t('Back')}
-          </bem.KoboButton>
-
-          <bem.KoboButton
-            m='blue'
-            type='button'
-            onClick={this.saveOverride}
-          >
-            {t('Save')}
-          </bem.KoboButton>
+          />
+
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            onClick={this.saveOverride.bind(this)}
+            label={t('Save')}
+          />
         </bem.Modal__footer>
       </React.Fragment>
     );
@@ -534,12 +535,13 @@ class BulkEditRowForm extends React.Component {
         <bem.SimpleTable__cell>{count}</bem.SimpleTable__cell>
         <bem.SimpleTable__cell>{percentage}</bem.SimpleTable__cell>
         <bem.SimpleTable__cell>
-          <bem.KoboTextButton
-            m='blue'
+          <Button
+            type='frame'
+            color='blue'
+            size='m'
             onClick={this.onChange.bind(this, responseValue)}
-          >
-            {t('Select')}
-          </bem.KoboTextButton>
+            label={t('Select')}
+          />
         </bem.SimpleTable__cell>
       </bem.SimpleTable__row>
     );
diff --git a/jsapp/js/components/modalForms/encryptForm.es6 b/jsapp/js/components/modalForms/encryptForm.es6
index db6f530945..fa1d8cfd3a 100644
--- a/jsapp/js/components/modalForms/encryptForm.es6
+++ b/jsapp/js/components/modalForms/encryptForm.es6
@@ -9,6 +9,7 @@ import bem from 'js/bem';
 import {MODAL_TYPES} from 'js/constants';
 import {stores} from 'js/stores';
 import pageState from 'js/pageState.store';
+import Button from 'js/components/common/button';
 
 class EncryptForm extends React.Component {
   constructor(props) {
@@ -137,24 +138,36 @@ class EncryptForm extends React.Component {
           </bem.FormModal__item>
         </bem.FormView__cell>
 
-        <bem.FormView__cell m='submit-button'>
-          <button
-            className='mdl-button mdl-button--raised mdl-button--colored'
-            disabled={this.state.isPending}
-            onClick={this.onSubmit} type='submit'
-          >
-            {t('Set encryption')}
-          </button>
-          <button
-            className='remove-encryption mdl-button mdl-button--colored mdl-button--red mdl-button--raised'
-            disabled={this.state.isPending}
-            onClick={this.onRemove} type='submit'
-          >
-            {t('Remove encryption')}
-          </button>
-          <button className="encrypt-help" onClick={this.openEncryptionHelp} data-tip={t('Learn more about encrypting forms')}>
-            <i className='k-icon k-icon-help'/>
-          </button>
+        <bem.FormView__cell m='submit-button' className='encrypt-form-footer'>
+          <span className='encrypt-form-footer-left'>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              isDisabled={this.state.isPending}
+              onClick={this.onSubmit.bind(this)}
+              isSubmit
+              label={t('Set encryption')}
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              onClick={this.openEncryptionHelp.bind(this)}
+              tooltip={t('Learn more about encrypting forms')}
+              startIcon='help'
+            />
+          </span>
+
+          <Button
+            type='full'
+            color='red'
+            size='l'
+            isDisabled={this.state.isPending}
+            onClick={this.onRemove.bind(this)}
+            label={t('Remove encryption')}
+          />
         </bem.FormView__cell>
       </bem.FormView__form>
       );
diff --git a/jsapp/js/components/modalForms/formMedia.es6 b/jsapp/js/components/modalForms/formMedia.es6
index 85fee42289..2575dbafcf 100644
--- a/jsapp/js/components/modalForms/formMedia.es6
+++ b/jsapp/js/components/modalForms/formMedia.es6
@@ -315,12 +315,13 @@ class FormMedia extends React.Component {
 
                   {this.renderFileName(item)}
 
-                  <bem.KoboLightButton
-                    m={['red', 'icon-only']}
+                  <Button
+                    type='frame'
+                    color='red'
+                    size='m'
+                    startIcon='trash'
                     onClick={(evt) => this.onDeleteMedia(evt, item.url)}
-                  >
-                    <i className='k-icon k-icon-trash' />
-                  </bem.KoboLightButton>
+                  />
                 </bem.FormMedia__listItem>
               ))}
             </ul>
diff --git a/jsapp/js/components/modalForms/formMedia.scss b/jsapp/js/components/modalForms/formMedia.scss
index 4489b7a529..f05fe71df5 100644
--- a/jsapp/js/components/modalForms/formMedia.scss
+++ b/jsapp/js/components/modalForms/formMedia.scss
@@ -86,16 +86,6 @@
       display: flex;
       justify-content: space-between;
 
-      // TODO: Find a better way to implement button size without editing parent
-      // See: https://github.com/kobotoolbox/kpi/issues/3917
-      button.kobo-light-button {
-        padding-bottom: 25px;
-
-        i.k-icon-trash {
-          font-size: 24px;
-        }
-      }
-
       i.form-media__file-type {
         position: absolute;
         left: -5px;
diff --git a/jsapp/js/components/modalForms/languageForm.es6 b/jsapp/js/components/modalForms/languageForm.es6
index ab1af66634..858b9b8e68 100644
--- a/jsapp/js/components/modalForms/languageForm.es6
+++ b/jsapp/js/components/modalForms/languageForm.es6
@@ -2,6 +2,7 @@ import React from 'react';
 import autoBind from 'react-autobind';
 import bem from 'js/bem';
 import TextBox from 'js/components/common/textBox';
+import Button from 'js/components/common/button';
 import {getLangAsObject} from 'js/utils';
 import {toTitleCase} from 'js/textUtils';
 
@@ -143,13 +144,15 @@ class LanguageForm extends React.Component {
         </bem.FormView__cell>
 
         <bem.FormView__cell m='submit-button'>
-          <bem.KoboButton
-            m='blue'
-            onClick={this.onSubmit} type='submit'
-            disabled={isAnyFieldEmpty}
-          >
-            {this.props.langIndex !== undefined ? t('Update') : (this.props.isDefault) ? t('Set') : t('Add')}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            onClick={this.onSubmit.bind(this)}
+            isSubmit
+            isDisabled={isAnyFieldEmpty}
+            label={this.props.langIndex !== undefined ? t('Update') : (this.props.isDefault) ? t('Set') : t('Add')}
+          />
         </bem.FormView__cell>
       </bem.FormView__form>
       );
diff --git a/jsapp/js/components/modalForms/libraryAssetForm.es6 b/jsapp/js/components/modalForms/libraryAssetForm.es6
index 5daf745048..f8b8ae884a 100644
--- a/jsapp/js/components/modalForms/libraryAssetForm.es6
+++ b/jsapp/js/components/modalForms/libraryAssetForm.es6
@@ -21,6 +21,7 @@ import managedCollectionsStore from 'js/components/library/managedCollectionsSto
 import envStore from 'js/envStore';
 import {withRouter} from 'js/router/legacy';
 import pageState from 'js/pageState.store';
+import Button from 'js/components/common/button';
 
 /**
  * Modal for creating or updating library asset (collection or template)
@@ -276,14 +277,14 @@ export class LibraryAssetFormComponent extends React.Component {
         <bem.Modal__footer>
           {renderBackButton(this.state.isPending)}
 
-          <bem.KoboButton
-            m='blue'
-            type='submit'
-            onClick={this.onSubmit}
-            disabled={!this.isSubmitEnabled()}
-          >
-            {this.getSubmitButtonLabel()}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            onClick={this.onSubmit.bind(this)}
+            isDisabled={!this.isSubmitEnabled()}
+            label={this.getSubmitButtonLabel()}
+          />
         </bem.Modal__footer>
       </bem.FormModal__form>
     );
diff --git a/jsapp/js/components/modalForms/libraryUploadForm.es6 b/jsapp/js/components/modalForms/libraryUploadForm.es6
index 19f1242266..708848984c 100644
--- a/jsapp/js/components/modalForms/libraryUploadForm.es6
+++ b/jsapp/js/components/modalForms/libraryUploadForm.es6
@@ -13,6 +13,7 @@ import {renderBackButton} from './modalHelpers';
 import {validFileTypes} from 'utils';
 import {ASSET_TYPES} from 'js/constants';
 import envStore from 'js/envStore';
+import Button from 'js/components/common/button';
 
 /**
  * @prop {function} onSetModalTitle
@@ -130,14 +131,15 @@ const LibraryUploadForm = observer(class LibraryUploadForm extends React.Compone
         <bem.Modal__footer>
           {renderBackButton(this.state.isPending)}
 
-          <bem.KoboButton
-            m='blue'
-            type='submit'
-            onClick={this.onSubmit}
-            disabled={!this.isSubmitEnabled()}
-          >
-            {t('Upload')}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            isSubmit
+            onClick={this.onSubmit.bind(this)}
+            isDisabled={!this.isSubmitEnabled()}
+            label={t('Upload')}
+          />
         </bem.Modal__footer>
       </bem.FormModal__form>
     );
diff --git a/jsapp/js/components/modalForms/modalHelpers.es6 b/jsapp/js/components/modalForms/modalHelpers.es6
index 65448d99f5..4784d44be4 100644
--- a/jsapp/js/components/modalForms/modalHelpers.es6
+++ b/jsapp/js/components/modalForms/modalHelpers.es6
@@ -1,18 +1,18 @@
 import React from 'react';
-import bem from 'js/bem';
 import pageState from 'js/pageState.store';
+import Button from 'js/components/common/button';
 
 export function renderBackButton(isDisabled = false) {
   if (pageState.hasPreviousModal()) {
     return (
-      <bem.KoboButton
-        m='whitegray'
-        type='button'
-        onClick={pageState.switchToPreviousModal}
-        disabled={isDisabled}
-      >
-        {t('Back')}
-      </bem.KoboButton>
+      <Button
+        type='frame'
+        color='storm'
+        size='l'
+        onClick={pageState.switchToPreviousModal.bind(pageState)}
+        isDisabled={isDisabled}
+        label={t('Back')}
+      />
     );
   } else {
     return null;
diff --git a/jsapp/js/components/modalForms/projectSettings.es6 b/jsapp/js/components/modalForms/projectSettings.es6
index c9d40a5496..2ea2b43315 100644
--- a/jsapp/js/components/modalForms/projectSettings.es6
+++ b/jsapp/js/components/modalForms/projectSettings.es6
@@ -777,14 +777,14 @@ class ProjectSettings extends React.Component {
         <bem.Modal__footer>
           {this.renderBackButton()}
 
-          <bem.KoboButton
-            m='blue'
-            type='submit'
-            onClick={this.applyTemplate}
-            disabled={!this.state.chosenTemplateUid || this.state.isApplyTemplatePending}
-          >
-            {this.state.applyTemplateButton}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            onClick={this.applyTemplate.bind(this)}
+            isDisabled={!this.state.chosenTemplateUid || this.state.isApplyTemplatePending}
+            label={this.state.applyTemplateButton}
+          />
         </bem.Modal__footer>
       </bem.FormModal__form>
     );
@@ -850,14 +850,15 @@ class ProjectSettings extends React.Component {
         <bem.Modal__footer>
           {this.renderBackButton()}
 
-          <bem.KoboButton
-            m='blue'
-            type='submit'
-            onClick={this.importFromURL}
-            disabled={!this.state.importUrlButtonEnabled}
-          >
-            {this.state.importUrlButton}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            isSubmit
+            onClick={this.importFromURL.bind(this)}
+            isDisabled={!this.state.importUrlButtonEnabled}
+            label={this.state.importUrlButton}
+          />
         </bem.Modal__footer>
       </bem.FormModal__form>
     );
@@ -887,13 +888,14 @@ class ProjectSettings extends React.Component {
       >
         {this.props.context === PROJECT_SETTINGS_CONTEXTS.EXISTING &&
           <bem.Modal__footer>
-            <bem.KoboButton
-              type='submit'
-              m='blue'
-              onClick={this.handleSubmit}
-            >
-              {t('Save Changes')}
-            </bem.KoboButton>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              isSubmit
+              onClick={this.handleSubmit.bind(this)}
+              label={t('Save Changes')}
+            />
           </bem.Modal__footer>
         }
 
@@ -1002,16 +1004,21 @@ class ProjectSettings extends React.Component {
                 this.renderBackButton()
               }
 
-              <bem.KoboButton
-                m='blue'
-                type='submit'
-                onClick={this.handleSubmit}
-                disabled={this.state.isSubmitPending}
-              >
-                {this.state.isSubmitPending && t('Please wait…')}
-                {!this.state.isSubmitPending && this.props.context === PROJECT_SETTINGS_CONTEXTS.NEW && t('Create project')}
-                {!this.state.isSubmitPending && this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE && t('Save')}
-              </bem.KoboButton>
+              <Button
+                type='full'
+                color='blue'
+                size='l'
+                isSubmit
+                onClick={this.handleSubmit.bind(this)}
+                isDisabled={this.state.isSubmitPending}
+                label={(
+                  <>
+                    {this.state.isSubmitPending && t('Please wait…')}
+                    {!this.state.isSubmitPending && this.props.context === PROJECT_SETTINGS_CONTEXTS.NEW && t('Create project')}
+                    {!this.state.isSubmitPending && this.props.context === PROJECT_SETTINGS_CONTEXTS.REPLACE && t('Save')}
+                  </>
+                )}
+              />
             </bem.Modal__footer>
           }
 
@@ -1078,14 +1085,14 @@ class ProjectSettings extends React.Component {
         this.state.isUploadFilePending
       );
       return (
-        <bem.KoboButton
-          m='whitegray'
-          type='button'
-          onClick={this.displayPreviousStep}
-          disabled={isBackButtonDisabled}
-        >
-          {t('Back')}
-        </bem.KoboButton>
+        <Button
+          type='frame'
+          color='storm'
+          size='l'
+          onClick={this.displayPreviousStep.bind(this)}
+          isDisabled={isBackButtonDisabled}
+          label={t('Back')}
+        />
       );
     } else {
       return false;
diff --git a/jsapp/js/components/modalForms/translationSettings.es6 b/jsapp/js/components/modalForms/translationSettings.es6
index 78d9b255f6..558d38070a 100644
--- a/jsapp/js/components/modalForms/translationSettings.es6
+++ b/jsapp/js/components/modalForms/translationSettings.es6
@@ -20,6 +20,7 @@ import {
   escapeHtml,
 } from 'utils';
 import pageState from 'js/pageState.store';
+import Button from 'js/components/common/button';
 
 const LANGUAGE_SUPPORT_URL = 'language_dashboard.html';
 
@@ -91,17 +92,14 @@ export class TranslationSettings extends React.Component {
   hideAddLanguageForm() {
     this.setState({showAddLanguageForm: false});
   }
-  toggleRenameLanguageForm(evt) {
-    const index = parseInt(evt.currentTarget.dataset.index);
+  toggleRenameLanguageForm(index) {
     if (this.state.renameLanguageIndex === index) {
       this.setState({renameLanguageIndex: -1});
     } else {
       this.setState({renameLanguageIndex: index});
     }
   }
-  launchTranslationTableModal(evt) {
-    const index = evt.currentTarget.dataset.index;
-    const langString = evt.currentTarget.dataset.string;
+  launchTranslationTableModal(index, langString) {
     pageState.switchModal({
       type: MODAL_TYPES.FORM_TRANSLATIONS_TABLE,
       asset: this.state.asset,
@@ -140,8 +138,7 @@ export class TranslationSettings extends React.Component {
   getAllLanguages() {
     return this.state.translations;
   }
-  deleteLanguage(evt) {
-    const index = evt.currentTarget.dataset.index;
+  deleteLanguage(index) {
     const content = this.deleteTranslations(this.state.asset.content, index);
     if (content) {
       content.translations.splice(index, 1);
@@ -225,8 +222,7 @@ export class TranslationSettings extends React.Component {
     }
     return content;
   }
-  changeDefaultLanguage(evt) {
-    const index = evt.currentTarget.dataset.index;
+  changeDefaultLanguage(index) {
     const langString = this.state.translations[index];
 
     const dialog = alertify.dialog('confirm');
@@ -348,8 +344,8 @@ export class TranslationSettings extends React.Component {
               message={t('You have named translations in your form but the default translation is unnamed. Please specifiy a default translation or make an existing one default.')}
             />
           )}
-          {translations.map((l, i) => {
-            return (
+          {translations.map((l, i) =>
+            (
               <React.Fragment key={`lang-${i}`}>
                 <bem.FormView__cell m='translation'>
                   <bem.FormView__cell m='translation-name'>
@@ -362,63 +358,66 @@ export class TranslationSettings extends React.Component {
                     )}
 
                     {i !== 0 && (
-                      <bem.FormView__iconButton
-                        data-index={i}
-                        onClick={this.changeDefaultLanguage}
-                        disabled={
+                      <Button
+                        type='bare'
+                        color='storm'
+                        size='m'
+                        onClick={() => {this.changeDefaultLanguage(i);}}
+                        isDisabled={
                           this.state.isUpdatingDefaultLanguage ||
                           !this.canEditLanguages()
                         }
-                        data-tip={t('Make default')}
-                      >
-                        <i className='k-icon k-icon-language-default' />
-                      </bem.FormView__iconButton>
+                        tooltip={t('Make default')}
+                        startIcon='language-default'
+                      />
                     )}
                   </bem.FormView__cell>
 
                   <bem.FormView__cell m='translation-actions'>
-                    <bem.FormView__iconButton
-                      data-index={i}
-                      onClick={this.toggleRenameLanguageForm}
-                      disabled={
+                    <Button
+                      type='bare'
+                      color='storm'
+                      size='m'
+                      onClick={() => {this.toggleRenameLanguageForm(i);}}
+                      isDisabled={
                         this.state.isUpdatingDefaultLanguage ||
                         !this.canEditLanguages()
                       }
-                      data-tip={t('Edit language')}
-                      className='right-tooltip'
-                    >
-                      {this.state.renameLanguageIndex === i && (
-                        <i className='k-icon k-icon-close' />
-                      )}
-                      {this.state.renameLanguageIndex !== i && (
-                        <i className='k-icon k-icon-edit' />
-                      )}
-                    </bem.FormView__iconButton>
+                      startIcon={this.state.renameLanguageIndex === i ? 'close': 'edit'}
+                      tooltip={t('Edit language')}
+                      tooltipPosition='right'
+                    />
 
-                    <bem.FormView__iconButton
-                      data-index={i}
-                      data-string={this.state.translations[i]}
-                      onClick={this.launchTranslationTableModal}
-                      disabled={this.state.isUpdatingDefaultLanguage}
-                      data-tip={t('Update translations')}
-                      className='right-tooltip'
-                    >
-                      <i className='k-icon k-icon-language-settings' />
-                    </bem.FormView__iconButton>
+                    <Button
+                      type='bare'
+                      color='storm'
+                      size='m'
+                      onClick={() => {
+                        this.launchTranslationTableModal(
+                          i,
+                          this.state.translations[i]
+                        );
+                      }}
+                      isDisabled={this.state.isUpdatingDefaultLanguage}
+                      startIcon='language-settings'
+                      tooltip={t('Update translations')}
+                      tooltipPosition='right'
+                    />
 
                     {i !== 0 && (
-                      <bem.FormView__iconButton
-                        data-index={i}
-                        onClick={this.deleteLanguage}
-                        disabled={
+                      <Button
+                        type='bare'
+                        color='red'
+                        size='m'
+                        onClick={() => {this.deleteLanguage(i);}}
+                        isDisabled={
                           this.state.isUpdatingDefaultLanguage ||
                           !this.canEditLanguages()
                         }
-                        data-tip={t('Delete language')}
-                        className='right-tooltip'
-                      >
-                        <i className='k-icon k-icon-trash' />
-                      </bem.FormView__iconButton>
+                        startIcon='trash'
+                        tooltip={t('Delete language')}
+                        tooltipPosition='right'
+                      />
                     )}
                   </bem.FormView__cell>
                 </bem.FormView__cell>
@@ -434,27 +433,35 @@ export class TranslationSettings extends React.Component {
                   </bem.FormView__cell>
                 )}
               </React.Fragment>
-            );
-          })}
+            )
+          )}
           {!this.state.showAddLanguageForm && (
             <bem.FormView__cell m='add-language'>
-              <bem.KoboButton
-                m='blue'
-                onClick={this.showAddLanguageForm}
-                disabled={!this.canAddLanguages() || !this.canEditLanguages()}
-              >
-                {t('Add language')}
-              </bem.KoboButton>
+              <Button
+                type='full'
+                color='blue'
+                size='l'
+                onClick={this.showAddLanguageForm.bind(this)}
+                isDisabled={!this.canAddLanguages() || !this.canEditLanguages()}
+                label={t('Add language')}
+              />
             </bem.FormView__cell>
           )}
           {this.state.showAddLanguageForm && (
             <bem.FormView__cell m='add-language-form'>
-              <bem.FormView__link m='close' onClick={this.hideAddLanguageForm}>
-                <i className='k-icon k-icon-close' />
-              </bem.FormView__link>
+              <Button
+                className='add-language-form-close'
+                type='bare'
+                color='storm'
+                size='m'
+                onClick={this.hideAddLanguageForm.bind(this)}
+                startIcon='close'
+              />
+
               <bem.FormView__cell m='label'>
                 {t('Add a new language')}
               </bem.FormView__cell>
+
               <LanguageForm
                 onLanguageChange={this.onLanguageChange}
                 existingLanguages={this.getAllLanguages()}
diff --git a/jsapp/js/components/modalForms/translationTable.es6 b/jsapp/js/components/modalForms/translationTable.es6
index 9493ef3173..6acb037cf8 100644
--- a/jsapp/js/components/modalForms/translationTable.es6
+++ b/jsapp/js/components/modalForms/translationTable.es6
@@ -19,6 +19,7 @@ import {
   hasAssetRestriction,
 } from 'js/components/locking/lockingUtils';
 import pageState from 'js/pageState.store';
+import Button from 'js/components/common/button';
 
 const SAVE_BUTTON_TEXT = {
   DEFAULT: t('Save Changes'),
@@ -113,21 +114,21 @@ export class TranslationTable extends React.Component {
         },
       },
       {
-        Header: () => {
-          return (
+        Header: () =>
+          (
             <React.Fragment>
-              <bem.FormView__iconButton
+              <Button
+                type='bare'
+                color='storm'
+                size='m'
                 onClick={this.toggleRenameLanguageForm.bind(this)}
-                disabled={!this.canEditLanguages()}
-                className='right-tooltip form-view__icon-button-edit'
-              >
-                {this.state.showLanguageForm && <i className='k-icon k-icon-close' />}
-                {!this.state.showLanguageForm && <i className='k-icon k-icon-edit' />}
-              </bem.FormView__iconButton>
+                isDisabled={!this.canEditLanguages()}
+                startIcon={this.state.showLanguageForm ? 'close' : 'edit'}
+              />
               {`${translations[langIndex]} ${editableColTitle}`}
             </React.Fragment>
-          );
-        },
+          )
+        ,
         accessor: 'translation',
         className: 'translation',
         Cell: (cellInfo) => {
@@ -337,17 +338,22 @@ export class TranslationTable extends React.Component {
         </div>
 
         <bem.Modal__footer>
-          <bem.KoboButton m='whitegray' onClick={this.onBack.bind(this)}>
-            {t('Back')}
-          </bem.KoboButton>
+          <Button
+            type='frame'
+            color='storm'
+            size='l'
+            onClick={this.onBack.bind(this)}
+            label={t('Back')}
+          />
 
-          <bem.KoboButton
-            m='blue'
+          <Button
+            type='full'
+            color='blue'
+            size='l'
             onClick={this.saveChanges.bind(this)}
-            disabled={this.state.isSaveChangesButtonPending}
-          >
-            {this.state.saveChangesButtonText}
-          </bem.KoboButton>
+            isDisabled={this.state.isSaveChangesButtonPending}
+            label={this.state.saveChangesButtonText}
+          />
         </bem.Modal__footer>
       </bem.FormModal>
     );
diff --git a/jsapp/js/components/permissions/sharingForm.component.tsx b/jsapp/js/components/permissions/sharingForm.component.tsx
index 88081b2aaf..3567074c4c 100644
--- a/jsapp/js/components/permissions/sharingForm.component.tsx
+++ b/jsapp/js/components/permissions/sharingForm.component.tsx
@@ -277,13 +277,14 @@ export default class SharingForm extends React.Component<
 
           {this.state.isAddUserEditorVisible && (
             <bem.FormModal__item m={['gray-row', 'copy-team-permissions']}>
-              <bem.Button
-                m='icon'
+              <Button
+                color='storm'
+                type='bare'
+                size='l'
+                startIcon='close'
                 className='user-permissions-editor-closer'
                 onClick={this.toggleAddUserEditor.bind(this)}
-              >
-                <i className='k-icon k-icon-close' />
-              </bem.Button>
+              />
 
               <UserAssetPermsEditor
                 assetUid={this.props.assetUid}
diff --git a/jsapp/js/components/permissions/sharingForm.scss b/jsapp/js/components/permissions/sharingForm.scss
index fb791c7f85..6396090b0d 100644
--- a/jsapp/js/components/permissions/sharingForm.scss
+++ b/jsapp/js/components/permissions/sharingForm.scss
@@ -89,10 +89,6 @@ $s-gray-row-spacing: 10px;
     flex-direction: row;
     align-items: center;
     min-height: 50px;
-
-    > .mdl-button {
-      min-width: 32px;
-    }
   }
 
   .user-row__avatar {
@@ -135,7 +131,7 @@ $s-gray-row-spacing: 10px;
   // The closing button is not a part of UserAssetPermsEditor
   .user-permissions-editor-closer {
     position: absolute;
-    top: 5px;
+    top: 10px;
     right: 5px;
   }
 }
diff --git a/jsapp/js/components/permissions/userPermissionRow.component.tsx b/jsapp/js/components/permissions/userPermissionRow.component.tsx
index 0328db4f3c..5393939e29 100644
--- a/jsapp/js/components/permissions/userPermissionRow.component.tsx
+++ b/jsapp/js/components/permissions/userPermissionRow.component.tsx
@@ -9,6 +9,7 @@ import permConfig from './permConfig';
 import type {PermissionBase, PermissionResponse} from 'js/dataInterface';
 import type {AssignablePermsMap} from './sharingForm.component';
 import {getPermLabel, getFriendlyPermName} from './utils';
+import Button from 'js/components/common/button';
 
 interface UserPermissionRowProps {
   assetUid: string;
@@ -169,21 +170,21 @@ export default class UserPermissionRow extends React.Component<
               {this.renderPermissions(this.props.permissions)}
               {this.props.userCanEditPerms && (
                 <>
-                  <bem.Button m='icon' onClick={this.toggleEditForm.bind(this)}>
-                    {this.state.isEditFormVisible && (
-                      <i className='k-icon k-icon-close' />
-                    )}
-                    {!this.state.isEditFormVisible && (
-                      <i className='k-icon k-icon-edit' />
-                    )}
-                  </bem.Button>
-
-                  <bem.Button
-                    m='icon'
+                  <Button
+                    type='bare'
+                    color='storm'
+                    size='m'
+                    startIcon={this.state.isEditFormVisible ? 'close' : 'edit'}
+                    onClick={this.toggleEditForm.bind(this)}
+                  />
+
+                  <Button
+                    type='bare'
+                    color='red'
+                    size='m'
+                    startIcon='trash'
                     onClick={this.showRemovePermissionsPrompt.bind(this)}
-                  >
-                    <i className='k-icon k-icon-trash' />
-                  </bem.Button>
+                  />
                 </>
               )}
             </React.Fragment>
diff --git a/jsapp/js/components/projectDownloads/anonymousExports.es6 b/jsapp/js/components/projectDownloads/anonymousExports.es6
index bf5b9d0340..4684efe5f2 100644
--- a/jsapp/js/components/projectDownloads/anonymousExports.es6
+++ b/jsapp/js/components/projectDownloads/anonymousExports.es6
@@ -11,6 +11,7 @@ import {getContextualDefaultExportFormat} from 'js/components/projectDownloads/e
 import exportsStore from 'js/components/projectDownloads/exportsStore';
 import ExportTypeSelector from 'js/components/projectDownloads/exportTypeSelector';
 import ExportFetcher from 'js/components/projectDownloads/exportFetcher';
+import Button from 'js/components/common/button';
 
 /**
  * A compontent that ROUTES.FORM_DOWNLOADS route is displayint for not logged in
@@ -119,11 +120,6 @@ export default class AnonymousExports extends React.Component {
    * selector and the export button for simplicity.
    */
   render() {
-    const buttonModifiers = ['blue'];
-    if (this.state.isPending) {
-      buttonModifiers.push('pending');
-    }
-
     return (
       <bem.FormView__cell m={['box', 'padding']}>
         <bem.ProjectDownloads__anonymousRow>
@@ -134,17 +130,15 @@ export default class AnonymousExports extends React.Component {
             />
           </bem.ProjectDownloads__exportsSelector>
 
-          <bem.KoboButton
-            m={buttonModifiers}
-            type='submit'
-            onClick={this.onSubmit}
-            disabled={this.state.isPending}
-          >
-            {t('Export')}
-            {this.state.isPending &&
-              <i className='k-spin k-icon k-icon-spinner'/>
-            }
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            isSubmit
+            onClick={this.onSubmit.bind(this)}
+            isPending={this.state.isPending}
+            label={t('Export')}
+          />
         </bem.ProjectDownloads__anonymousRow>
       </bem.FormView__cell>
     );
diff --git a/jsapp/js/components/projectDownloads/projectExportsCreator.es6 b/jsapp/js/components/projectDownloads/projectExportsCreator.es6
index ee93342ab4..5cc0e42004 100644
--- a/jsapp/js/components/projectDownloads/projectExportsCreator.es6
+++ b/jsapp/js/components/projectDownloads/projectExportsCreator.es6
@@ -33,6 +33,7 @@ import {getColumnLabel} from 'js/components/submissions/tableUtils';
 import exportsStore from 'js/components/projectDownloads/exportsStore';
 import ExportTypeSelector from 'js/components/projectDownloads/exportTypeSelector';
 import {userCan} from 'js/components/permissions/utils';
+import Button from 'js/components/common/button';
 
 const NAMELESS_EXPORT_NAME = t('Latest unsaved settings');
 
@@ -668,28 +669,32 @@ export default class ProjectExportsCreator extends React.Component {
               label={t('Select questions to be exported')}
             />
 
-            <bem.ProjectDownloads__textButton
-              disabled={(
+            <Button
+              type='frame'
+              color='blue'
+              size='s'
+              isDisabled={(
                 !this.state.isCustomSelectionEnabled ||
                 this.state.selectedRows.size === this.state.selectableRowsCount
               )}
-              onClick={this.selectAllRows}
-            >
-              {t('Select all')}
-            </bem.ProjectDownloads__textButton>
+              onClick={this.selectAllRows.bind(this)}
+              label={t('Select all')}
+            />
 
             <span className='project-downloads__vr'/>
 
-            <bem.ProjectDownloads__textButton
-              disabled={(
+            <Button
+              type='frame'
+              color='blue'
+              size='s'
+              isDisabled={(
                 !this.state.isCustomSelectionEnabled ||
                 // We check vs 1 as `_uuid` is always required.
                 this.state.selectedRows.size <= 1
               )}
-              onClick={this.clearSelectedRows}
-            >
-              {t('Deselect all')}
-            </bem.ProjectDownloads__textButton>
+              onClick={this.clearSelectedRows.bind(this)}
+              label={t('Deselect all')}
+            />
           </bem.ProjectDownloads__columnRow>
 
           {this.renderRowsSelector()}
@@ -742,15 +747,15 @@ export default class ProjectExportsCreator extends React.Component {
             </label>
           </bem.ProjectDownloads__selectorRow>
 
-          <bem.ProjectDownloads__textButton onClick={this.toggleAdvancedView}>
-            {t('Advanced options')}
-            {this.state.isAdvancedViewVisible && (
-              <i className='k-icon k-icon-angle-up' />
-            )}
-            {!this.state.isAdvancedViewVisible && (
-              <i className='k-icon k-icon-angle-down' />
-            )}
-          </bem.ProjectDownloads__textButton>
+          <Button
+            type='bare'
+            color='blue'
+            size='s'
+            onClick={this.toggleAdvancedView.bind(this)}
+            label={t('Advanced options')}
+            endIcon={this.state.isAdvancedViewVisible ? 'angle-up' : 'angle-down'}
+            className='project-downloads__advanced-button'
+          />
 
           <hr />
 
@@ -779,30 +784,34 @@ export default class ProjectExportsCreator extends React.Component {
 
                   {this.state.selectedDefinedExport &&
                     userCan(PERMISSIONS_CODENAMES.manage_asset, this.props.asset) &&
-                    <bem.ProjectDownloads__deleteSettingsButton
-                      onClick={this.onDeleteExportSetting.bind(
-                        this,
-                        this.state.selectedDefinedExport.data.uid
-                      )}
-                      >
-                        <i className='k-icon k-icon-trash'/>
-                      </bem.ProjectDownloads__deleteSettingsButton>
+                      <Button
+                        type='bare'
+                        color='red'
+                        size='m'
+                        onClick={this.onDeleteExportSetting.bind(
+                          this,
+                          this.state.selectedDefinedExport.data.uid
+                        )}
+                        startIcon='trash'
+                        className='project-downloads__delete-settings-button'
+                      />
                     }
                   </React.Fragment>
                 }
               </bem.ProjectDownloads__exportsSelector>
 
-              <bem.KoboButton
-                m='blue'
-                type='submit'
-                onClick={this.onSubmit}
-                disabled={
+              <Button
+                type='full'
+                color='blue'
+                size='l'
+                isSubmit
+                onClick={this.onSubmit.bind(this)}
+                isDisabled={
                   (this.state.isCustomSelectionEnabled && this.state.selectedRows.size === 0) ||
                   this.state.isPending
                 }
-              >
-                {t('Export')}
-              </bem.KoboButton>
+                label={t('Export')}
+              />
             </bem.ProjectDownloads__submitRow>
           </bem.FormView__form>
       </bem.FormView__cell>
diff --git a/jsapp/js/components/projectDownloads/projectExportsList.es6 b/jsapp/js/components/projectDownloads/projectExportsList.es6
index c3694a8f51..70d5b061d7 100644
--- a/jsapp/js/components/projectDownloads/projectExportsList.es6
+++ b/jsapp/js/components/projectDownloads/projectExportsList.es6
@@ -15,6 +15,7 @@ import {
 import exportsStore from 'js/components/projectDownloads/exportsStore';
 import ExportFetcher from 'js/components/projectDownloads/exportFetcher';
 import {userCan} from 'js/components/permissions/utils';
+import Button from 'js/components/common/button';
 
 /**
  * Component that displays all available downloads (for logged in user only).
@@ -208,15 +209,18 @@ export default class ProjectExportsList extends React.Component {
           {this.renderBooleanAnswer(exportData.data.fields_from_all_versions)}
         </bem.SimpleTable__cell>
 
-        <bem.SimpleTable__cell m='text-right'>
+        <bem.SimpleTable__cell className='export-list-buttons'>
           {exportData.status === EXPORT_STATUSES.complete &&
-            <a
-              className='kobo-light-button kobo-light-button--blue'
-              href={exportData.result}
-            >
-              <i className='k-icon k-icon-download'/>
-              {t('Download')}
-            </a>
+            <Button
+              type='frame'
+              color='blue'
+              size='m'
+              startIcon='download'
+              label={t('Download')}
+              onClick={() => {
+                window.open(exportData.result, '_blank');
+              }}
+            />
           }
 
           {exportData.status === EXPORT_STATUSES.error &&
@@ -233,12 +237,13 @@ export default class ProjectExportsList extends React.Component {
           }
 
           {userCan(PERMISSIONS_CODENAMES.view_submissions, this.props.asset) &&
-            <bem.KoboLightButton
-              m={['red', 'icon-only']}
+            <Button
+              type='frame'
+              color='red'
+              size='m'
+              startIcon='trash'
               onClick={this.deleteExport.bind(this, exportData.uid)}
-            >
-              <i className='k-icon k-icon-trash'/>
-            </bem.KoboLightButton>
+            />
           }
         </bem.SimpleTable__cell>
       </bem.SimpleTable__row>
diff --git a/jsapp/js/components/reports/customReportForm.es6 b/jsapp/js/components/reports/customReportForm.es6
index 0c15175644..9bf79bdcaf 100644
--- a/jsapp/js/components/reports/customReportForm.es6
+++ b/jsapp/js/components/reports/customReportForm.es6
@@ -3,6 +3,7 @@ import autoBind from 'react-autobind';
 import Checkbox from 'js/components/common/checkbox';
 import {actions} from 'js/actions';
 import bem from 'js/bem';
+import Button from 'js/components/common/button';
 
 export default class CustomReportForm extends React.Component {
   constructor(props) {
@@ -79,13 +80,22 @@ export default class CustomReportForm extends React.Component {
 
         <bem.Modal__footer>
           {this.props.asset.report_custom[crid] && (
-            <bem.KoboButton m='red' onClick={this.deleteCustomReport}>
-              {t('Delete')}
-            </bem.KoboButton>
+            <Button
+              type='full'
+              color='red'
+              size='l'
+              onClick={this.deleteCustomReport.bind(this)}
+              label={t('Delete')}
+            />
           )}
-          <bem.KoboButton m='blue' onClick={this.saveCustomReport}>
-            {t('Save')}
-          </bem.KoboButton>
+
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            onClick={this.saveCustomReport.bind(this)}
+            label={t('Save')}
+          />
         </bem.Modal__footer>
       </div>
     );
diff --git a/jsapp/js/components/reports/questionGraphSettings.es6 b/jsapp/js/components/reports/questionGraphSettings.es6
index 94170d60e7..78a9705009 100644
--- a/jsapp/js/components/reports/questionGraphSettings.es6
+++ b/jsapp/js/components/reports/questionGraphSettings.es6
@@ -5,6 +5,8 @@ import bem from 'js/bem';
 import Modal from 'js/components/common/modal';
 import ChartTypePicker from './chartTypePicker.component';
 import ChartColorsPicker from './chartColorsPicker';
+import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 export default class QuestionGraphSettings extends React.Component {
   constructor(props) {
@@ -91,18 +93,13 @@ export default class QuestionGraphSettings extends React.Component {
 
     var tabs = [t('Chart Type'), t('Colors')];
     var modalTabs = tabs.map(function (tab, i) {
-      let tabClassNames = [
-        'mdl-button',
-        'mdl-button--tab',
-      ];
-      if (this.state.activeModalTab === i) {
-        tabClassNames.push('active');
-      }
-
       return (
         <button
-          className={tabClassNames.join(' ')}
-          onClick={this.toggleTab}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === i,
+          })}
+          onClick={this.toggleTab.bind(this)}
           data-index={i}
           key={i}
         >
@@ -139,19 +136,22 @@ export default class QuestionGraphSettings extends React.Component {
           {(reportStyle.report_type ||
             reportStyle.report_colors ||
             reportStyle.width) && (
-            <bem.Button
-              className='reset'
+            <Button
+              type='full'
+              color='red'
+              size='l'
               onClick={this.saveQS.bind(this, true)}
-            >
-              {t('Reset')}
-            </bem.Button>
+              label={t('Reset')}
+            />
           )}
-          <bem.Button
-            className='primary'
+
+          <Button
+            type='full'
+            color='blue'
+            size='l'
             onClick={this.saveQS.bind(this, false)}
-          >
-            {t('Save')}
-          </bem.Button>
+            label={t('Save')}
+          />
         </Modal.Footer>
       </bem.GraphSettings>
     );
diff --git a/jsapp/js/components/reports/reportStyleSettings.es6 b/jsapp/js/components/reports/reportStyleSettings.es6
index 950c39e68e..463ababde0 100644
--- a/jsapp/js/components/reports/reportStyleSettings.es6
+++ b/jsapp/js/components/reports/reportStyleSettings.es6
@@ -6,6 +6,8 @@ import bem from 'js/bem';
 import Modal from 'js/components/common/modal';
 import ChartTypePicker from './chartTypePicker.component';
 import ChartColorsPicker from './chartColorsPicker';
+import Button from 'js/components/common/button';
+import cx from 'classnames';
 
 export default class ReportStyleSettings extends React.Component {
   constructor(props) {
@@ -122,17 +124,13 @@ export default class ReportStyleSettings extends React.Component {
     }
 
     var modalTabs = tabs.map(function (tab, i) {
-      let tabClassNames = [
-        'mdl-button',
-        'mdl-button--tab',
-      ];
-      if (this.state.activeModalTab === i) {
-        tabClassNames.push('active');
-      }
       return (
         <button
-          className={tabClassNames.join(' ')}
-          onClick={this.toggleTab}
+          className={cx({
+            'legacy-modal-tab-button': true,
+            'legacy-modal-tab-button--active': this.state.activeModalTab === i,
+          })}
+          onClick={this.toggleTab.bind(this)}
           data-index={i}
           key={i}
         >
@@ -186,9 +184,13 @@ export default class ReportStyleSettings extends React.Component {
               )}
           </div>
           <Modal.Footer>
-            <bem.KoboButton m='blue' onClick={this.saveReportStyles}>
-              {t('Save')}
-            </bem.KoboButton>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              onClick={this.saveReportStyles.bind(this)}
+              label={t('Save')}
+            />
           </Modal.Footer>
         </Modal.Body>
       </bem.GraphSettings>
diff --git a/jsapp/js/components/reports/reportViewItem.component.tsx b/jsapp/js/components/reports/reportViewItem.component.tsx
index fdc4a20cca..e58d193f83 100644
--- a/jsapp/js/components/reports/reportViewItem.component.tsx
+++ b/jsapp/js/components/reports/reportViewItem.component.tsx
@@ -308,6 +308,7 @@ class ReportViewItem extends React.Component<ReportViewItemProps> {
                   this.props.triggerQuestionSettings(this.props.name)
                 }
                 tooltip={t('Override Graph Style')}
+                tooltipPosition='right'
               />
             </span>
           )}
diff --git a/jsapp/js/components/reports/reports.js b/jsapp/js/components/reports/reports.js
index 06fea31a44..ba91f6ab7c 100644
--- a/jsapp/js/components/reports/reports.js
+++ b/jsapp/js/components/reports/reports.js
@@ -21,6 +21,7 @@ import ReportStyleSettings from './reportStyleSettings';
 import './reports.scss';
 import {userCan} from 'js/components/permissions/utils';
 import CenteredMessage from 'js/components/common/centeredMessage.component';
+import Button from 'js/components/common/button';
 
 export default class Reports extends React.Component {
   constructor(props) {
@@ -337,83 +338,98 @@ export default class Reports extends React.Component {
 
     return (
       <bem.FormView__reportButtons>
-        <PopoverMenu type='custom-reports' triggerLabel={menuLabel}>
-          <bem.PopoverMenu__link
-            key='default'
-            data-name=''
-            onClick={this.triggerDefaultReport}
-            className={!this.state.currentCustomReport ? 'active' : ''}
-          >
-            {t('Default Report')}
-          </bem.PopoverMenu__link>
-          {customReportsList.map(function (m) {
-            let itemClassName;
-            if (
-              _this.state.currentCustomReport &&
-              _this.state.currentCustomReport.crid === m.crid
-            ) {
-              itemClassName = 'active';
+        <div className='form-view__report-buttons-left'>
+          <PopoverMenu
+            type='custom-reports'
+            triggerLabel={
+              <Button
+                type='frame'
+                color='storm'
+                size='m'
+                label={menuLabel}
+                endIcon='angle-down'
+              />
             }
-            return (
-              <bem.PopoverMenu__link
-                key={m.crid}
-                data-crid={m.crid}
-                onClick={_this.setCustomReport}
-                className={itemClassName}
-              >
-                {m.name || t('Untitled report')}
-              </bem.PopoverMenu__link>
-            );
-          })}
-          {userCan('change_asset', this.state.asset) && (
+          >
             <bem.PopoverMenu__link
-              key='new'
-              onClick={this.toggleCustomReportModal}
+              key='default'
+              data-name=''
+              onClick={this.triggerDefaultReport}
+              className={!this.state.currentCustomReport ? 'active' : ''}
             >
-              {t('Create New Report')}
+              {t('Default Report')}
             </bem.PopoverMenu__link>
-          )}
-        </PopoverMenu>
-
-        {this.state.currentCustomReport && (
-          <bem.Button
-            m='icon'
-            className='report-button__edit'
-            onClick={this.editCustomReport}
-            data-tip={t('Edit Report Questions')}
-          >
-            <i className='k-icon k-icon-edit' />
-          </bem.Button>
-        )}
-
-        <bem.Button
-          m='icon'
-          className='report-button__expand right-tooltip'
-          onClick={this.toggleFullscreen}
-          data-tip={t('Toggle fullscreen')}
-        >
-          <i className='k-icon k-icon-expand' />
-        </bem.Button>
-
-        <bem.Button
-          m='icon'
-          className='report-button__print'
-          onClick={launchPrinting}
-          data-tip={t('Print')}
-        >
-          <i className='k-icon k-icon-print' />
-        </bem.Button>
-
-        {userCan('change_asset', this.state.asset) && (
-          <bem.Button
-            m='icon'
-            className='report-button__settings'
-            onClick={this.toggleReportGraphSettings}
-            data-tip={t('Configure Report Style')}
-          >
-            <i className='k-icon k-icon-settings' />
-          </bem.Button>
-        )}
+            {customReportsList.map(function (m) {
+              let itemClassName;
+              if (
+                _this.state.currentCustomReport &&
+                _this.state.currentCustomReport.crid === m.crid
+              ) {
+                itemClassName = 'active';
+              }
+              return (
+                <bem.PopoverMenu__link
+                  key={m.crid}
+                  data-crid={m.crid}
+                  onClick={_this.setCustomReport}
+                  className={itemClassName}
+                >
+                  {m.name || t('Untitled report')}
+                </bem.PopoverMenu__link>
+              );
+            })}
+            {userCan('change_asset', this.state.asset) && (
+              <bem.PopoverMenu__link
+                key='new'
+                onClick={this.toggleCustomReportModal}
+              >
+                {t('Create New Report')}
+              </bem.PopoverMenu__link>
+            )}
+          </PopoverMenu>
+
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            startIcon='edit'
+            onClick={this.editCustomReport.bind(this)}
+            tooltip={t('Edit Report Questions')}
+            isDisabled={!this.state.currentCustomReport}
+          />
+
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            startIcon='settings'
+            onClick={this.toggleReportGraphSettings.bind(this)}
+            tooltip={t('Configure Report Style')}
+            isDisabled={!userCan('change_asset', this.state.asset)}
+          />
+        </div>
+
+        <div className='form-view__report-buttons-right'>
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            startIcon='print'
+            onClick={launchPrinting}
+            tooltip={t('Print')}
+            tooltipPosition='right'
+          />
+
+          <Button
+            type='bare'
+            color='storm'
+            size='m'
+            startIcon='expand'
+            onClick={this.toggleFullscreen.bind(this)}
+            tooltip={t('Toggle fullscreen')}
+            tooltipPosition='right'
+          />
+        </div>
       </bem.FormView__reportButtons>
     );
   }
@@ -545,24 +561,33 @@ export default class Reports extends React.Component {
                 <bem.PrintOnly>
                   <h3>{asset.name}</h3>
                 </bem.PrintOnly>
+
                 {!this.state.currentCustomReport &&
                   this.state.reportLimit &&
                   reportData.length &&
                   this.state.reportData.length > this.state.reportLimit && (
-                    <bem.FormView__cell m={['centered', 'reportLimit']}>
-                      <div>
-                        {t(
-                          'For performance reasons, this report only includes the first ## questions.'
-                        ).replace('##', this.state.reportLimit)}
-                      </div>
-                      <bem.Button m='colored' onClick={this.resetReportLimit}>
-                        {t('Show all (##)').replace(
-                          '##',
-                          this.state.reportData.length
-                        )}
-                      </bem.Button>
-                    </bem.FormView__cell>
-                  )}
+                    <InlineMessage
+                      type='warning'
+                      message={
+                        <div className='report-view__limit-message'>
+                          <p>
+                            {t(
+                              'For performance reasons, this report only includes the first ## questions.'
+                            ).replace('##', this.state.reportLimit)}
+                          </p>
+
+                          <Button
+                            type='full'
+                            color='storm'
+                            size='s'
+                            onClick={this.resetReportLimit.bind(this)}
+                            label={t('Show all (##)').replace('##', this.state.reportData.length)}
+                          />
+                        </div>
+                      }
+                    />
+                  )
+                }
 
                 <InlineMessage
                   type='warning'
diff --git a/jsapp/js/components/reports/reports.scss b/jsapp/js/components/reports/reports.scss
index 9516e6d844..323b07da10 100644
--- a/jsapp/js/components/reports/reports.scss
+++ b/jsapp/js/components/reports/reports.scss
@@ -2,13 +2,19 @@
 @use 'scss/sizes';
 @use 'scss/variables';
 @use 'scss/breakpoints';
+@use 'scss/mixins';
 
 .report-view {
   padding: 12px;
 }
 
-.form-view__cell--reportLimit {
-  padding-bottom: sizes.$x16;
+.report-view__limit-message {
+  @include mixins.centerRowFlex;
+  gap: 10px;
+
+  p {
+    margin: 0;
+  }
 }
 
 .report-view__item {
@@ -101,40 +107,22 @@
 
 // report buttons
 .form-view__reportButtons {
-  margin-bottom: 12px;
-
-  button:not(.mdl-button--icon) {
-    text-transform: uppercase;
-    padding-left: 0;
-  }
-
-  button {
-    &.report-button__edit,
-    &.report-button__settings {
-      overflow: visible;
-    }
-
-    &.report-button__expand,
-    &.report-button__print {
-      float: right;
-      margin-right: 0;
-      margin-left: sizes.$x8;
-      overflow: visible;
-    }
-  }
+  @include mixins.centerRowFlex;
+  gap: 10px;
 
   + .form-view__cell--iframe {
     height: calc(100% - sizes.$x60);
   }
 }
 
-.form-view__reportButtons button.report-button__print {
-  display: none;
+.form-view__report-buttons-left {
+  @include mixins.centerRowFlex;
+  gap: 5px;
+  flex: 1;
 }
 
-.form-view__reportButtons button.report-button__expand {
-  padding-left: 4px;
-  padding-right: 4px;
+.form-view__report-buttons-right {
+  @include mixins.centerRowFlex;
 }
 
 // report graph settings
@@ -290,18 +278,4 @@
     width: 80%;
     margin-left: 10%;
   }
-
-  .form-view__reportButtons {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .form-view__reportButtons button.report-button__print {
-    display: initial;
-  }
-
-  .form-view__reportButtons button.report-button__expand {
-    padding-left: 0;
-    padding-right: 0;
-  }
 }
diff --git a/jsapp/js/components/submissions/columnsHideDropdown.scss b/jsapp/js/components/submissions/columnsHideDropdown.scss
index d2def1a1aa..546cea3ad6 100644
--- a/jsapp/js/components/submissions/columnsHideDropdown.scss
+++ b/jsapp/js/components/submissions/columnsHideDropdown.scss
@@ -6,7 +6,7 @@
 // nested selector needed for specificity
 .kobo-dropdown[data-name='columns-hide-dropdown']  {
   @include mixins.centerRowFlex;
-  margin-right: 10px;
+  margin-right: 20px;
 
   .kobo-dropdown__menu {
     color: colors.$kobo-gray-40;
@@ -19,28 +19,6 @@
   }
 }
 
-.columns-hide-dropdown-trigger {
-  cursor: pointer;
-  background: none;
-  border: none;
-  margin: 0;
-  padding: 0;
-  color: colors.$kobo-gray-55;
-  font-size: variables.$base-font-size;
-  font-weight: 500;
-  line-height: 24px;
-
-  &:hover {
-    color: colors.$kobo-blue;
-  }
-
-  .k-icon {
-    font-size: 22px;
-    vertical-align: top;
-    margin-right: 5px;
-  }
-}
-
 .columns-hide-form {
   padding: 6px 15px;
   width: 360px;
diff --git a/jsapp/js/components/submissions/columnsHideDropdown.tsx b/jsapp/js/components/submissions/columnsHideDropdown.tsx
index 1da19eb9e2..c98fd2bb66 100644
--- a/jsapp/js/components/submissions/columnsHideDropdown.tsx
+++ b/jsapp/js/components/submissions/columnsHideDropdown.tsx
@@ -3,6 +3,7 @@ import KoboDropdown from 'js/components/common/koboDropdown';
 import ColumnsHideForm from 'js/components/submissions/columnsHideForm';
 import type {ColumnsHideFormProps} from 'js/components/submissions/columnsHideForm';
 import './columnsHideDropdown.scss';
+import Button from 'js/components/common/button'
 
 /**
  * A wrapper around KoboDropdown to be used atop table to bulk hide columns.
@@ -13,10 +14,13 @@ export default function ColumnsHideDropdown(props: ColumnsHideFormProps) {
       placement='down-left'
       name='columns-hide-dropdown'
       triggerContent={
-        <span className='columns-hide-dropdown-trigger'>
-          <i className='k-icon k-icon-hide' />
-          {t('hide fields')}
-        </span>
+        <Button
+          type='bare'
+          color='storm'
+          size='m'
+          startIcon='hide'
+          label={t('hide fields')}
+        />
       }
       menuContent={<ColumnsHideForm {...props} />}
       hideOnMenuClick={false}
diff --git a/jsapp/js/components/submissions/columnsHideForm.tsx b/jsapp/js/components/submissions/columnsHideForm.tsx
index 10b3fbbe10..6b15601024 100644
--- a/jsapp/js/components/submissions/columnsHideForm.tsx
+++ b/jsapp/js/components/submissions/columnsHideForm.tsx
@@ -10,6 +10,7 @@ import {FUSE_OPTIONS} from 'js/constants';
 import koboDropdownActions from 'js/components/common/koboDropdownActions';
 import type {AssetResponse, SubmissionResponse} from 'js/dataInterface';
 import './columnsHideDropdown.scss';
+import Button from 'js/components/common/button';
 
 bem.ColumnsHideForm = makeBem(null, 'columns-hide-form', 'section');
 bem.ColumnsHideForm__message = makeBem(bem.ColumnsHideForm, 'message', 'p');
@@ -179,21 +180,25 @@ class ColumnsHideForm extends React.Component<
         )}
 
         <bem.ColumnsHideForm__footer>
-          <bem.KoboLightButton
-            m={['red', 'full-width']}
+          <Button
+            type='frame'
+            color='red'
+            size='s'
+            isFullWidth
             onClick={this.onReset.bind(this)}
-            disabled={this.state.isPending}
-          >
-            {t('Reset')}
-          </bem.KoboLightButton>
-
-          <bem.KoboLightButton
-            m={['blue', 'full-width']}
+            isPending={this.state.isPending}
+            label={t('Reset')}
+          />
+
+          <Button
+            type='frame'
+            color='blue'
+            size='s'
+            isFullWidth
             onClick={this.onApply.bind(this)}
-            disabled={this.state.isPending}
-          >
-            {t('Apply')}
-          </bem.KoboLightButton>
+            isPending={this.state.isPending}
+            label={t('Apply')}
+          />
         </bem.ColumnsHideForm__footer>
       </bem.ColumnsHideForm>
     );
diff --git a/jsapp/js/components/submissions/mediaCell.tsx b/jsapp/js/components/submissions/mediaCell.tsx
index 12325a2610..99dbb05704 100644
--- a/jsapp/js/components/submissions/mediaCell.tsx
+++ b/jsapp/js/components/submissions/mediaCell.tsx
@@ -129,14 +129,17 @@ class MediaCell extends React.Component<MediaCellProps, {}> {
         <bem.TableMediaPreviewHeader__options>
           {mediaURL &&
             <a
-              className='kobo-light-button kobo-light-button--blue'
               // TODO: once we get this button to `save as`, remove this target
               target='_blank'
               href={mediaURL}
             >
-              {t('download')}
-
-              <i className='k-icon k-icon-download'/>
+              <Button
+                type='frame'
+                color='blue'
+                size='s'
+                startIcon='download'
+                label={t('download')}
+              />
             </a>
           }
 
diff --git a/jsapp/js/components/submissions/table.scss b/jsapp/js/components/submissions/table.scss
index 0afaef0c94..df418468cb 100644
--- a/jsapp/js/components/submissions/table.scss
+++ b/jsapp/js/components/submissions/table.scss
@@ -3,6 +3,7 @@
 @use 'scss/breakpoints';
 @use 'js/components/common/checkbox';
 @use 'sass:color';
+@use 'scss/mixins';
 
 // These are custom styles for Table View table.
 
@@ -22,7 +23,7 @@ $s-data-table-font: 13px;
   background: colors.$kobo-white;
 
   .form-view__group--table-header {
-    padding: 10px 0px 0px 0px;
+    padding: 15px 0px 5px 0px;
     display: flex;
     justify-content: space-between;
     align-content: center;
@@ -34,12 +35,8 @@ $s-data-table-font: 13px;
     }
 
     .form-view__item--table-buttons {
-      text-align: right;
-
-      button {
-        overflow: visible;
-        margin-left: 10px;
-      }
+      @include mixins.centerRowFlex;
+      gap: 5px;
     }
   }
 }
@@ -495,53 +492,6 @@ $s-data-table-font: 13px;
   }
 }
 
-.table-meta {
-  flex-grow: 1;
-  min-height: 30px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .bulk-clear-badge-icon {
-    margin-right: -5px;
-    cursor: pointer;
-    padding: 0 5px;
-    border-radius: 50%;
-    color: colors.$kobo-gray-24;
-
-    &:hover {
-      color: colors.$kobo-white;
-      background-color: colors.$kobo-red;
-    }
-  }
-
-  .table-meta__bulk-options {
-    > *:not(:first-child) {
-      margin-left: 10px;
-    }
-  }
-
-  .table-meta__counter {
-    display: inline;
-    white-space: nowrap;
-  }
-}
-
-.table-meta__additional-text {
-  display: none;
-}
-
-.table-meta__bulk-options {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .popover-menu .popover-menu__toggle {
-    // overriding 36px from jsapp/scss/components/_kobo.form-view.scss
-    height: auto;
-  }
-}
-
 @include breakpoints.breakpoint(veryNarrow) {
   .form-view--table .ReactTable .-pagination .-previous,
   .form-view--table .ReactTable .-pagination .-next {
@@ -578,9 +528,3 @@ $s-data-table-font: 13px;
     margin-bottom: 20px;
   }
 }
-
-@include breakpoints.breakpoint(mediumAndUp) {
-  .table-meta__additional-text {
-    display: initial;
-  }
-}
diff --git a/jsapp/js/components/submissions/table.tsx b/jsapp/js/components/submissions/table.tsx
index 2dd52062a1..1649cfb235 100644
--- a/jsapp/js/components/submissions/table.tsx
+++ b/jsapp/js/components/submissions/table.tsx
@@ -98,6 +98,7 @@ import type {
   ReactTableInstance,
   DataTableSelectedRows,
 } from 'js/components/submissions/table.types';
+import Button from 'js/components/common/button';
 
 const DEFAULT_PAGE_SIZE = 30;
 
@@ -571,15 +572,17 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
               />
             )}
 
-            <button
+            <Button
+              type='bare'
+              color='storm'
+              size='s'
+              startIcon='view'
+              tooltip={t('Open')}
+              tooltipPosition='left'
               onClick={() => {
                 this.launchSubmissionModal(row, row.original._id);
               }}
-              className='table-link'
-              data-tip={t('Open')}
-            >
-              <i className='k-icon k-icon-view' />
-            </button>
+            />
 
             {userCanSeeEditIcon &&
               userHasPermForSubmission(
@@ -587,15 +590,17 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
                 this.props.asset,
                 row.original
               ) && (
-                <button
+                <Button
+                  type='bare'
+                  color='storm'
+                  size='s'
+                  startIcon='edit'
+                  tooltip={t('Edit')}
+                  tooltipPosition='left'
                   onClick={() => {
                     this.launchEditSubmission(row.original._id);
                   }}
-                  className='table-link'
-                  data-tip={t('Edit')}
-                >
-                  <i className='k-icon k-icon-edit' />
-                </button>
+                />
               )}
           </div>
         ),
@@ -1530,23 +1535,25 @@ export class DataTable extends React.Component<DataTableProps, DataTableState> {
           {this.renderBulkSelectUI()}
 
           <bem.FormView__item m='table-buttons'>
-            <bem.Button
-              m='icon'
-              className='report-button__expand right-tooltip'
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              startIcon='expand'
               onClick={this.toggleFullscreen.bind(this)}
-              data-tip={t('Toggle fullscreen')}
-            >
-              <i className='k-icon k-icon-expand' />
-            </bem.Button>
-
-            <bem.Button
-              m='icon'
-              className='report-button__expand right-tooltip'
+              tooltip={t('Toggle fullscreen')}
+              tooltipPosition='right'
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              startIcon='settings'
               onClick={this.showTableColumnsOptionsModal.bind(this)}
-              data-tip={t('Display options')}
-            >
-              <i className='k-icon k-icon-settings' />
-            </bem.Button>
+              tooltip={t('Display options')}
+              tooltipPosition='right'
+            />
           </bem.FormView__item>
         </bem.FormView__group>
 
diff --git a/jsapp/js/components/submissions/tableBulkOptions.tsx b/jsapp/js/components/submissions/tableBulkOptions.tsx
index 71df5aeb0c..c864adae66 100644
--- a/jsapp/js/components/submissions/tableBulkOptions.tsx
+++ b/jsapp/js/components/submissions/tableBulkOptions.tsx
@@ -26,6 +26,9 @@ import type {
   DataTableSelectedRows,
   ReactTableStateFilteredItem,
 } from 'js/components/submissions/table.types';
+import Button from 'js/components/common/button';
+import Badge from 'js/components/common/badge';
+import Icon from 'js/components/common/icon';
 
 interface TableBulkOptionsProps {
   asset: AssetResponse;
@@ -199,16 +202,37 @@ class TableBulkOptions extends React.Component<TableBulkOptionsProps> {
     return (
       <bem.TableMeta__bulkOptions>
         {selectedCount > 1 &&
-          <bem.KoboLightBadge>
-            {selectedLabel}
-            <a className='bulk-clear-badge-icon' onClick={this.onClearSelection.bind(this)}>&times;</a>
-          </bem.KoboLightBadge>
+          <Badge
+            color='light-storm'
+            size='s'
+            label={
+              <>
+                {selectedLabel}
+                &nbsp;
+                <button
+                  className='bulk-clear-badge-icon'
+                  onClick={this.onClearSelection.bind(this)}
+                >
+                  <Icon name='close' size='xxs'/>
+                </button>
+              </>
+            }
+          />
         }
 
-        {selectedCount > 1 && <span>:</span>}
-
         {Object.keys(this.props.selectedRows).length > 0 &&
-          <PopoverMenu type='bulkUpdate-menu' triggerLabel={t('Change status')} >
+          <PopoverMenu
+            type='bulkUpdate-menu'
+            triggerLabel={
+              <Button
+                type='frame'
+                color='storm'
+                size='s'
+                label={t('Change status')}
+                endIcon='angle-down'
+              />
+            }
+          >
             {(userCan(PERMISSIONS_CODENAMES.validate_submissions, this.props.asset) || userCanPartially(PERMISSIONS_CODENAMES.validate_submissions, this.props.asset)) &&
               VALIDATION_STATUS_OPTIONS.map((item, n) => {
                 return (
@@ -225,24 +249,28 @@ class TableBulkOptions extends React.Component<TableBulkOptionsProps> {
         }
 
         {Object.keys(this.props.selectedRows).length > 0 && this.props.asset.deployment__active && (userCan(PERMISSIONS_CODENAMES.change_submissions, this.props.asset) || userCanPartially(PERMISSIONS_CODENAMES.change_submissions, this.props.asset)) &&
-          <bem.KoboLightButton
-            m='blue'
+          <Button
+            type='frame'
+            color='blue'
+            size='s'
             onClick={this.onEdit.bind(this)}
-            disabled={this.props.selectedAllPages && isSelectAllAvailable}
-          >
-            <i className='k-icon k-icon-edit table-meta__additional-text'/>
-            {t('Edit')}
-          </bem.KoboLightButton>
+            isDisabled={this.props.selectedAllPages && isSelectAllAvailable}
+            startIcon='edit'
+            label={t('Edit')}
+            className='table-meta__additional-text'
+          />
         }
 
         {Object.keys(this.props.selectedRows).length > 0 && (userCan(PERMISSIONS_CODENAMES.delete_submissions, this.props.asset) || userCanPartially(PERMISSIONS_CODENAMES.delete_submissions, this.props.asset)) &&
-          <bem.KoboLightButton
-            m='red'
+          <Button
+            type='frame'
+            color='red'
+            size='s'
             onClick={this.onDelete.bind(this)}
-          >
-            <i className='k-icon k-icon-trash table-meta__additional-text'/>
-            {t('Delete')}
-          </bem.KoboLightButton>
+            startIcon='trash'
+            label={t('Delete')}
+            className='table-meta__additional-text'
+          />
         }
       </bem.TableMeta__bulkOptions>
     );
diff --git a/jsapp/js/components/submissions/tableSettings.es6 b/jsapp/js/components/submissions/tableSettings.es6
index bdf6aad8d2..c8923b8d9c 100644
--- a/jsapp/js/components/submissions/tableSettings.es6
+++ b/jsapp/js/components/submissions/tableSettings.es6
@@ -8,6 +8,7 @@ import {notify} from 'utils';
 import {DATA_TABLE_SETTINGS} from 'js/components/submissions/tableConstants';
 import {userCan} from 'js/components/permissions/utils';
 import tableStore from 'js/components/submissions/tableStore';
+import Button from 'js/components/common/button';
 import './tableSettings.scss';
 
 /**
@@ -117,14 +118,22 @@ class TableSettings extends React.Component {
 
         <bem.Modal__footer>
           {userCan('change_asset', this.props.asset) &&
-            <bem.KoboButton m='whitegray' onClick={this.onReset}>
-              {t('Reset')}
-            </bem.KoboButton>
+            <Button
+              type='full'
+              color='storm'
+              size='l'
+              onClick={this.onReset.bind(this)}
+              label={t('Reset')}
+            />
           }
 
-          <bem.KoboButton m='blue' onClick={this.onSave}>
-            {t('Save')}
-          </bem.KoboButton>
+          <Button
+            type='full'
+            color='blue'
+            size='l'
+            onClick={this.onSave.bind(this)}
+            label={t('Save')}
+          />
         </bem.Modal__footer>
       </div>
     );
diff --git a/jsapp/js/dropzone.utils.tsx b/jsapp/js/dropzone.utils.tsx
index 31e19fdf39..5ed82672b3 100644
--- a/jsapp/js/dropzone.utils.tsx
+++ b/jsapp/js/dropzone.utils.tsx
@@ -2,16 +2,13 @@ import React from 'react';
 import type {FileWithPreview} from 'react-dropzone';
 import type {CreateImportRequest, ImportResponse} from 'js/dataInterface';
 import {dataInterface} from 'js/dataInterface';
-import {escapeHtml, join, log, notify} from 'js/utils';
+import {escapeHtml, join, log, notify, getExponentialDelayTime} from 'js/utils';
 import {MODAL_TYPES} from './constants';
 import {router, routerIsActive} from 'js/router/legacy';
 import {ROUTES} from './router/routerConstants';
-import {stores} from './stores';
-import {getExponentialDelayTime} from 'js/utils';
 import envStore from './envStore'
 import pageState from 'js/pageState.store';
 
-
 const IMPORT_FAILED_GENERIC_MESSAGE = t('Import failed');
 
 /**
diff --git a/jsapp/js/editorMixins/cascadeMixin.es6 b/jsapp/js/editorMixins/cascadeMixin.es6
index c1bbff2eae..d10d2c0bd4 100644
--- a/jsapp/js/editorMixins/cascadeMixin.es6
+++ b/jsapp/js/editorMixins/cascadeMixin.es6
@@ -7,11 +7,11 @@ import bem, {makeBem} from 'js/bem';
 import dkobo_xlform from '../../xlform/src/_xlform.init';
 import last from 'lodash.last';
 import envStore from 'js/envStore';
+import Button from 'js/components/common/button';
 
 bem.CascadePopup = makeBem(null, 'cascade-popup');
 bem.CascadePopup__message = makeBem(bem.CascadePopup, 'message');
 bem.CascadePopup__buttonWrapper = makeBem(bem.CascadePopup, 'buttonWrapper');
-bem.CascadePopup__button = makeBem(bem.CascadePopup, 'button', 'button');
 
 const CHOICE_LIST_SUPPORT_URL = 'cascading_select.html';
 
@@ -118,15 +118,19 @@ export const cascadeMixin = {
             }
 
             <bem.CascadePopup__buttonWrapper>
-              <bem.CascadePopup__button disabled={!this.state.cascadeReady}
-                onClick={()=>{
+              <Button
+                type='full'
+                color='blue'
+                size='l'
+                isDisabled={!this.state.cascadeReady}
+                onClick={() => {
                   var survey = this.app.survey;
                   survey.insertSurvey(this.state.cascadeReadySurvey,
                     this.state.cascadeLastSelectedRowIndex);
                   this.cancelCascade();
-                }}>
-                {t('DONE')}
-              </bem.CascadePopup__button>
+                }}
+                label={t('DONE')}
+              />
             </bem.CascadePopup__buttonWrapper>
           </bem.CascadePopup>
       );
diff --git a/jsapp/js/editorMixins/editableForm.es6 b/jsapp/js/editorMixins/editableForm.es6
index cdb4c87cac..989b41a477 100644
--- a/jsapp/js/editorMixins/editableForm.es6
+++ b/jsapp/js/editorMixins/editableForm.es6
@@ -4,6 +4,7 @@ import clonedeep from 'lodash.clonedeep';
 import Select from 'react-select';
 import debounce from 'lodash.debounce';
 import DocumentTitle from 'react-document-title';
+import cx from 'classnames';
 import SurveyScope from '../models/surveyScope';
 import {cascadeMixin} from './cascadeMixin';
 import AssetNavigator from './assetNavigator';
@@ -48,6 +49,7 @@ import {
 import envStore from 'js/envStore';
 import {unstable_usePrompt as usePrompt} from 'react-router-dom';
 import Icon from 'js/components/common/icon';
+import Button from 'js/components/common/button';
 
 const ErrorMessage = makeBem(null, 'error-message');
 const ErrorMessage__strong = makeBem(null, 'error-message__header', 'strong');
@@ -615,71 +617,87 @@ export default Object.assign({
           </bem.FormBuilderHeader__cell>
 
           <bem.FormBuilderHeader__cell m={'buttonsTopRight'} >
-            <bem.FormBuilderHeader__button
-              m={['save', {
-                savepending: this.state.asset_updated === update_states.PENDING_UPDATE,
-                savefailed: this.state.asset_updated === update_states.SAVE_FAILED,
-                saveneeded: this.needsSave(),
-              }]}
-              onClick={this.saveForm}
-              disabled={!this.state.surveyAppRendered || !!this.state.surveyLoadError}
-              data-cy='save'
-            >
-              <i />
-              {saveButtonText}
-            </bem.FormBuilderHeader__button>
-
-            <bem.FormBuilderHeader__close
-              m={[{'close-warning': this.needsSave()}]}
-              onClick={this.safeNavigateToAsset}
-            >
-              <i className='k-icon k-icon-close'/>
-            </bem.FormBuilderHeader__close>
+            <Button
+              type='full'
+              color='blue'
+              size='l'
+              isPending={this.state.asset_updated === update_states.PENDING_UPDATE}
+              isDisabled={!this.state.surveyAppRendered || !!this.state.surveyLoadError}
+              onClick={this.saveForm.bind(this)}
+              isUpperCase
+              label={(
+                <>
+                  {saveButtonText}
+                  {
+                    this.state.asset_updated === update_states.SAVE_FAILED ||
+                    this.needsSave() &&
+                    <>&nbsp;*</>
+                  }
+                </>
+              )}
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='l'
+              onClick={this.safeNavigateToAsset.bind(this)}
+              startIcon='close'
+            />
           </bem.FormBuilderHeader__cell>
         </bem.FormBuilderHeader__row>
 
         <bem.FormBuilderHeader__row m={'secondary'} >
           <bem.FormBuilderHeader__cell m={'toolsButtons'} >
-            <bem.FormBuilderHeader__button
-              m={['preview', {previewdisabled: previewDisabled}]}
-              onClick={this.previewForm}
-              disabled={previewDisabled}
-              data-tip={t('Preview form')}
-              className='left-tooltip'
-            >
-              <i className='k-icon k-icon-view' />
-            </bem.FormBuilderHeader__button>
-
-            <bem.FormBuilderHeader__button m={['show-all', {
-                  open: showAllOpen,
-            }]}
-              onClick={this.showAll}
-              disabled={!showAllAvailable}
-              className = 'left-tooltip'
-              data-tip={t('Expand / collapse questions')}>
-              <i className='k-icon k-icon-view-all' />
-            </bem.FormBuilderHeader__button>
-
-            <bem.FormBuilderHeader__button
-              m={['group', {groupable: groupable}]}
-              onClick={this.groupQuestions}
-              disabled={!groupable}
-              className={'left-tooltip ' + (this.isAddingGroupsRestricted() ? LOCKING_UI_CLASSNAMES.DISABLED : '')}
-              data-tip={groupable ? t('Create group with selected questions') : t('Grouping disabled. Please select at least one question.')}
-            >
-              <i className='k-icon k-icon-group' />
-            </bem.FormBuilderHeader__button>
-
-            { this.toggleCascade !== undefined &&
-              <bem.FormBuilderHeader__button
-                m={['cascading']}
-                onClick={this.toggleCascade}
-                data-tip={t('Insert cascading select')}
-                className={'left-tooltip ' + (this.isAddingQuestionsRestricted() ? LOCKING_UI_CLASSNAMES.DISABLED : '')}
-              >
-                <i className='k-icon k-icon-cascading' />
-              </bem.FormBuilderHeader__button>
-            }
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              isDisabled={previewDisabled}
+              onClick={this.previewForm.bind(this)}
+              tooltip={t('Preview form')}
+              tooltipPosition='left'
+              startIcon='view'
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              isDisabled={!showAllAvailable}
+              onClick={this.showAll.bind(this)}
+              tooltip={t('Expand / collapse questions')}
+              tooltipPosition='left'
+              startIcon='view-all'
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              isDisabled={!groupable}
+              onClick={this.groupQuestions.bind(this)}
+              tooltip={groupable ? t('Create group with selected questions') : t('Grouping disabled. Please select at least one question.')}
+              tooltipPosition='left'
+              startIcon='group'
+              className={cx({
+                [LOCKING_UI_CLASSNAMES.DISABLED]: this.isAddingGroupsRestricted(),
+              })}
+            />
+
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              isDisabled={this.toggleCascade === undefined}
+              onClick={this.toggleCascade.bind(this)}
+              tooltip={t('Insert cascading select')}
+              tooltipPosition='left'
+              startIcon='cascading'
+              className={cx({
+                [LOCKING_UI_CLASSNAMES.DISABLED]: this.isAddingGroupsRestricted(),
+              })}
+            />
           </bem.FormBuilderHeader__cell>
 
           <bem.FormBuilderHeader__cell m='verticalRule'/>
@@ -689,33 +707,37 @@ export default Object.assign({
           <bem.FormBuilderHeader__cell m='verticalRule'/>
 
           <bem.FormBuilderHeader__cell>
-            <bem.FormBuilderHeader__button
-              m={['panel-toggle', this.state.asideLibrarySearchVisible ? 'active' : null]}
-              onClick={this.toggleAsideLibrarySearch}
-              className={this.isAddingQuestionsRestricted() ? LOCKING_UI_CLASSNAMES.DISABLED : ''}
-            >
-              <i className={['k-icon', this.state.asideLibrarySearchVisible ? 'k-icon-close' : 'k-icon-library' ].join(' ')} />
-              <span className='panel-toggle-name'>{t('Add from Library')}</span>
-            </bem.FormBuilderHeader__button>
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              onClick={this.toggleAsideLibrarySearch.bind(this)}
+              tooltip={t('Insert cascading select')}
+              tooltipPosition='left'
+              startIcon={this.state.asideLibrarySearchVisible ? 'close' : 'library'}
+              label={t('Add from Library')}
+              className={cx({
+                [LOCKING_UI_CLASSNAMES.DISABLED]: this.isAddingGroupsRestricted(),
+              })}
+            />
           </bem.FormBuilderHeader__cell>
 
           <bem.FormBuilderHeader__cell m={'verticalRule'} />
 
           <bem.FormBuilderHeader__cell>
-            <bem.FormBuilderHeader__button
-              m={['panel-toggle', this.state.asideLayoutSettingsVisible ? 'active' : null]}
-              onClick={this.toggleAsideLayoutSettings}
-            >
-              <i className={['k-icon', this.state.asideLayoutSettingsVisible ? 'k-icon-close' : 'k-icon-settings' ].join(' ')} />
-              <span className='panel-toggle-name'>
-                {this.hasMetadataAndDetails() &&
-                  t('Layout & Settings')
-                }
-                {!this.hasMetadataAndDetails() &&
-                  t('Layout')
-                }
-              </span>
-            </bem.FormBuilderHeader__button>
+            <Button
+              type='bare'
+              color='storm'
+              size='m'
+              onClick={this.toggleAsideLayoutSettings.bind(this)}
+              tooltip={t('Insert cascading select')}
+              tooltipPosition='left'
+              startIcon={this.state.asideLayoutSettingsVisible ? 'close' : 'settings'}
+              label={this.hasMetadataAndDetails() ? t('Layout & Settings') : t('Layout')}
+              className={cx({
+                [LOCKING_UI_CLASSNAMES.DISABLED]: this.isAddingGroupsRestricted(),
+              })}
+            />
           </bem.FormBuilderHeader__cell>
         </bem.FormBuilderHeader__row>
       </bem.FormBuilderHeader>
diff --git a/jsapp/js/mixins.tsx b/jsapp/js/mixins.tsx
index b199bf277a..09fd9119ef 100644
--- a/jsapp/js/mixins.tsx
+++ b/jsapp/js/mixins.tsx
@@ -126,8 +126,7 @@ const mixins: MixinsObject = {
       notify(t('copied to clipboard'));
     },
 
-    saveCloneAs(evt: React.TouchEvent<HTMLElement>) {
-      const version_id = evt.currentTarget.dataset.versionId;
+    saveCloneAs(versionId?: string) {
       const name = `${t('Clone of')} ${this.state.name}`;
 
       const dialog = alertify.dialog('prompt');
@@ -144,7 +143,7 @@ const mixins: MixinsObject = {
             {
               uid: uid,
               name: value,
-              version_id: version_id,
+              version_id: versionId,
             },
             {
               onComplete: (asset: AssetResponse) => {
diff --git a/jsapp/scss/components/_kobo.bem.ui.scss b/jsapp/scss/components/_kobo.bem.ui.scss
index 4b49d82ec9..7028c9ccdc 100644
--- a/jsapp/scss/components/_kobo.bem.ui.scss
+++ b/jsapp/scss/components/_kobo.bem.ui.scss
@@ -63,11 +63,6 @@
   &:hover {
     color: colors.$kobo-blue;
   }
-
-  i {
-    margin: 3px;
-    font-size: 26px;
-  }
 }
 
 .popover-menu__content {
@@ -197,30 +192,11 @@
 }
 
 .popover-menu--formLanding-menu {
-  margin-left: 4px;
-
   .popover-menu__content {
     right: 10px;
   }
 }
 
-.popover-menu--new-menu {
-  width: 100%;
-  margin-bottom: 10px;
-
-  .popover-menu__content {
-    right: 0px;
-    width: 100%;
-  }
-}
-
-.popover-menu--new-menu .popover-menu__toggle {
-  @extend .mdl-button, .mdl-button--raised, .mdl-button--colored;
-  border-radius: 6px;
-
-  width: 100%;
-}
-
 .popover-menu--assets-table {
   .popover-menu__content {
     max-height: 26px * 7.5;
@@ -235,14 +211,6 @@
     &:hover {
       color: lighten(colors.$kobo-blue, 10%);
     }
-
-    &::after {
-      content: '\25BC';
-      font-size: 8px;
-      margin-left: 3px;
-      display: inline-block;
-      vertical-align: 1px;
-    }
   }
 
   .popover-menu__content {
@@ -251,21 +219,6 @@
 }
 
 .popover-menu--custom-reports {
-  .popover-menu__toggle {
-    @extend .mdl-button;
-
-    text-transform: uppercase;
-    padding-left: 0px;
-
-    &::after {
-      content: '\25BC';
-      font-size: 10px;
-      margin-left: 5px;
-      display: inline-block;
-      vertical-align: 1px;
-    }
-  }
-
   .popover-menu__content {
     max-height: 500px;
     min-width: 300px;
@@ -340,6 +293,10 @@
   }
 }
 
+.popover-menu__link.popover-menu__link--red {
+  color: colors.$kobo-red;
+}
+
 // iframe default styles
 iframe {
   border: none;
diff --git a/jsapp/scss/components/_kobo.button.scss b/jsapp/scss/components/_kobo.button.scss
index 61d92907f5..5728d03ebd 100644
--- a/jsapp/scss/components/_kobo.button.scss
+++ b/jsapp/scss/components/_kobo.button.scss
@@ -1,6 +1,8 @@
 // DEPRECATED: please don't use this component. From now on, we will only use
 // the `Button` component (from `js/components/common/button`) as it covers
 // all possible cases.
+// This component is still here, because it's being used by few non-React places
+// like Form Builder, alertifyjs, and django templates.
 
 @use '~kobo-common/src/styles/colors';
 @use "scss/sizes";
@@ -22,10 +24,6 @@
 
   NOTE: Please __do not @extend__ this component. If possible use
   `bem.KoboButton` or raw class names.
-
-  NOTE: Our current go-to button solution (`_mdl.buttons.scss`) turned out to be
-  chaotic-neutral and hard to maintain, so we should transition here all buttons
-  that use: `.mdl-button.mdl-button--colored.mdl-button--raised`.
 */
 
 .kobo-button {
diff --git a/jsapp/scss/components/_kobo.drawer.scss b/jsapp/scss/components/_kobo.drawer.scss
index afe34f3f77..9cf50119a2 100644
--- a/jsapp/scss/components/_kobo.drawer.scss
+++ b/jsapp/scss/components/_kobo.drawer.scss
@@ -88,10 +88,6 @@
   padding: 0;
   display: flex;
   flex-direction: column;
-
-  button.mdl-button {
-    width: 100%;
-  }
 }
 
 @media screen and (min-width: breakpoints.$bMobileMenu) {
diff --git a/jsapp/scss/components/_kobo.form-builder.scss b/jsapp/scss/components/_kobo.form-builder.scss
index 7ae0d43c55..f0fdac28e5 100644
--- a/jsapp/scss/components/_kobo.form-builder.scss
+++ b/jsapp/scss/components/_kobo.form-builder.scss
@@ -1,6 +1,7 @@
 @use 'scss/z-indexes';
 @use 'scss/breakpoints';
 @use '~kobo-common/src/styles/colors';
+@use 'scss/mixins';
 
 $s-form-builder-header: 125px;
 $s-form-builder-aside: 400px;
@@ -70,24 +71,6 @@ $s-form-builder-content-width: 1024px;
       border: 1px solid black;
       padding-right: 12px;
     }
-
-    &__link {
-      @extend .mdl-button;
-
-      margin-right: 5px;
-
-      &--raised {
-        @extend .mdl-button--colored, .mdl-button--raised;
-      }
-
-      &--help {
-        float: right;
-
-        i {
-          @extend .k-icon-help;
-        }
-      }
-    }
   }
 }
 
@@ -119,6 +102,7 @@ $s-form-builder-content-width: 1024px;
       position: relative;
       z-index: 1;
       box-shadow: 0 0 3px 0 rgba(colors.$kobo-gray-24, 0.2), 0 0 10px 0 rgba(colors.$kobo-gray-24, 0.1);
+      padding: 0 20px;
     }
   }
 
@@ -208,30 +192,8 @@ $s-form-builder-content-width: 1024px;
 
     // second row
     &.form-builder-header__cell--toolsButtons {
-      margin: 0 10px;
-
-      button {
-        color: colors.$kobo-gray-40;
-        // for tooltip
-        overflow: visible;
-        padding: 0;
-
-        &:hover,
-        &:focus,
-        &:focus:not(:active) {
-          background-color: transparent;
-        }
-
-        &:hover {
-          color: colors.$kobo-gray-24;
-        }
-
-        i {
-          font-size: 24px;
-          margin: 3px;
-          vertical-align: middle;
-        }
-      }
+      @include mixins.centerRowFlex;
+      gap: 10px;
     }
 
     &.form-builder-header__cell--spacer {
@@ -247,107 +209,6 @@ $s-form-builder-content-width: 1024px;
   }
 }
 
-.form-builder-header__close {
-  border: none;
-  color: colors.$kobo-gray-40;
-  cursor: pointer;
-
-  @extend .mdl-button, .mdl-button--icon;
-
-  &:hover {
-    color: colors.$kobo-gray-24;
-  }
-
-  &:focus {
-    i {
-      @include form-builder-focus();
-    }
-  }
-}
-
-.form-builder-header__button {
-  @extend .mdl-button;
-
-  &:focus {
-    i {
-      @include form-builder-focus();
-    }
-  }
-
-  &.form-builder-header__button--create,
-  &.form-builder-header__button--save {
-    text-transform: uppercase;
-    min-width: 85px;
-
-    @extend .mdl-button--colored, .mdl-button--raised;
-
-    > i {
-      display: none;
-    }
-
-    &:focus {
-      background-color: darken(colors.$kobo-blue, 10%);
-      font-weight: bold;
-    }
-  }
-
-  &.form-builder-header__button--savepending,
-  &.form-builder-header__button--create-pending {
-    > i {
-      @extend .k-spin, .k-icon, .k-icon-spinner;
-
-      font-size: 24px;
-      display: inline-block;
-      vertical-align: middle;
-      margin-right: 3px;
-      margin-left: -2px;
-    }
-
-    > i + span {
-      display: none;
-    }
-  }
-
-  &.form-builder-header__button--savefailed::after,
-  &.form-builder-header__button--saveneeded::after {
-    content: '*';
-    color: colors.$kobo-white;
-  }
-
-  &.form-builder-header__button--panel-toggle {
-    padding: 0 10px;
-
-    &.form-builder-header__button--active {
-      i.k-icon {
-        color: colors.$kobo-blue;
-      }
-    }
-
-    .panel-toggle-name {
-      margin-right: 10px;
-    }
-
-    i.k-icon {
-      font-size: 24px;
-      margin-right: 3px;
-      vertical-align: middle;
-    }
-
-    &:focus {
-      @include form-builder-focus();
-
-      i {
-        outline: none;
-      }
-    }
-  }
-
-  &[disabled] {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-}
-
 // FORM STYLE SETTINGS
 
 .form-builder-aside {
@@ -410,12 +271,6 @@ $s-form-builder-content-width: 1024px;
   .cascade-popup__buttonWrapper {
     padding-top: 10px;
     text-align: right;
-
-    button {
-      @extend .mdl-button, .mdl-button--colored, .mdl-button--raised;
-
-      min-width: 100px;
-    }
   }
 
   .cascade-popup__message {
@@ -465,24 +320,19 @@ $s-form-builder-content-width: 1024px;
 @media screen and (width < breakpoints.$b768) {
   .form-builder-header {
     .form-builder-header__row {
-      gap: 10px;
+      gap: 5px;
     }
 
-    .form-builder-header__cell.form-builder-header__cell--logo {
-      width: 50px;
+    .form-builder-header__row.form-builder-header__row--secondary {
+      padding: 0 5px;
     }
 
-    .form-builder-header__cell--buttonsTopRight {
-      .form-builder-header__button--save {
-        max-width: 120px;
-        text-overflow: ellipsis;
-      }
+    .form-builder-header__cell--verticalRule {
+      display: none;
     }
 
-    .form-builder-header__button--panel-toggle {
-      .panel-toggle-name {
-        display: none;
-      }
+    .form-builder-header__cell.form-builder-header__cell--logo {
+      width: 50px;
     }
   }
 }
@@ -500,11 +350,6 @@ $s-form-builder-content-width: 1024px;
 }
 
 @media screen and (max-width: 480px) {
-  .form-builder-header__cell--toolsButtons button {
-    padding: 0;
-    border-radius: 0;
-  }
-
   .card--selectquestion__expansion {
     padding-right: 5px;
     padding-left: 25px;
diff --git a/jsapp/scss/components/_kobo.form-view.scss b/jsapp/scss/components/_kobo.form-view.scss
index 3ad93ddd68..bc8991a667 100644
--- a/jsapp/scss/components/_kobo.form-view.scss
+++ b/jsapp/scss/components/_kobo.form-view.scss
@@ -3,6 +3,7 @@
 @use 'scss/_variables';
 @use 'scss/z-indexes';
 @use '~kobo-common/src/styles/colors';
+@use 'scss/mixins';
 
 // TODO: This file is too big and it lost it's original purpose.
 // It was supposed to be a general form view layout (AKA "the content"), but
@@ -344,12 +345,6 @@ $side-tabs-width-mobile: 70px;
 
   &.form-view__cell--buttons {
     text-align: right;
-
-    a.mdl-button {
-      text-transform: uppercase;
-      padding-left: 30px;
-      padding-right: 30px;
-    }
   }
 
   &.form-view__cell--version {
@@ -389,6 +384,10 @@ $side-tabs-width-mobile: 70px;
     margin: -8px 0;
   }
 
+  &.form-view__cell--action-buttons {
+    @include mixins.centerRowFlex;
+  }
+
   &.form-view__cell--date {
     font-weight: normal;
     opacity: 0.8;
@@ -439,40 +438,6 @@ $side-tabs-width-mobile: 70px;
   }
 }
 
-.form-view__icon-button {
-  @extend .mdl-button, .mdl-button--icon;
-
-  overflow: visible;
-  padding: 0;
-  height: 32px;
-  line-height: 32px;
-  min-height: 32px;
-
-  > i {
-    vertical-align: -0.34375em;
-  }
-}
-
-// buttons in forms
-.form-view__link {
-  font-size: 26px;
-  line-height: 18px;
-  padding: 0 5px;
-  color: colors.$kobo-gray-40;
-  cursor: pointer;
-  vertical-align: middle;
-  display: inline-block;
-
-  &:hover {
-    color: colors.$kobo-blue;
-  }
-
-  &--disabled,
-  &--disabled:hover {
-    color: colors.$kobo-gray-65;
-  }
-}
-
 @keyframes recent {
   0% {
     background-color: colors.$kobo-white;
@@ -514,33 +479,10 @@ $side-tabs-width-mobile: 70px;
       }
     }
 
-    .form-view__link {
-      opacity: 0.8;
-    }
-
-    .form-view__link--export-download {
-      opacity: 0.9;
-      font-size: 42px;
-    }
-
-    .form-view__link--export-delete {
-      opacity: 0.9;
-      vertical-align: middle;
-      color: lighten(colors.$kobo-red, 10%);
-      font-size: 24px;
-
-      &:hover {
-        color: colors.$kobo-red;
-        opacity: 1;
-      }
-    }
-
     &.recent {
       background-color: lighten(colors.$kobo-blue, 40%);
       animation: recent 5s 1;
     }
-
-
   }
 
   .form-view__group--deployments {
@@ -637,6 +579,11 @@ $side-tabs-width-mobile: 70px;
   }
 }
 
+.collect-header-actions {
+  @include mixins.centerRowFlex;
+  gap: 10px;
+}
+
 .form-view__cell--collect-meta {
   pre {
     display: block;
diff --git a/jsapp/scss/components/_kobo.light-button.scss b/jsapp/scss/components/_kobo.light-button.scss
deleted file mode 100644
index 041ed2f395..0000000000
--- a/jsapp/scss/components/_kobo.light-button.scss
+++ /dev/null
@@ -1,138 +0,0 @@
-// DEPRECATED: please don't use this component. From now on, we will only use
-// the `Button` component (from `js/components/common/button`) as it covers
-// all possible cases.
-
-@use '~kobo-common/src/styles/colors';
-@use "scss/sizes";
-
-/*
- * This is a smaller alternative to kobo-button. Modifiers to use:
- * - icon-only
- * - full-width
- * - pending
- * - blue
- * - red
- * - gray
- */
-
-@mixin koboLightButtonVariant($mainColor) {
-  color: $mainColor;
-  border-color: $mainColor;
-
-  &:hover,
-  &.kobo-light-button--pending {
-    color: colors.$kobo-white;
-    background-color: $mainColor;
-    border-color: $mainColor;
-  }
-
-  // Note: `pending` modifier uses the same base look as hover state.
-  &.kobo-light-button--pending .k-icon.k-icon-spinner.k-spin {
-    color: colors.$kobo-white;
-  }
-}
-
-.kobo-light-button,
-.kobo-light-badge {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative; // needed for tooltips etc.
-  font-size: sizes.$x14;
-  font-weight: 400;
-  text-decoration: none;
-  text-align: center;
-  border-radius: sizes.$x4;
-  height: sizes.$x28;
-  line-height: sizes.$x14;
-  padding: sizes.$x6 sizes.$x12;
-  margin: 0;
-  border-width: sizes.$x1;
-  border-style: solid;
-  white-space: nowrap; // for smaller screens
-
-  i,
-  .k-icon {
-    vertical-align: top;
-    font-size: sizes.$x18;
-    position: relative;
-    top: -2px;
-    margin-right: sizes.$x4;
-  }
-
-  &.kobo-light-button--icon-only,
-  &.kobo-light-badge--icon-only {
-    // ideally we want a square here
-    padding-left: sizes.$x4;
-    padding-right: sizes.$x4;
-
-    & i,
-    & .k-icon {
-      margin-right: 0;
-    }
-  }
-
-  &.kobo-light-button--full-width {
-    width: 100%;
-    text-align: center;
-  }
-}
-
-.kobo-light-badge {
-  color: colors.$kobo-gray-24;
-  background-color: colors.$kobo-gray-92;
-  border-color: colors.$kobo-gray-92;
-  white-space: nowrap;
-  padding-left: sizes.$x8;
-  padding-right: sizes.$x8;
-}
-
-.kobo-light-button {
-  cursor: pointer;
-  color: colors.$kobo-gray-40;
-  background-color: transparent;
-  border-color: currentColor;
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: 0.5;
-  }
-
-  &:hover,
-  &.kobo-light-button--pending {
-    color: colors.$kobo-white;
-    background-color: colors.$kobo-gray-40;
-    border-color: colors.$kobo-gray-40;
-  }
-
-  &:active {
-    // moves button down by small bit to make it look pressed-in
-    transform: translateY(#{sizes.$x1});
-  }
-
-  &.kobo-light-button--blue {
-    @include koboLightButtonVariant(colors.$kobo-blue)
-  }
-
-  &.kobo-light-button--red {
-    @include koboLightButtonVariant(colors.$kobo-red)
-  }
-
-  // NOTE: this requires `<Icon name='spinner' className='k-spin'/>` to
-  // be present inside the button (ideally rendered only when necessary).
-  &.kobo-light-button--pending {
-    // hide button text
-    color: transparent !important;
-    position: relative;
-
-    // Disable any interactions (and hover effects).
-    pointer-events: none;
-
-    .k-icon.k-icon-spinner.k-spin {
-      color: colors.$kobo-white;
-      display: block;
-      position: absolute;
-      top: calc(50% - 9px);
-      left: calc(50% - 9px);
-    }
-  }
-}
diff --git a/jsapp/scss/components/_kobo.project-downloads.scss b/jsapp/scss/components/_kobo.project-downloads.scss
index 4848cbc61f..96aaa3031f 100644
--- a/jsapp/scss/components/_kobo.project-downloads.scss
+++ b/jsapp/scss/components/_kobo.project-downloads.scss
@@ -20,6 +20,10 @@
   }
 }
 
+.project-downloads__advanced-button {
+  margin-bottom: 2px;
+}
+
 .project-downloads {
   hr {
     display: block;
@@ -81,35 +85,6 @@
     display: block;
   }
 
-  .project-downloads__text-button {
-    border: 0;
-    margin: 0;
-    padding: 0;
-    background: none;
-    display: inline-block;
-    color: colors.$kobo-blue;
-    cursor: pointer;
-    font-weight: 700;
-
-    &:hover {
-      color: colors.$kobo-dark-blue;
-    }
-
-    &:active {
-      transform: translateY(1px);
-    }
-
-    &[disabled] {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-
-    .k-icon {
-      vertical-align: middle;
-      margin-left: 3px;
-    }
-  }
-
   .project-downloads__advanced-view {
     display: flex;
     align-items: stretch; // needed for questions list stretching
@@ -146,6 +121,7 @@
         display: flex;
         flex-direction: row;
         align-items: center;
+        gap: 10px;
 
         .toggle-switch {
           flex: 1;
@@ -155,8 +131,7 @@
           width: 1px;
           height: 1em;
           display: block;
-          vertical-align: middle;
-          margin: 0 10px;
+          margin: 0;
           background-color: colors.$kobo-gray-92;
         }
       }
@@ -165,7 +140,7 @@
 
   .multi-checkbox {
     position: absolute;
-    top: 20px;
+    top: 30px;
     left: 0;
     right: 0;
     bottom: 0;
@@ -185,30 +160,11 @@
     }
 
     .project-downloads__delete-settings-button {
-      border: 0;
-      padding: 0;
-      cursor: pointer;
-      color: colors.$kobo-red;
-      display: inline-block;
-      vertical-align: middle;
-      background: transparent;
-      font-size: 24px;
-
       // positioning
       position: absolute;
       left: 100%;
       margin-left: 8px;
       bottom: 0;
-      height: 38px;
-      line-height: 38px;
-
-      &:hover {
-        color: colors.$kobo-dark-red;
-      }
-
-      &:active {
-        transform: translateY(1px);
-      }
     }
   }
 
@@ -245,10 +201,12 @@
       &:last-child() {
         text-align: right;
       }
+    }
 
-      .kobo-light-button:not(:first-child) {
-        margin-left: 5px;
-      }
+    .export-list-buttons {
+      @include mixins.centerRowFlex;
+      justify-content: flex-end;
+      gap: 5px;
     }
   }
 
diff --git a/jsapp/scss/components/_kobo.service-row.scss b/jsapp/scss/components/_kobo.service-row.scss
index 372ed883e6..9aa6f4eba6 100644
--- a/jsapp/scss/components/_kobo.service-row.scss
+++ b/jsapp/scss/components/_kobo.service-row.scss
@@ -1,30 +1,23 @@
-@use "sass:math";
+@use 'sass:math';
 @use 'scss/z-indexes';
+@use 'scss/mixins';
 @use '~kobo-common/src/styles/colors';
 
-$s-service-row-action-button: 36px;
-$s-service-row-action-button-icon: 26px;
-$s-service-row-leading: 18px;
-$s-service-row-column-spacing: ($s-service-row-action-button - $s-service-row-leading) * 0.5;
+$s-service-row-actions: 100px;
+$s-service-row-column-spacing: 10px;
 
 .service-row {
   display: flex;
   flex-direction: row;
   align-items: center;
-  min-height: $s-service-row-action-button;
+  min-height: 36px;
   box-sizing: content-box;
-  line-height: $s-service-row-leading;
   position: relative;
 
   &:not(:last-of-type) {
     border-bottom: 1px solid colors.$kobo-gray-92;
   }
 
-  &:hover .service-row__action-button {
-    position: relative;
-    z-index: z-indexes.$z-service-row-link + 1;
-  }
-
   &:not(.service-row--header):hover {
     background-color: colors.$kobo-gray-96;
     color: colors.$kobo-gray-24;
@@ -66,22 +59,28 @@ $s-service-row-column-spacing: ($s-service-row-action-button - $s-service-row-le
 
   &.service-row__column--count {
     flex: 1;
-    line-height: 18px;
   }
 
   &.service-row__column--actions {
-    min-width: $s-service-row-action-button * 2;
-    text-align: right;
+    @include mixins.centerRowFlex;
+    gap: 5px;
+    justify-content: flex-end;
+    position: relative;
+    z-index: z-indexes.$z-service-row-link + 1;
+    min-width: $s-service-row-actions;
     padding: 0 $s-service-row-column-spacing;
-    box-sizing: content-box;
     white-space: nowrap;
   }
 
+  &.service-row__column--status {
+    @include mixins.centerRowFlex;
+    gap: 5px;
+  }
+
   &.service-row__column--submission,
   &.service-row__column--status {
     flex: 1;
     padding: 0 $s-service-row-column-spacing;
-    line-height: $s-service-row-action-button;
     white-space: nowrap;
   }
 
@@ -101,57 +100,3 @@ $s-service-row-column-spacing: ($s-service-row-action-button - $s-service-row-le
     color: colors.$kobo-red;
   }
 }
-
-.service-row__action-button {
-  appearance: none;
-  border: 0;
-  padding: 0;
-  width: $s-service-row-action-button;
-  height: $s-service-row-action-button;
-  font-size: math.div($s-service-row-action-button * 2, 3);
-  color: inherit;
-  cursor: pointer;
-  background: transparent;
-  display: inline-block;
-  vertical-align: top;
-
-  i.k-icon {
-    font-size: $s-service-row-action-button-icon;
-  }
-
-  &[disabled] {
-    opacity: 0.5;
-    pointer-events: none;
-  }
-
-  &:hover {
-    color: colors.$kobo-blue;
-  }
-}
-
-.service-row-button {
-  @include box-shadow;
-  margin-top: $s-service-row-column-spacing;
-  width: 100%;
-  min-height: $s-service-row-action-button;
-  box-sizing: content-box;
-  line-height: $s-service-row-leading;
-  border: 0;
-  padding: 0;
-  text-transform: uppercase;
-  cursor: pointer;
-  color: colors.$kobo-gray-40;
-
-  &:hover {
-    color: colors.$kobo-gray-24;
-  }
-
-  &:active {
-    transform: translateY(1px);
-  }
-
-  &.service-row-button--loading {
-    pointer-events: none;
-    color: colors.$kobo-gray-40;
-  }
-}
diff --git a/jsapp/scss/components/_kobo.table-meta.scss b/jsapp/scss/components/_kobo.table-meta.scss
index 5c39631a5c..3f395608f8 100644
--- a/jsapp/scss/components/_kobo.table-meta.scss
+++ b/jsapp/scss/components/_kobo.table-meta.scss
@@ -1,4 +1,6 @@
 @use '~kobo-common/src/styles/colors';
+@use 'scss/mixins';
+@use 'scss/breakpoints';
 
 .table-meta {
   flex-grow: 1;
@@ -7,19 +9,6 @@
   flex-direction: row;
   align-items: center;
 
-  .bulk-clear-badge-icon {
-    margin-right: -5px;
-    cursor: pointer;
-    padding: 0 5px;
-    border-radius: 50%;
-    color: colors.$kobo-gray-24;
-
-    &:hover {
-      color: colors.$kobo-white;
-      background-color: colors.$kobo-red;
-    }
-  }
-
   .table-meta__bulk-options {
     > *:not(:first-child) {
       margin-left: 10px;
@@ -43,12 +32,29 @@
   }
 }
 
+.bulk-clear-badge-icon {
+  border: none;
+  background: transparent;
+  margin-right: -5px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+  padding: 0 5px;
+  border-radius: 50%;
+  color: colors.$kobo-gray-24;
+
+  &:hover {
+    color: colors.$kobo-white;
+    background-color: colors.$kobo-red;
+  }
+}
+
 .table-bulk-checkbox {
   z-index: 1;
   position: absolute;
   top: 100%;
   left: 0;
-  height: $data-table-row-height;
+  height: 36px;
   display: block;
   line-height: 20px;
 
@@ -68,7 +74,7 @@
     margin-top: 10px;
 
     .popover-menu__toggle::after {
-      content: "\25BC";
+      content: '\25BC';
       font-size: 16px;
       display: inline-block;
       vertical-align: 1px;
@@ -80,3 +86,13 @@
     }
   }
 }
+
+.table-meta__additional-text {
+  display: none;
+}
+
+@include breakpoints.breakpoint(mediumAndUp) {
+  .table-meta__additional-text {
+    display: initial;
+  }
+}
diff --git a/jsapp/scss/components/_kobo.text-button.scss b/jsapp/scss/components/_kobo.text-button.scss
deleted file mode 100644
index 1e2959ac32..0000000000
--- a/jsapp/scss/components/_kobo.text-button.scss
+++ /dev/null
@@ -1,49 +0,0 @@
-@use "scss/_variables";
-@use '~kobo-common/src/styles/colors';
-
-// DEPRECATED: please don't use this component. From now on, we will only use
-// the `Button` component (from `js/components/common/button`) as it covers
-// all possible cases.
-
-/*
-  This is a text looking alternative to kobo-light-button
-*/
-
-.kobo-text-button {
-  display: inline-block;
-  vertical-align: middle;
-  position: relative; // needed for tooltips etc.
-  font-size: variables.$base-font-size;
-  font-weight: 400;
-  text-decoration: none;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  cursor: pointer;
-  color: colors.$kobo-gray-40;
-  background: transparent;
-  text-transform: uppercase;
-
-  &[disabled] {
-    pointer-events: none;
-    opacity: 0.75;
-  }
-
-  &:hover {
-    opacity: 0.9;
-  }
-
-  &:active {
-    // makes the shadow smaller and moves button down by small bit
-    // to make it look pressed-in
-    transform: translateY(1px);
-  }
-
-  &.kobo-text-button--blue {
-    color: colors.$kobo-blue;
-  }
-
-  &.kobo-text-button--red {
-    color: colors.$kobo-red;
-  }
-}
diff --git a/jsapp/scss/libs/_mdl.buttons.scss b/jsapp/scss/libs/_mdl.buttons.scss
deleted file mode 100644
index f7b0d0b9be..0000000000
--- a/jsapp/scss/libs/_mdl.buttons.scss
+++ /dev/null
@@ -1,196 +0,0 @@
-@use "scss/_variables";
-@use 'scss/breakpoints';
-@use '~kobo-common/src/styles/colors';
-
-// Inspired but simplified version of MDL buttons
-
-// The button component. Defaults to a flat button.
-.mdl-button {
-  text-decoration: none;
-  text-align: center;
-  font-weight: normal;
-  font-size: variables.$base-font-size;
-  letter-spacing: 0;
-  height: 40px;
-  min-height: 40px;
-  line-height: 40px;
-  padding: 0 12px;
-  margin: 0;
-  border: none;
-  border-radius: 6px;
-  vertical-align: middle;
-  background: transparent;
-  position: relative;
-  display: inline-block;
-  overflow: hidden;
-  cursor: pointer;
-  color: colors.$kobo-gray-40;
-
-  &[data-tip] {
-    overflow: visible;
-  }
-
-  &::-moz-focus-inner {
-    border: 0;
-  }
-
-  &:hover {
-    color: colors.$kobo-gray-24;
-  }
-
-  &.mdl-button--colored {
-    color: colors.$kobo-blue;
-    text-transform: uppercase;
-
-    &:hover {
-      color: darken(colors.$kobo-blue, 10%);
-    }
-  }
-
-  &.mdl-button--colored.mdl-button--red {
-    color: colors.$kobo-red;
-
-    &:hover {
-      color: darken(colors.$kobo-red, 10%);
-    }
-  }
-
-  &.mdl-button--colored.mdl-button--gray {
-    color: colors.$kobo-gray-40;
-
-    &:hover {
-      color: darken(colors.$kobo-gray-40, 10%);
-    }
-  }
-}
-
-input.mdl-button[type="submit"] {
-  -webkit-appearance: none;
-}
-
-.mdl-button--small {
-  height: 30px;
-  min-height: 30px;
-  line-height: 30px;
-  padding: 0 12px;
-}
-
-.mdl-button--fullwidth {
-  width: 100%;
-}
-
-// Raised buttons
-.mdl-button--raised {
-  @include box-shadow;
-
-  background: colors.$kobo-blue;
-  border-radius: 6px; // needed because of box-shadow
-  text-transform: uppercase;
-  font-weight: 600;
-
-  &:active {
-    transform: translateY(1px);
-  }
-
-  // same as .mdl-button--blue
-  &.mdl-button--colored {
-    background-color: colors.$kobo-blue;
-    color: colors.$kobo-white;
-
-    &:hover {
-      background-color: darken(colors.$kobo-blue, 5%);
-      color: colors.$kobo-white;
-    }
-  }
-
-  &.mdl-button--colored.mdl-button--red {
-    background-color: colors.$kobo-red;
-    color: colors.$kobo-white;
-
-    &:hover {
-      background-color: darken(colors.$kobo-red, 5%);
-      color: colors.$kobo-white;
-    }
-  }
-
-  &.mdl-button--colored.mdl-button--gray {
-    background-color: colors.$kobo-gray-40;
-    color: colors.$kobo-white;
-
-    &:hover {
-      background-color: darken(colors.$kobo-gray-40, 5%);
-      color: colors.$kobo-white;
-    }
-  }
-}
-
-// Icon buttons
-.mdl-button--icon {
-  margin-left: 0;
-  margin-right: 0;
-  padding: 0;
-  overflow: hidden;
-
-  i {
-    font-size: 24px;
-  }
-}
-
-// Tab buttons
-.mdl-button--tab {
-  color: colors.$kobo-white;
-  opacity: 0.7;
-  border-radius: 0;
-  border-bottom: 2px solid transparent;
-  text-transform: uppercase;
-  height: 50px;
-  line-height: 50px;
-  padding: 0 32px;
-
-  &:hover {
-    opacity: 1;
-    color: colors.$kobo-white;
-  }
-
-  &.active {
-    opacity: 1;
-    border-bottom: 2px solid white;
-  }
-}
-
-// Disabled buttons
-
-.mdl-button {
-  // Bump up specificity by using [disabled] twice.
-  &[disabled][disabled],
-  &.mdl-button--disabled.mdl-button--disabled {
-    color: colors.$kobo-gray-40;
-    cursor: default;
-    background-color: transparent;
-    pointer-events: none;
-  }
-
-  &.mdl-button--raised {
-    // Bump up specificity by using [disabled] twice.
-    &[disabled][disabled],
-    &.mdl-button--disabled.mdl-button--disabled {
-      background-color: colors.$kobo-gray-92;
-      color: colors.$kobo-gray-40;
-      box-shadow: none;
-    }
-  }
-
-  &.mdl-button--colored {
-    // Bump up specificity by using [disabled] twice.
-    &[disabled][disabled],
-    &.mdl-button--disabled.mdl-button--disabled {
-      color: colors.$kobo-gray-40;
-    }
-  }
-}
-
-@media screen and (min-width: breakpoints.$b768) {
-  .mdl-button {
-    padding: 0 24px;
-  }
-}
diff --git a/jsapp/scss/libs/_mdl.scss b/jsapp/scss/libs/_mdl.scss
index 9955ab97fd..da4c01eb4c 100644
--- a/jsapp/scss/libs/_mdl.scss
+++ b/jsapp/scss/libs/_mdl.scss
@@ -40,4 +40,3 @@ $layout-desktop-header-height: 64px;
 }
 
 @import "mdl.layout";
-@import "mdl.buttons";
diff --git a/jsapp/scss/main.scss b/jsapp/scss/main.scss
index fa2f495941..23ce35fb28 100644
--- a/jsapp/scss/main.scss
+++ b/jsapp/scss/main.scss
@@ -27,8 +27,6 @@
 
 @import "./components/kobo.bem.ui";
 @import "./components/kobo.button";
-@import "./components/kobo.light-button";
-@import "./components/kobo.text-button";
 @import "./components/kobo.tooltips-big";
 @import "./components/kobo.navigation";
 @import "./components/kobo.drawer";
@@ -45,6 +43,7 @@
 @import "./components/kobo.simple-table";
 @import "./components/kobo.background-audio-player";
 @import "./components/kobo.dropzone";
+@import './components/kobo.table-meta';
 @import 'jsapp/js/components/common/tooltip.scss';
 
 @import "./formbuild/kobomatrix";