Add latest changes from gitlab-org/gitlab@master

92 files changed, 593 insertions, 453 deletions

diff --git a/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue b/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue
index 5e16f6f3873..1c7a181e3e6 100644
--- a/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue
+++ b/app/assets/javascripts/alerts_service_settings/components/alerts_service_form.vue
@@ -1,5 +1,11 @@
 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
+import {
+  GlDeprecatedButton,
+  GlFormGroup,
+  GlFormInput,
+  GlModal,
+  GlModalDirective,
+} from '@gitlab/ui';
 import _ from 'underscore';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import ToggleButton from '~/vue_shared/components/toggle_button.vue';
@@ -11,7 +17,7 @@ export default {
   COPY_TO_CLIPBOARD: __('Copy'),
   RESET_KEY: __('Reset key'),
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlFormGroup,
     GlFormInput,
     GlModal,
@@ -149,7 +155,9 @@ export default {
           <clipboard-button :text="authorizationKey" :title="$options.COPY_TO_CLIPBOARD" />
         </span>
       </div>
-      <gl-button v-gl-modal.authKeyModal class="mt-2">{{ $options.RESET_KEY }}</gl-button>
+      <gl-deprecated-button v-gl-modal.authKeyModal class="mt-2">{{
+        $options.RESET_KEY
+      }}</gl-deprecated-button>
       <gl-modal
         modal-id="authKeyModal"
         :title="$options.RESET_KEY"
diff --git a/app/assets/javascripts/blob/components/blob_edit_content.vue b/app/assets/javascripts/blob/components/blob_edit_content.vue
index 83303a373f3..9a30ed93330 100644
--- a/app/assets/javascripts/blob/components/blob_edit_content.vue
+++ b/app/assets/javascripts/blob/components/blob_edit_content.vue
@@ -5,7 +5,8 @@ export default {
   props: {
     value: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     fileName: {
       type: String,
@@ -15,7 +16,6 @@ export default {
   },
   data() {
     return {
-      content: this.value,
       editor: null,
     };
   },
@@ -28,14 +28,12 @@ export default {
     this.editor = initEditorLite({
       el: this.$refs.editor,
       blobPath: this.fileName,
-      blobContent: this.content,
+      blobContent: this.value,
     });
   },
   methods: {
     triggerFileChange() {
-      const val = this.editor.getValue();
-      this.content = val;
-      this.$emit('input', val);
+      this.$emit('input', this.editor.getValue());
     },
   },
 };
@@ -43,7 +41,7 @@ export default {
 <template>
   <div class="file-content code">
     <pre id="editor" ref="editor" data-editor-loading @focusout="triggerFileChange">{{
-      content
+      value
     }}</pre>
   </div>
 </template>
diff --git a/app/assets/javascripts/blob/components/blob_embeddable.vue b/app/assets/javascripts/blob/components/blob_embeddable.vue
index 26bd0208309..00b915ec8bd 100644
--- a/app/assets/javascripts/blob/components/blob_embeddable.vue
+++ b/app/assets/javascripts/blob/components/blob_embeddable.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlFormInputGroup, GlButton, GlIcon } from '@gitlab/ui';
+import { GlFormInputGroup, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 export default {
   components: {
     GlFormInputGroup,
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
   },
   props: {
@@ -33,9 +33,9 @@ export default {
     select-on-click
   >
     <template #append>
-      <gl-button new-style data-clipboard-target="#embeddable-text">
+      <gl-deprecated-button new-style data-clipboard-target="#embeddable-text">
         <gl-icon name="copy-to-clipboard" :title="__('Copy')" />
-      </gl-button>
+      </gl-deprecated-button>
     </template>
   </gl-form-input-group>
 </template>
diff --git a/app/assets/javascripts/blob/components/blob_header_default_actions.vue b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
index 6b38b871606..63ae70a37f4 100644
--- a/app/assets/javascripts/blob/components/blob_header_default_actions.vue
+++ b/app/assets/javascripts/blob/components/blob_header_default_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import {
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
@@ -12,7 +12,7 @@ export default {
   components: {
     GlIcon,
     GlButtonGroup,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -43,7 +43,7 @@ export default {
 </script>
 <template>
   <gl-button-group>
-    <gl-button
+    <gl-deprecated-button
       v-gl-tooltip.hover
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
       :title="$options.BTN_COPY_CONTENTS_TITLE"
@@ -51,8 +51,8 @@ export default {
       data-clipboard-target="#blob-code-content"
     >
       <gl-icon name="copy-to-clipboard" :size="14" />
-    </gl-button>
-    <gl-button
+    </gl-deprecated-button>
+    <gl-deprecated-button
       v-gl-tooltip.hover
       :aria-label="$options.BTN_RAW_TITLE"
       :title="$options.BTN_RAW_TITLE"
@@ -60,8 +60,8 @@ export default {
       target="_blank"
     >
       <gl-icon name="doc-code" :size="14" />
-    </gl-button>
-    <gl-button
+    </gl-deprecated-button>
+    <gl-deprecated-button
       v-gl-tooltip.hover
       :aria-label="$options.BTN_DOWNLOAD_TITLE"
       :title="$options.BTN_DOWNLOAD_TITLE"
@@ -69,6 +69,6 @@ export default {
       target="_blank"
     >
       <gl-icon name="download" :size="14" />
-    </gl-button>
+    </gl-deprecated-button>
   </gl-button-group>
 </template>
diff --git a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
index 689fa7638f0..7155a1d35b1 100644
--- a/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
+++ b/app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
 import {
   RICH_BLOB_VIEWER,
   RICH_BLOB_VIEWER_TITLE,
@@ -11,7 +11,7 @@ export default {
   components: {
     GlIcon,
     GlButtonGroup,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -46,7 +46,7 @@ export default {
 </script>
 <template>
   <gl-button-group class="js-blob-viewer-switcher ml-2">
-    <gl-button
+    <gl-deprecated-button
       v-gl-tooltip.hover
       :aria-label="$options.SIMPLE_BLOB_VIEWER_TITLE"
       :title="$options.SIMPLE_BLOB_VIEWER_TITLE"
@@ -55,8 +55,8 @@ export default {
       @click="switchToViewer($options.SIMPLE_BLOB_VIEWER)"
     >
       <gl-icon name="code" :size="14" />
-    </gl-button>
-    <gl-button
+    </gl-deprecated-button>
+    <gl-deprecated-button
       v-gl-tooltip.hover
       :aria-label="$options.RICH_BLOB_VIEWER_TITLE"
       :title="$options.RICH_BLOB_VIEWER_TITLE"
@@ -65,6 +65,6 @@ export default {
       @click="switchToViewer($options.RICH_BLOB_VIEWER)"
     >
       <gl-icon name="document" :size="14" />
-    </gl-button>
+    </gl-deprecated-button>
   </gl-button-group>
 </template>
diff --git a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
index 7418ca9edfc..e191bfd79cb 100644
--- a/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
+++ b/app/assets/javascripts/blob/suggest_gitlab_ci_yml/components/popover.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlPopover, GlSprintf, GlButton, GlIcon } from '@gitlab/ui';
+import { GlPopover, GlSprintf, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 import { parseBoolean, scrollToElement, setCookie, getCookie } from '~/lib/utils/common_utils';
 import { s__ } from '~/locale';
 import { glEmojiTag } from '~/emoji';
@@ -27,7 +27,7 @@ export default {
     GlPopover,
     GlSprintf,
     GlIcon,
-    GlButton,
+    GlDeprecatedButton,
   },
   mixins: [trackingMixin],
   props: {
@@ -109,9 +109,9 @@ export default {
     <template #title>
       <span v-html="suggestTitle"></span>
       <span class="ml-auto">
-        <gl-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss">
+        <gl-deprecated-button :aria-label="__('Close')" class="btn-blank" @click="onDismiss">
           <gl-icon name="close" aria-hidden="true" />
-        </gl-button>
+        </gl-deprecated-button>
       </span>
     </template>
 
diff --git a/app/assets/javascripts/boards/components/board.js b/app/assets/javascripts/boards/components/board.js
index 48f5614cefe..ac02c229a07 100644
--- a/app/assets/javascripts/boards/components/board.js
+++ b/app/assets/javascripts/boards/components/board.js
@@ -1,7 +1,7 @@
 import $ from 'jquery';
 import Sortable from 'sortablejs';
 import Vue from 'vue';
-import { GlButtonGroup, GlButton, GlLabel, GlTooltip } from '@gitlab/ui';
+import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip } from '@gitlab/ui';
 import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
 import { s__, __, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -32,7 +32,7 @@ export default Vue.extend({
     Icon,
     GlButtonGroup,
     IssueCount,
-    GlButton,
+    GlDeprecatedButton,
     GlLabel,
     GlTooltip,
   },
diff --git a/app/assets/javascripts/boards/components/board_column.vue b/app/assets/javascripts/boards/components/board_column.vue
index 693b1f9d7b1..10c855675db 100644
--- a/app/assets/javascripts/boards/components/board_column.vue
+++ b/app/assets/javascripts/boards/components/board_column.vue
@@ -1,7 +1,7 @@
 <script>
 import $ from 'jquery';
 import Sortable from 'sortablejs';
-import { GlButtonGroup, GlButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui';
+import { GlButtonGroup, GlDeprecatedButton, GlLabel, GlTooltip, GlIcon } from '@gitlab/ui';
 import isWipLimitsOn from 'ee_else_ce/boards/mixins/is_wip_limits';
 import { s__, __, sprintf } from '~/locale';
 import Tooltip from '~/vue_shared/directives/tooltip';
@@ -24,7 +24,7 @@ export default {
     BoardList,
     GlButtonGroup,
     IssueCount,
-    GlButton,
+    GlDeprecatedButton,
     GlLabel,
     GlTooltip,
     GlIcon,
@@ -333,7 +333,7 @@ export default {
             v-if="isNewIssueShown || isSettingsShown"
             class="board-list-button-group pl-2"
           >
-            <gl-button
+            <gl-deprecated-button
               v-if="isNewIssueShown"
               ref="newIssueBtn"
               :class="{
@@ -346,10 +346,10 @@ export default {
               @click="showNewIssueForm"
             >
               <i aria-hidden="true" data-hidden="true" class="fa fa-plus"></i>
-            </gl-button>
+            </gl-deprecated-button>
             <gl-tooltip :target="() => $refs.newIssueBtn">{{ __('New Issue') }}</gl-tooltip>
 
-            <gl-button
+            <gl-deprecated-button
               v-if="isSettingsShown"
               ref="settingsBtn"
               :aria-label="__(`List settings`)"
@@ -359,7 +359,7 @@ export default {
               @click="openSidebarSettings"
             >
               <gl-icon name="settings" />
-            </gl-button>
+            </gl-deprecated-button>
             <gl-tooltip :target="() => $refs.settingsBtn">{{ __('List settings') }}</gl-tooltip>
           </gl-button-group>
         </h3>
diff --git a/app/assets/javascripts/boards/components/board_new_issue.vue b/app/assets/javascripts/boards/components/board_new_issue.vue
index f9a08f151c5..deebe122109 100644
--- a/app/assets/javascripts/boards/components/board_new_issue.vue
+++ b/app/assets/javascripts/boards/components/board_new_issue.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { getMilestone } from 'ee_else_ce/boards/boards_util';
 import ListIssue from 'ee_else_ce/boards/models/issue';
 import eventHub from '../eventhub';
@@ -11,7 +11,7 @@ export default {
   name: 'BoardNewIssue',
   components: {
     ProjectSelect,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     groupId: {
@@ -120,17 +120,21 @@ export default {
         />
         <project-select v-if="groupId" :group-id="groupId" :list="list" />
         <div class="clearfix prepend-top-10">
-          <gl-button
+          <gl-deprecated-button
             ref="submit-button"
             :disabled="disabled"
             class="float-left"
             variant="success"
             type="submit"
-            >{{ __('Submit issue') }}</gl-button
+            >{{ __('Submit issue') }}</gl-deprecated-button
+          >
+          <gl-deprecated-button
+            class="float-right"
+            type="button"
+            variant="default"
+            @click="cancel"
+            >{{ __('Cancel') }}</gl-deprecated-button
           >
-          <gl-button class="float-right" type="button" variant="default" @click="cancel">{{
-            __('Cancel')
-          }}</gl-button>
         </div>
       </form>
     </div>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
index 0460181558b..32fe841f16e 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_modal.vue
@@ -4,7 +4,7 @@ import { mapActions, mapState } from 'vuex';
 import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
 import CiEnvironmentsDropdown from './ci_environments_dropdown.vue';
 import {
-  GlButton,
+  GlDeprecatedButton,
   GlModal,
   GlFormSelect,
   GlFormGroup,
@@ -19,7 +19,7 @@ export default {
   modalId: ADD_CI_VARIABLE_MODAL_ID,
   components: {
     CiEnvironmentsDropdown,
-    GlButton,
+    GlDeprecatedButton,
     GlModal,
     GlFormSelect,
     GlFormGroup,
@@ -212,22 +212,22 @@ export default {
       </gl-form-group>
     </form>
     <template #modal-footer>
-      <gl-button @click="hideModal">{{ __('Cancel') }}</gl-button>
-      <gl-button
+      <gl-deprecated-button @click="hideModal">{{ __('Cancel') }}</gl-deprecated-button>
+      <gl-deprecated-button
         v-if="variableBeingEdited"
         ref="deleteCiVariable"
         category="secondary"
         variant="danger"
         @click="deleteVarAndClose"
-        >{{ __('Delete variable') }}</gl-button
+        >{{ __('Delete variable') }}</gl-deprecated-button
       >
-      <gl-button
+      <gl-deprecated-button
         ref="updateOrAddVariable"
         :disabled="!canSubmit"
         variant="success"
         @click="updateOrAddVariable"
         >{{ modalActionText }}
-      </gl-button>
+      </gl-deprecated-button>
     </template>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
index c4b1bc18f5a..07b0d55bd4c 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_popover.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlPopover, GlIcon, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlPopover, GlIcon, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   maxTextLength: 95,
   components: {
     GlPopover,
     GlIcon,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -41,14 +41,14 @@ export default {
     <gl-popover :target="target" triggers="hover" placement="top" container="popover-container">
       <div class="d-flex justify-content-between position-relative">
         <div class="pr-5 w-100 ci-popover-value">{{ displayValue }}</div>
-        <gl-button
+        <gl-deprecated-button
           v-gl-tooltip
           class="btn-transparent btn-clipboard position-absolute position-top-0 position-right-0"
           :title="tooltipText"
           :data-clipboard-text="value"
         >
           <gl-icon name="copy-to-clipboard" />
-        </gl-button>
+        </gl-deprecated-button>
       </div>
     </gl-popover>
   </div>
diff --git a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
index 806fa3e1191..b374d950c1f 100644
--- a/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
+++ b/app/assets/javascripts/ci_variable_list/components/ci_variable_table.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTable, GlButton, GlModalDirective, GlIcon } from '@gitlab/ui';
+import { GlTable, GlDeprecatedButton, GlModalDirective, GlIcon } from '@gitlab/ui';
 import { s__, __ } from '~/locale';
 import { mapState, mapActions } from 'vuex';
 import { ADD_CI_VARIABLE_MODAL_ID } from '../constants';
@@ -52,7 +52,7 @@ export default {
   ],
   components: {
     GlTable,
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     CiVariablePopover,
   },
@@ -147,13 +147,13 @@ export default {
         </div>
       </template>
       <template #cell(actions)="{ item }">
-        <gl-button
+        <gl-deprecated-button
           ref="edit-ci-variable"
           v-gl-modal-directive="$options.modalId"
           @click="editVariable(item)"
         >
           <gl-icon :size="$options.iconSize" name="pencil" />
-        </gl-button>
+        </gl-deprecated-button>
       </template>
       <template #empty>
         <p ref="empty-variables" class="text-center empty-variables text-plain">
@@ -165,20 +165,20 @@ export default {
       class="ci-variable-actions d-flex justify-content-end"
       :class="{ 'justify-content-center': !tableIsNotEmpty }"
     >
-      <gl-button
+      <gl-deprecated-button
         v-if="tableIsNotEmpty"
         ref="secret-value-reveal-button"
         data-qa-selector="reveal_ci_variable_value"
         class="append-right-8"
         @click="toggleValues(!valuesHidden)"
-        >{{ valuesButtonText }}</gl-button
+        >{{ valuesButtonText }}</gl-deprecated-button
       >
-      <gl-button
+      <gl-deprecated-button
         ref="add-ci-variable"
         v-gl-modal-directive="$options.modalId"
         data-qa-selector="add_ci_variable"
         variant="success"
-        >{{ __('Add Variable') }}</gl-button
+        >{{ __('Add Variable') }}</gl-deprecated-button
       >
     </div>
   </div>
diff --git a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
index e4bc00fc102..95eb427a49c 100644
--- a/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
+++ b/app/assets/javascripts/clusters/components/ingress_modsecurity_settings.vue
@@ -7,7 +7,7 @@ import {
   GlSprintf,
   GlLink,
   GlToggle,
-  GlButton,
+  GlDeprecatedButton,
   GlDropdown,
   GlDropdownItem,
   GlIcon,
@@ -25,7 +25,7 @@ export default {
     GlSprintf,
     GlLink,
     GlToggle,
-    GlButton,
+    GlDeprecatedButton,
     GlDropdown,
     GlDropdownItem,
     GlIcon,
@@ -235,17 +235,17 @@ export default {
             </div>
           </div>
           <div v-if="showButtons" class="mt-3">
-            <gl-button
+            <gl-deprecated-button
               class="btn-success inline mr-1"
               :loading="saving"
               :disabled="saveButtonDisabled"
               @click="updateApplication"
             >
               {{ saveButtonLabel }}
-            </gl-button>
-            <gl-button :disabled="saveButtonDisabled" @click="resetStatus">
+            </gl-deprecated-button>
+            <gl-deprecated-button :disabled="saveButtonDisabled" @click="resetStatus">
               {{ __('Cancel') }}
-            </gl-button>
+            </gl-deprecated-button>
           </div>
         </div>
       </div>
diff --git a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
index bdbaf2ed558..b35adae3352 100644
--- a/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
+++ b/app/assets/javascripts/clusters/components/remove_cluster_confirmation.vue
@@ -1,7 +1,7 @@
 <script>
 import { escape as esc } from 'lodash';
 import SplitButton from '~/vue_shared/components/split_button.vue';
-import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
+import { GlModal, GlDeprecatedButton, GlFormInput } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import csrf from '~/lib/utils/csrf';
 
@@ -27,7 +27,7 @@ export default {
   components: {
     SplitButton,
     GlModal,
-    GlButton,
+    GlDeprecatedButton,
     GlFormInput,
   },
   props: {
@@ -148,19 +148,24 @@ export default {
         }}</span>
       </template>
       <template slot="modal-footer">
-        <gl-button variant="secondary" @click="handleCancel">{{ s__('Cancel') }}</gl-button>
+        <gl-deprecated-button variant="secondary" @click="handleCancel">{{
+          s__('Cancel')
+        }}</gl-deprecated-button>
         <template v-if="confirmCleanup">
-          <gl-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{
+          <gl-deprecated-button :disabled="!canSubmit" variant="warning" @click="handleSubmit">{{
             s__('ClusterIntegration|Remove integration')
-          }}</gl-button>
-          <gl-button :disabled="!canSubmit" variant="danger" @click="handleSubmit(true)">{{
-            s__('ClusterIntegration|Remove integration and resources')
-          }}</gl-button>
+          }}</gl-deprecated-button>
+          <gl-deprecated-button
+            :disabled="!canSubmit"
+            variant="danger"
+            @click="handleSubmit(true)"
+            >{{ s__('ClusterIntegration|Remove integration and resources') }}</gl-deprecated-button
+          >
         </template>
         <template v-else>
-          <gl-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{
+          <gl-deprecated-button :disabled="!canSubmit" variant="danger" @click="handleSubmit">{{
             s__('ClusterIntegration|Remove integration')
-          }}</gl-button>
+          }}</gl-deprecated-button>
         </template>
       </template>
     </gl-modal>
diff --git a/app/assets/javascripts/code_navigation/components/popover.vue b/app/assets/javascripts/code_navigation/components/popover.vue
index f216a4c6e6f..b4d9bc7b181 100644
--- a/app/assets/javascripts/code_navigation/components/popover.vue
+++ b/app/assets/javascripts/code_navigation/components/popover.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     position: {
@@ -77,9 +77,9 @@ export default {
       </p>
     </div>
     <div v-if="definitionPath" class="popover-body">
-      <gl-button :href="definitionPath" target="_blank" class="w-100" variant="default">
+      <gl-deprecated-button :href="definitionPath" target="_blank" class="w-100" variant="default">
         {{ __('Go to definition') }}
-      </gl-button>
+      </gl-deprecated-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/commit/pipelines/pipelines_table.vue b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
index cd9aea85f4d..23a842fab4c 100644
--- a/app/assets/javascripts/commit/pipelines/pipelines_table.vue
+++ b/app/assets/javascripts/commit/pipelines/pipelines_table.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import PipelinesService from '~/pipelines/services/pipelines_service';
 import PipelineStore from '~/pipelines/stores/pipelines_store';
@@ -12,7 +12,7 @@ import CIPaginationMixin from '~/vue_shared/mixins/ci_pagination_api_mixin';
 export default {
   components: {
     TablePagination,
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
   },
   mixins: [pipelinesMixin, CIPaginationMixin],
@@ -171,7 +171,7 @@ export default {
 
     <div v-else-if="shouldRenderTable" class="table-holder">
       <div v-if="canRenderPipelineButton" class="nav justify-content-end">
-        <gl-button
+        <gl-deprecated-button
           v-if="canRenderPipelineButton"
           variant="success"
           class="js-run-mr-pipeline prepend-top-10 btn-wide-on-xs"
@@ -180,7 +180,7 @@ export default {
         >
           <gl-loading-icon v-if="state.isRunningMergeRequestPipeline" inline />
           {{ s__('Pipelines|Run Pipeline') }}
-        </gl-button>
+        </gl-deprecated-button>
       </div>
 
       <pipelines-table-component
diff --git a/app/assets/javascripts/diffs/components/compare_versions.vue b/app/assets/javascripts/diffs/components/compare_versions.vue
index 3a2146147cc..34716c214c6 100644
--- a/app/assets/javascripts/diffs/components/compare_versions.vue
+++ b/app/assets/javascripts/diffs/components/compare_versions.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlTooltipDirective, GlLink, GlButton, GlSprintf } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlSprintf } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -14,7 +14,7 @@ export default {
     CompareVersionsDropdown,
     Icon,
     GlLink,
-    GlButton,
+    GlDeprecatedButton,
     GlSprintf,
     SettingsDropdown,
     DiffStats,
@@ -140,16 +140,20 @@ export default {
           :added-lines="addedLines"
           :removed-lines="removedLines"
         />
-        <gl-button
+        <gl-deprecated-button
           v-if="commit || startVersion"
           :href="latestVersionPath"
           class="append-right-8 js-latest-version"
         >
           {{ __('Show latest version') }}
-        </gl-button>
-        <gl-button v-show="hasCollapsedFile" class="append-right-8" @click="expandAllFiles">
+        </gl-deprecated-button>
+        <gl-deprecated-button
+          v-show="hasCollapsedFile"
+          class="append-right-8"
+          @click="expandAllFiles"
+        >
           {{ __('Expand all') }}
-        </gl-button>
+        </gl-deprecated-button>
         <settings-dropdown />
       </div>
     </div>
diff --git a/app/assets/javascripts/diffs/components/diff_file_header.vue b/app/assets/javascripts/diffs/components/diff_file_header.vue
index c51f711fb81..d601c3769a3 100644
--- a/app/assets/javascripts/diffs/components/diff_file_header.vue
+++ b/app/assets/javascripts/diffs/components/diff_file_header.vue
@@ -1,7 +1,7 @@
 <script>
 import { escape as esc } from 'lodash';
 import { mapActions, mapGetters } from 'vuex';
-import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -16,7 +16,7 @@ import { scrollToElement } from '~/lib/utils/common_utils';
 export default {
   components: {
     GlLoadingIcon,
-    GlButton,
+    GlDeprecatedButton,
     ClipboardButton,
     EditButton,
     Icon,
@@ -229,7 +229,7 @@ export default {
       <div class="btn-group" role="group">
         <template v-if="diffFile.blob && diffFile.blob.readable_text">
           <span v-gl-tooltip.hover :title="s__('MergeRequests|Toggle comments for this file')">
-            <gl-button
+            <gl-deprecated-button
               ref="toggleDiscussionsButton"
               :disabled="!diffHasDiscussions(diffFile)"
               :class="{ active: diffHasExpandedDiscussions(diffFile) }"
@@ -242,7 +242,7 @@ export default {
               @click="toggleFileDiscussionWrappers(diffFile)"
             >
               <icon name="comment" />
-            </gl-button>
+            </gl-deprecated-button>
           </span>
 
           <edit-button
@@ -265,7 +265,7 @@ export default {
           v-html="viewReplacedFileButtonText"
         >
         </a>
-        <gl-button
+        <gl-deprecated-button
           v-if="!diffFile.is_fully_expanded"
           ref="expandDiffToFullFileButton"
           v-gl-tooltip.hover
@@ -279,8 +279,8 @@ export default {
           <gl-loading-icon v-if="diffFile.isLoadingFullFile" color="dark" inline />
           <icon v-else-if="diffFile.isShowingFullFile" name="doc-changes" />
           <icon v-else name="doc-expand" />
-        </gl-button>
-        <gl-button
+        </gl-deprecated-button>
+        <gl-deprecated-button
           ref="viewButton"
           v-gl-tooltip.hover
           :href="diffFile.view_path"
@@ -292,7 +292,7 @@ export default {
           :title="viewFileButtonText"
         >
           <icon name="doc-text" />
-        </gl-button>
+        </gl-deprecated-button>
 
         <a
           v-if="diffFile.external_url"
diff --git a/app/assets/javascripts/diffs/components/edit_button.vue b/app/assets/javascripts/diffs/components/edit_button.vue
index dcb79cd5e16..91e296f8572 100644
--- a/app/assets/javascripts/diffs/components/edit_button.vue
+++ b/app/assets/javascripts/diffs/components/edit_button.vue
@@ -1,10 +1,10 @@
 <script>
-import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
   directives: {
@@ -37,7 +37,7 @@ export default {
 </script>
 
 <template>
-  <gl-button
+  <gl-deprecated-button
     v-gl-tooltip.top
     :href="editPath"
     :title="__('Edit file')"
@@ -45,5 +45,5 @@ export default {
     @click.native="handleEditClick"
   >
     <icon name="pencil" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/diffs/components/no_changes.vue b/app/assets/javascripts/diffs/components/no_changes.vue
index 09cb542c3dc..5fd68471094 100644
--- a/app/assets/javascripts/diffs/components/no_changes.vue
+++ b/app/assets/javascripts/diffs/components/no_changes.vue
@@ -1,12 +1,12 @@
 <script>
 import { mapGetters } from 'vuex';
 import { escape as esc } from 'lodash';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     changesEmptyStateIllustration: {
@@ -43,9 +43,9 @@ export default {
       <div class="text-content text-center">
         <span v-html="emptyStateText"></span>
         <div class="text-center">
-          <gl-button :href="getNoteableData.new_blob_path" variant="success">{{
+          <gl-deprecated-button :href="getNoteableData.new_blob_path" variant="success">{{
             __('Create commit')
-          }}</gl-button>
+          }}</gl-deprecated-button>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue
index 08e991c4791..c45de481a17 100644
--- a/app/assets/javascripts/diffs/components/settings_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue
@@ -1,11 +1,11 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
   computed: {
@@ -37,26 +37,26 @@ export default {
       <div>
         <span class="bold d-block mb-1">{{ __('File browser') }}</span>
         <div class="btn-group d-flex">
-          <gl-button
+          <gl-deprecated-button
             :class="{ active: !renderTreeList }"
             class="w-100 js-list-view"
             @click="setRenderTreeList(false)"
           >
             {{ __('List view') }}
-          </gl-button>
-          <gl-button
+          </gl-deprecated-button>
+          <gl-deprecated-button
             :class="{ active: renderTreeList }"
             class="w-100 js-tree-view"
             @click="setRenderTreeList(true)"
           >
             {{ __('Tree view') }}
-          </gl-button>
+          </gl-deprecated-button>
         </div>
       </div>
       <div class="mt-2">
         <span class="bold d-block mb-1">{{ __('Compare changes') }}</span>
         <div class="btn-group d-flex js-diff-view-buttons">
-          <gl-button
+          <gl-deprecated-button
             id="inline-diff-btn"
             :class="{ active: isInlineView }"
             class="w-100 js-inline-diff-button"
@@ -64,8 +64,8 @@ export default {
             @click="setInlineDiffViewType"
           >
             {{ __('Inline') }}
-          </gl-button>
-          <gl-button
+          </gl-deprecated-button>
+          <gl-deprecated-button
             id="parallel-diff-btn"
             :class="{ active: isParallelView }"
             class="w-100 js-parallel-diff-button"
@@ -73,7 +73,7 @@ export default {
             @click="setParallelDiffViewType"
           >
             {{ __('Side-by-side') }}
-          </gl-button>
+          </gl-deprecated-button>
         </div>
       </div>
       <div class="mt-2">
diff --git a/app/assets/javascripts/environments/components/enable_review_app_button.vue b/app/assets/javascripts/environments/components/enable_review_app_button.vue
index 8fbbc5189bf..f86072696c2 100644
--- a/app/assets/javascripts/environments/components/enable_review_app_button.vue
+++ b/app/assets/javascripts/environments/components/enable_review_app_button.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui';
+import { GlDeprecatedButton, GlModal, GlModalDirective, GlLink, GlSprintf } from '@gitlab/ui';
 import ModalCopyButton from '~/vue_shared/components/modal_copy_button.vue';
 import { s__ } from '~/locale';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlLink,
     GlModal,
     GlSprintf,
@@ -44,7 +44,7 @@ export default {
 </script>
 <template>
   <div>
-    <gl-button
+    <gl-deprecated-button
       v-gl-modal="$options.modalInfo.id"
       variant="info"
       category="secondary"
@@ -52,7 +52,7 @@ export default {
       class="js-enable-review-app-button"
     >
       {{ s__('Environments|Enable review app') }}
-    </gl-button>
+    </gl-deprecated-button>
     <gl-modal
       :modal-id="$options.modalInfo.id"
       :title="$options.modalInfo.title"
diff --git a/app/assets/javascripts/environments/components/environment_monitoring.vue b/app/assets/javascripts/environments/components/environment_monitoring.vue
index 7b4b633dc7f..bd6feb14319 100644
--- a/app/assets/javascripts/environments/components/environment_monitoring.vue
+++ b/app/assets/javascripts/environments/components/environment_monitoring.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 /**
  * Renders the Monitoring (Metrics) link in environments table.
@@ -9,7 +9,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -28,7 +28,7 @@ export default {
 };
 </script>
 <template>
-  <gl-button
+  <gl-deprecated-button
     v-gl-tooltip
     :href="monitoringUrl"
     :title="title"
@@ -38,5 +38,5 @@ export default {
     variant="default"
   >
     <icon name="chart" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_pin.vue b/app/assets/javascripts/environments/components/environment_pin.vue
index 7908928a7ac..3a219e98b08 100644
--- a/app/assets/javascripts/environments/components/environment_pin.vue
+++ b/app/assets/javascripts/environments/components/environment_pin.vue
@@ -3,7 +3,7 @@
  * Renders a prevent auto-stop button.
  * Used in environments table.
  */
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __ } from '~/locale';
 import eventHub from '../event_hub';
@@ -11,7 +11,7 @@ import eventHub from '../event_hub';
 export default {
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -31,7 +31,12 @@ export default {
 };
 </script>
 <template>
-  <gl-button v-gl-tooltip :title="$options.title" :aria-label="$options.title" @click="onPinClick">
+  <gl-deprecated-button
+    v-gl-tooltip
+    :title="$options.title"
+    :aria-label="$options.title"
+    @click="onPinClick"
+  >
     <icon name="thumbtack" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environment_rollback.vue b/app/assets/javascripts/environments/components/environment_rollback.vue
index 577e480d210..7a728961b37 100644
--- a/app/assets/javascripts/environments/components/environment_rollback.vue
+++ b/app/assets/javascripts/environments/components/environment_rollback.vue
@@ -5,7 +5,12 @@
  *
  * Makes a post request when the button is clicked.
  */
-import { GlTooltipDirective, GlLoadingIcon, GlModalDirective, GlButton } from '@gitlab/ui';
+import {
+  GlTooltipDirective,
+  GlLoadingIcon,
+  GlModalDirective,
+  GlDeprecatedButton,
+} from '@gitlab/ui';
 import { s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 import eventHub from '../event_hub';
@@ -14,7 +19,7 @@ export default {
   components: {
     Icon,
     GlLoadingIcon,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -68,7 +73,7 @@ export default {
 };
 </script>
 <template>
-  <gl-button
+  <gl-deprecated-button
     v-gl-tooltip
     v-gl-modal.confirm-rollback-modal
     :disabled="isLoading"
@@ -78,5 +83,5 @@ export default {
   >
     <icon v-if="isLastDeployment" name="repeat" /> <icon v-else name="redo" />
     <gl-loading-icon v-if="isLoading" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/environments/components/environments_app.vue b/app/assets/javascripts/environments/components/environments_app.vue
index cc1d86d06ed..0cc6f3df2d7 100644
--- a/app/assets/javascripts/environments/components/environments_app.vue
+++ b/app/assets/javascripts/environments/components/environments_app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import envrionmentsAppMixin from 'ee_else_ce/environments/mixins/environments_app_mixin';
 import Flash from '~/flash';
 import { s__ } from '~/locale';
@@ -17,7 +17,7 @@ export default {
     ConfirmRollbackModal,
     emptyState,
     EnableReviewAppButton,
-    GlButton,
+    GlDeprecatedButton,
     StopEnvironmentModal,
     DeleteEnvironmentModal,
   },
@@ -105,14 +105,14 @@ export default {
 
       <div class="nav-controls">
         <enable-review-app-button v-if="state.reviewAppDetails.can_setup_review_app" class="mr-2" />
-        <gl-button
+        <gl-deprecated-button
           v-if="canCreateEnvironment && !isLoading"
           :href="newEnvironmentPath"
           category="primary"
           variant="success"
         >
           {{ s__('Environments|New environment') }}
-        </gl-button>
+        </gl-deprecated-button>
       </div>
     </div>
 
diff --git a/app/assets/javascripts/error_tracking/components/error_details.vue b/app/assets/javascripts/error_tracking/components/error_details.vue
index 6c4f59eb49f..a8103c80da0 100644
--- a/app/assets/javascripts/error_tracking/components/error_details.vue
+++ b/app/assets/javascripts/error_tracking/components/error_details.vue
@@ -3,7 +3,7 @@ import { mapActions, mapGetters, mapState } from 'vuex';
 import dateFormat from 'dateformat';
 import createFlash from '~/flash';
 import {
-  GlButton,
+  GlDeprecatedButton,
   GlFormInput,
   GlLink,
   GlLoadingIcon,
@@ -29,7 +29,7 @@ const SENTRY_TIMEOUT = 10000;
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlFormInput,
     GlLink,
     GlLoadingIcon,
@@ -257,22 +257,22 @@ export default {
         </div>
         <div class="error-details-actions">
           <div class="d-inline-flex bv-d-sm-down-none">
-            <gl-button
+            <gl-deprecated-button
               :loading="updatingIgnoreStatus"
               data-qa-selector="update_ignore_status_button"
               @click="onIgnoreStatusUpdate"
             >
               {{ ignoreBtnLabel }}
-            </gl-button>
-            <gl-button
+            </gl-deprecated-button>
+            <gl-deprecated-button
               class="btn-outline-info ml-2"
               :loading="updatingResolveStatus"
               data-qa-selector="update_resolve_status_button"
               @click="onResolveStatusUpdate"
             >
               {{ resolveBtnLabel }}
-            </gl-button>
-            <gl-button
+            </gl-deprecated-button>
+            <gl-deprecated-button
               v-if="error.gitlabIssuePath"
               class="ml-2"
               data-qa-selector="view_issue_button"
@@ -280,7 +280,7 @@ export default {
               variant="success"
             >
               {{ __('View issue') }}
-            </gl-button>
+            </gl-deprecated-button>
             <form
               ref="sentryIssueForm"
               :action="projectIssuesPath"
@@ -295,7 +295,7 @@ export default {
                 name="issue[sentry_issue_attributes][sentry_issue_identifier]"
               />
               <gl-form-input :value="csrfToken" class="hidden" name="authenticity_token" />
-              <gl-button
+              <gl-deprecated-button
                 v-if="!error.gitlabIssuePath"
                 class="btn-success"
                 :loading="issueCreationInProgress"
@@ -303,7 +303,7 @@ export default {
                 @click="createIssue"
               >
                 {{ __('Create issue') }}
-              </gl-button>
+              </gl-deprecated-button>
             </form>
           </div>
           <gl-dropdown
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue b/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue
index 49eb04e331b..0e3fd70b17b 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlIcon, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 const IGNORED = 'ignored';
@@ -10,7 +10,7 @@ const statusValidation = [IGNORED, RESOLVED, UNRESOLVED];
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     GlButtonGroup,
   },
@@ -45,7 +45,7 @@ export default {
 <template>
   <div>
     <gl-button-group class="flex-column flex-md-row ml-0 ml-md-n4">
-      <gl-button
+      <gl-deprecated-button
         :key="ignoreBtn.status"
         :ref="`${ignoreBtn.title.toLowerCase()}Error`"
         v-gl-tooltip.hover
@@ -55,8 +55,8 @@ export default {
       >
         <gl-icon class="d-none d-md-inline m-0" :name="ignoreBtn.icon" :size="12" />
         <span class="d-md-none">{{ ignoreBtn.title }}</span>
-      </gl-button>
-      <gl-button
+      </gl-deprecated-button>
+      <gl-deprecated-button
         :key="resolveBtn.status"
         :ref="`${resolveBtn.title.toLowerCase()}Error`"
         v-gl-tooltip.hover
@@ -66,15 +66,15 @@ export default {
       >
         <gl-icon class="d-none d-md-inline m-0" :name="resolveBtn.icon" :size="12" />
         <span class="d-md-none">{{ resolveBtn.title }}</span>
-      </gl-button>
+      </gl-deprecated-button>
     </gl-button-group>
-    <gl-button
+    <gl-deprecated-button
       :href="detailsLink"
       category="secondary"
       variant="info"
       class="d-block d-md-none mb-2 mb-md-0"
     >
       {{ __('More details') }}
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
index ea0baaf4569..3d700f4d216 100644
--- a/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
+++ b/app/assets/javascripts/error_tracking/components/error_tracking_list.vue
@@ -2,7 +2,7 @@
 import { mapActions, mapState } from 'vuex';
 import {
   GlEmptyState,
-  GlButton,
+  GlDeprecatedButton,
   GlIcon,
   GlLink,
   GlLoadingIcon,
@@ -69,7 +69,7 @@ export default {
   },
   components: {
     GlEmptyState,
-    GlButton,
+    GlDeprecatedButton,
     GlDropdown,
     GlDropdownItem,
     GlDropdownDivider,
@@ -250,7 +250,7 @@ export default {
               />
             </div>
             <div class="gl-search-box-by-type-right-icons">
-              <gl-button
+              <gl-deprecated-button
                 v-if="errorSearchQuery.length > 0"
                 v-gl-tooltip.hover
                 :title="__('Clear')"
@@ -259,7 +259,7 @@ export default {
                 @click="errorSearchQuery = ''"
               >
                 <gl-icon name="close" :size="12" />
-              </gl-button>
+              </gl-deprecated-button>
             </div>
           </div>
         </div>
diff --git a/app/assets/javascripts/error_tracking_settings/components/app.vue b/app/assets/javascripts/error_tracking_settings/components/app.vue
index 786abc8ce49..7ae847e6105 100644
--- a/app/assets/javascripts/error_tracking_settings/components/app.vue
+++ b/app/assets/javascripts/error_tracking_settings/components/app.vue
@@ -1,11 +1,11 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import ProjectDropdown from './project_dropdown.vue';
 import ErrorTrackingForm from './error_tracking_form.vue';
 
 export default {
-  components: { ProjectDropdown, ErrorTrackingForm, GlButton },
+  components: { ProjectDropdown, ErrorTrackingForm, GlDeprecatedButton },
   props: {
     initialApiHost: {
       type: String,
@@ -92,13 +92,13 @@ export default {
         @select-project="updateSelectedProject"
       />
     </div>
-    <gl-button
+    <gl-deprecated-button
       :disabled="settingsLoading"
       class="js-error-tracking-button"
       variant="success"
       @click="handleSubmit"
     >
       {{ __('Save changes') }}
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
index 22cafd50bf3..5295b2197d5 100644
--- a/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
+++ b/app/assets/javascripts/grafana_integration/components/grafana_integration.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
+import { GlDeprecatedButton, GlFormGroup, GlFormInput, GlFormCheckbox } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlFormCheckbox,
     GlFormGroup,
     GlFormInput,
@@ -58,7 +58,7 @@ export default {
       <h3 class="js-section-header h4">
         {{ s__('GrafanaIntegration|Grafana Authentication') }}
       </h3>
-      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
+      <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
       <p class="js-section-sub-header">
         {{ s__('GrafanaIntegration|Embed Grafana charts in GitLab issues.') }}
       </p>
@@ -93,9 +93,9 @@ export default {
             </a>
           </p>
         </gl-form-group>
-        <gl-button variant="success" @click="updateGrafanaIntegration">
+        <gl-deprecated-button variant="success" @click="updateGrafanaIntegration">
           {{ __('Save Changes') }}
-        </gl-button>
+        </gl-deprecated-button>
       </form>
     </div>
   </section>
diff --git a/app/assets/javascripts/ide/components/ide.vue b/app/assets/javascripts/ide/components/ide.vue
index 6ed863c9c2e..7ebcacc530f 100644
--- a/app/assets/javascripts/ide/components/ide.vue
+++ b/app/assets/javascripts/ide/components/ide.vue
@@ -1,7 +1,7 @@
 <script>
 import Vue from 'vue';
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import FindFile from '~/vue_shared/components/file_finder/index.vue';
 import NewModal from './new_dropdown/modal.vue';
@@ -23,7 +23,7 @@ export default {
     FindFile,
     ErrorMessage,
     CommitEditorHeader,
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
   },
   props: {
@@ -121,14 +121,14 @@ export default {
                         )
                       }}
                     </p>
-                    <gl-button
+                    <gl-deprecated-button
                       variant="success"
                       :title="__('New file')"
                       :aria-label="__('New file')"
                       @click="openNewEntryModal({ type: 'blob' })"
                     >
                       {{ __('New file') }}
-                    </gl-button>
+                    </gl-deprecated-button>
                   </template>
                   <gl-loading-icon v-else-if="!currentTree || currentTree.loading" size="md" />
                   <p v-else>
diff --git a/app/assets/javascripts/jobs/components/job_log_controllers.vue b/app/assets/javascripts/jobs/components/job_log_controllers.vue
index 156735441ca..bcec83a7aee 100644
--- a/app/assets/javascripts/jobs/components/job_log_controllers.vue
+++ b/app/assets/javascripts/jobs/components/job_log_controllers.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import Icon from '~/vue_shared/components/icon.vue';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
@@ -10,7 +10,7 @@ export default {
   components: {
     Icon,
     GlLink,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -111,18 +111,18 @@ export default {
 
       <!-- scroll buttons -->
       <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons">
-        <gl-button
+        <gl-deprecated-button
           :disabled="isScrollTopDisabled"
           type="button"
           class="js-scroll-top btn-scroll btn-transparent btn-blank"
           @click="handleScrollToTop"
         >
           <icon name="scroll_up" />
-        </gl-button>
+        </gl-deprecated-button>
       </div>
 
       <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons">
-        <gl-button
+        <gl-deprecated-button
           :disabled="isScrollBottomDisabled"
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
           :class="{ animate: isScrollingDown }"
diff --git a/app/assets/javascripts/jobs/components/manual_variables_form.vue b/app/assets/javascripts/jobs/components/manual_variables_form.vue
index a23f30d571a..d4aab5c7faf 100644
--- a/app/assets/javascripts/jobs/components/manual_variables_form.vue
+++ b/app/assets/javascripts/jobs/components/manual_variables_form.vue
@@ -1,14 +1,14 @@
 <script>
 import { uniqueId } from 'lodash';
 import { mapActions } from 'vuex';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'ManualVariablesForm',
   components: {
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
   props: {
@@ -137,9 +137,12 @@ export default {
         <div class="table-section section-10">
           <div class="table-mobile-header" role="rowheader"></div>
           <div class="table-mobile-content justify-content-end">
-            <gl-button class="btn-transparent btn-blank w-25" @click="deleteVariable(variable.id)">
+            <gl-deprecated-button
+              class="btn-transparent btn-blank w-25"
+              @click="deleteVariable(variable.id)"
+            >
               <icon name="clear" />
-            </gl-button>
+            </gl-deprecated-button>
           </div>
         </div>
       </div>
@@ -173,9 +176,9 @@ export default {
       <p class="text-muted" v-html="helpText"></p>
     </div>
     <div class="d-flex justify-content-center">
-      <gl-button variant="primary" @click="triggerManualJob(variables)">
+      <gl-deprecated-button variant="primary" @click="triggerManualJob(variables)">
         {{ action.button_title }}
-      </gl-button>
+      </gl-deprecated-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/jobs/components/sidebar.vue b/app/assets/javascripts/jobs/components/sidebar.vue
index f1683bc2195..83ba528cfa2 100644
--- a/app/assets/javascripts/jobs/components/sidebar.vue
+++ b/app/assets/javascripts/jobs/components/sidebar.vue
@@ -1,7 +1,7 @@
 <script>
 import { isEmpty } from 'lodash';
 import { mapActions, mapState } from 'vuex';
-import { GlLink, GlButton } from '@gitlab/ui';
+import { GlLink, GlDeprecatedButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import timeagoMixin from '~/vue_shared/mixins/timeago';
 import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
@@ -24,7 +24,7 @@ export default {
     StagesDropdown,
     JobsContainer,
     GlLink,
-    GlButton,
+    GlDeprecatedButton,
   },
   mixins: [timeagoMixin],
   props: {
@@ -133,14 +133,14 @@ export default {
             >
           </div>
 
-          <gl-button
+          <gl-deprecated-button
             :aria-label="__('Toggle Sidebar')"
             type="button"
             class="btn btn-blank gutter-toggle float-right d-block d-md-none js-sidebar-build-toggle"
             @click="toggleSidebar"
           >
             <i aria-hidden="true" data-hidden="true" class="fa fa-angle-double-right"></i>
-          </gl-button>
+          </gl-deprecated-button>
         </div>
 
         <div v-if="job.terminal_path || job.new_issue_path" class="block retry-link">
diff --git a/app/assets/javascripts/jobs/components/trigger_block.vue b/app/assets/javascripts/jobs/components/trigger_block.vue
index 5edb8ff555b..7c9b2824a43 100644
--- a/app/assets/javascripts/jobs/components/trigger_block.vue
+++ b/app/assets/javascripts/jobs/components/trigger_block.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 
 const HIDDEN_VALUE = '••••••';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     trigger: {
@@ -55,11 +55,11 @@ export default {
       <p class="trigger-variables-btn-container d-flex">
         <span class="font-weight-bold">{{ __('Trigger variables:') }}</span>
 
-        <gl-button
+        <gl-deprecated-button
           v-if="hasValues"
           class="btn-sm group js-reveal-variables trigger-variables-btn"
           @click="toggleValues"
-          >{{ getToggleButtonText }}</gl-button
+          >{{ getToggleButtonText }}</gl-deprecated-button
         >
       </p>
 
diff --git a/app/assets/javascripts/logs/components/log_control_buttons.vue b/app/assets/javascripts/logs/components/log_control_buttons.vue
index 170d0474447..3f5de4c22e0 100644
--- a/app/assets/javascripts/logs/components/log_control_buttons.vue
+++ b/app/assets/javascripts/logs/components/log_control_buttons.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -51,14 +51,14 @@ export default {
       :title="__('Scroll to top')"
       aria-labelledby="scroll-to-top"
     >
-      <gl-button
+      <gl-deprecated-button
         id="scroll-to-top"
         class="btn-blank js-scroll-to-top"
         :aria-label="__('Scroll to top')"
         :disabled="scrollUpButtonDisabled"
         @click="handleScrollUp()"
         ><icon name="scroll_up"
-      /></gl-button>
+      /></gl-deprecated-button>
     </div>
     <div
       v-if="scrollDownAvailable"
@@ -68,7 +68,7 @@ export default {
       :title="__('Scroll to bottom')"
       aria-labelledby="scroll-to-bottom"
     >
-      <gl-button
+      <gl-deprecated-button
         id="scroll-to-bottom"
         class="btn-blank js-scroll-to-bottom"
         :aria-label="__('Scroll to bottom')"
@@ -76,9 +76,9 @@ export default {
         :disabled="scrollDownButtonDisabled"
         @click="handleScrollDown()"
         ><icon name="scroll_down"
-      /></gl-button>
+      /></gl-deprecated-button>
     </div>
-    <gl-button
+    <gl-deprecated-button
       id="refresh-log"
       v-gl-tooltip
       class="ml-1 px-2 js-refresh-log"
@@ -87,6 +87,6 @@ export default {
       @click="handleRefreshClick"
     >
       <icon name="retry" />
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/maintenance_mode_settings/components/app.vue b/app/assets/javascripts/maintenance_mode_settings/components/app.vue
index 47150c9dc95..7798c443914 100644
--- a/app/assets/javascripts/maintenance_mode_settings/components/app.vue
+++ b/app/assets/javascripts/maintenance_mode_settings/components/app.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlToggle, GlFormGroup, GlFormTextarea, GlButton } from '@gitlab/ui';
+import { GlToggle, GlFormGroup, GlFormTextarea, GlDeprecatedButton } from '@gitlab/ui';
 
 export default {
   name: 'MaintenanceModeSettingsApp',
@@ -7,7 +7,7 @@ export default {
     GlToggle,
     GlFormGroup,
     GlFormTextarea,
-    GlButton,
+    GlDeprecatedButton,
   },
   data() {
     return {
@@ -38,7 +38,7 @@ export default {
       />
     </gl-form-group>
     <div class="mt-4">
-      <gl-button variant="success">{{ __('Save changes') }}</gl-button>
+      <gl-deprecated-button variant="success">{{ __('Save changes') }}</gl-deprecated-button>
     </div>
   </article>
 </template>
diff --git a/app/assets/javascripts/monitoring/components/charts/time_series.vue b/app/assets/javascripts/monitoring/components/charts/time_series.vue
index ca416650f34..0ddd690ce0c 100644
--- a/app/assets/javascripts/monitoring/components/charts/time_series.vue
+++ b/app/assets/javascripts/monitoring/components/charts/time_series.vue
@@ -1,6 +1,6 @@
 <script>
 import { omit, throttle } from 'lodash';
-import { GlLink, GlButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
+import { GlLink, GlDeprecatedButton, GlTooltip, GlResizeObserverDirective } from '@gitlab/ui';
 import { GlAreaChart, GlLineChart, GlChartSeriesLabel } from '@gitlab/ui/dist/charts';
 import dateFormat from 'dateformat';
 import { s__, __ } from '~/locale';
@@ -41,7 +41,7 @@ export default {
     GlAreaChart,
     GlLineChart,
     GlTooltip,
-    GlButton,
+    GlDeprecatedButton,
     GlChartSeriesLabel,
     GlLink,
     Icon,
diff --git a/app/assets/javascripts/monitoring/components/dashboard.vue b/app/assets/javascripts/monitoring/components/dashboard.vue
index cebe501139c..2229b6d8292 100644
--- a/app/assets/javascripts/monitoring/components/dashboard.vue
+++ b/app/assets/javascripts/monitoring/components/dashboard.vue
@@ -3,7 +3,7 @@ import { debounce, pickBy } from 'lodash';
 import { mapActions, mapState, mapGetters } from 'vuex';
 import VueDraggable from 'vuedraggable';
 import {
-  GlButton,
+  GlDeprecatedButton,
   GlDropdown,
   GlDropdownItem,
   GlDropdownHeader,
@@ -44,7 +44,7 @@ export default {
     VueDraggable,
     PanelType,
     Icon,
-    GlButton,
+    GlDeprecatedButton,
     GlDropdown,
     GlLoadingIcon,
     GlDropdownItem,
@@ -471,7 +471,7 @@ export default {
         </gl-form-group>
 
         <gl-form-group class="col-sm-2 col-md-2 col-lg-1 refresh-dashboard-button">
-          <gl-button
+          <gl-deprecated-button
             ref="refreshDashboardBtn"
             v-gl-tooltip
             variant="default"
@@ -479,7 +479,7 @@ export default {
             @click="refreshDashboard"
           >
             <icon name="repeat" />
-          </gl-button>
+          </gl-deprecated-button>
         </gl-form-group>
 
         <gl-form-group
@@ -488,22 +488,22 @@ export default {
           class="dropdown-buttons col-md d-md-flex col-lg d-lg-flex align-items-end"
         >
           <div id="prometheus-graphs-dropdown-buttons">
-            <gl-button
+            <gl-deprecated-button
               v-if="showRearrangePanelsBtn"
               :pressed="isRearrangingPanels"
               variant="default"
               class="mr-2 mt-1 js-rearrange-button"
               @click="toggleRearrangingPanels"
-              >{{ __('Arrange charts') }}</gl-button
+              >{{ __('Arrange charts') }}</gl-deprecated-button
             >
-            <gl-button
+            <gl-deprecated-button
               v-if="addingMetricsAvailable"
               ref="addMetricBtn"
               v-gl-modal="$options.addMetric.modalId"
               variant="outline-success"
               data-qa-selector="add_metric_button"
               class="mr-2 mt-1"
-              >{{ $options.addMetric.title }}</gl-button
+              >{{ $options.addMetric.title }}</gl-deprecated-button
             >
             <gl-modal
               v-if="addingMetricsAvailable"
@@ -519,27 +519,29 @@ export default {
                 />
               </form>
               <div slot="modal-footer">
-                <gl-button @click="hideAddMetricModal">{{ __('Cancel') }}</gl-button>
-                <gl-button
+                <gl-deprecated-button @click="hideAddMetricModal">{{
+                  __('Cancel')
+                }}</gl-deprecated-button>
+                <gl-deprecated-button
                   ref="submitCustomMetricsFormBtn"
                   v-track-event="getAddMetricTrackingOptions()"
                   :disabled="!formIsValid"
                   variant="success"
                   @click="submitCustomMetricsForm"
-                  >{{ __('Save changes') }}</gl-button
+                  >{{ __('Save changes') }}</gl-deprecated-button
                 >
               </div>
             </gl-modal>
 
-            <gl-button
+            <gl-deprecated-button
               v-if="selectedDashboard.can_edit"
               class="mt-1 js-edit-link"
               :href="selectedDashboard.project_blob_path"
               data-qa-selector="edit_dashboard_button"
-              >{{ __('Edit dashboard') }}</gl-button
+              >{{ __('Edit dashboard') }}</gl-deprecated-button
             >
 
-            <gl-button
+            <gl-deprecated-button
               v-if="externalDashboardUrl.length"
               class="mt-1 js-external-dashboard-link"
               variant="primary"
@@ -549,7 +551,7 @@ export default {
             >
               {{ __('View full dashboard') }}
               <icon name="external-link" />
-            </gl-button>
+            </gl-deprecated-button>
           </div>
         </gl-form-group>
       </div>
diff --git a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
index b8562afe441..b60c87fee82 100644
--- a/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
+++ b/app/assets/javascripts/monitoring/components/embeds/embed_group.vue
@@ -1,14 +1,14 @@
 <script>
 import { mapState, mapActions, mapGetters } from 'vuex';
 import sum from 'lodash/sum';
-import { GlButton, GlCard, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlCard, GlIcon } from '@gitlab/ui';
 import { n__ } from '~/locale';
 import { monitoringDashboard } from '~/monitoring/stores';
 import MetricEmbed from './metric_embed.vue';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlCard,
     GlIcon,
     MetricEmbed,
@@ -78,7 +78,7 @@ export default {
     :body-class="bodyClass"
   >
     <template #header>
-      <gl-button
+      <gl-deprecated-button
         class="collapsible-card-btn d-flex text-decoration-none"
         :aria-label="buttonLabel"
         variant="link"
@@ -86,7 +86,7 @@ export default {
       >
         <gl-icon class="mr-1" :name="arrowIconName" />
         {{ buttonLabel }}
-      </gl-button>
+      </gl-deprecated-button>
     </template>
     <div class="d-flex flex-wrap">
       <metric-embed
diff --git a/app/assets/javascripts/mr_tabs_popover/components/popover.vue b/app/assets/javascripts/mr_tabs_popover/components/popover.vue
index f8293d2a473..30455709149 100644
--- a/app/assets/javascripts/mr_tabs_popover/components/popover.vue
+++ b/app/assets/javascripts/mr_tabs_popover/components/popover.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlPopover, GlButton, GlLink } from '@gitlab/ui';
+import { GlPopover, GlDeprecatedButton, GlLink } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import axios from '~/lib/utils/axios_utils';
 
 export default {
   components: {
     GlPopover,
-    GlButton,
+    GlDeprecatedButton,
     GlLink,
     Icon,
   },
@@ -57,13 +57,13 @@ export default {
         <icon name="external-link" :size="10" />
       </gl-link>
     </p>
-    <gl-button
+    <gl-deprecated-button
       variant="primary"
       size="sm"
       data-qa-selector="dismiss_popover_button"
       @click="onDismiss"
     >
       {{ __('Got it') }}
-    </gl-button>
+    </gl-deprecated-button>
   </gl-popover>
 </template>
diff --git a/app/assets/javascripts/notes/components/discussion_filter_note.vue b/app/assets/javascripts/notes/components/discussion_filter_note.vue
index 8dc4b43d69a..25ff49fbd0f 100644
--- a/app/assets/javascripts/notes/components/discussion_filter_note.vue
+++ b/app/assets/javascripts/notes/components/discussion_filter_note.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import { __, sprintf } from '~/locale';
 
@@ -7,7 +7,7 @@ import notesEventHub from '../event_hub';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
   computed: {
@@ -40,12 +40,12 @@ export default {
     <div class="timeline-content">
       <div ref="timelineContent" v-html="timelineContent"></div>
       <div class="discussion-filter-actions mt-2">
-        <gl-button ref="showAllActivity" variant="default" @click="selectFilter(0)">
+        <gl-deprecated-button ref="showAllActivity" variant="default" @click="selectFilter(0)">
           {{ __('Show all activity') }}
-        </gl-button>
-        <gl-button ref="showComments" variant="default" @click="selectFilter(1)">
+        </gl-deprecated-button>
+        <gl-deprecated-button ref="showComments" variant="default" @click="selectFilter(1)">
           {{ __('Show comments only') }}
-        </gl-button>
+        </gl-deprecated-button>
       </div>
     </div>
   </li>
diff --git a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
index 1d1529bfa5b..e5f78b1c7de 100644
--- a/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
+++ b/app/assets/javascripts/notes/components/discussion_resolve_with_issue_button.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'ResolveWithIssueButton',
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -22,13 +22,13 @@ export default {
 
 <template>
   <div class="btn-group" role="group">
-    <gl-button
+    <gl-deprecated-button
       v-gl-tooltip
       :href="url"
       :title="s__('MergeRequests|Resolve this thread in a new issue')"
       class="new-issue-for-discussion discussion-create-issue-btn"
     >
       <icon name="issue-new" />
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/notes/components/note_actions/reply_button.vue b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
index 20551279aec..30cb7967c34 100644
--- a/app/assets/javascripts/notes/components/note_actions/reply_button.vue
+++ b/app/assets/javascripts/notes/components/note_actions/reply_button.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   name: 'ReplyButton',
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -16,7 +16,7 @@ export default {
 
 <template>
   <div class="note-actions-item">
-    <gl-button
+    <gl-deprecated-button
       ref="button"
       v-gl-tooltip
       class="note-action-button"
@@ -27,6 +27,6 @@ export default {
       @click="$emit('startReplying')"
     >
       <icon name="comment" class="link-highlight" />
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/operation_settings/components/external_dashboard.vue b/app/assets/javascripts/operation_settings/components/external_dashboard.vue
index 3594e30bd69..e9c7d7c5d56 100644
--- a/app/assets/javascripts/operation_settings/components/external_dashboard.vue
+++ b/app/assets/javascripts/operation_settings/components/external_dashboard.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
+import { GlDeprecatedButton, GlFormGroup, GlFormInput, GlLink } from '@gitlab/ui';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlFormGroup,
     GlFormInput,
     GlLink,
@@ -36,7 +36,7 @@ export default {
       <h3 class="js-section-header h4">
         {{ s__('ExternalMetrics|External Dashboard') }}
       </h3>
-      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
+      <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
       <p class="js-section-sub-header">
         {{
           s__(
@@ -63,9 +63,9 @@ export default {
           />
           <!-- eslint-enable @gitlab/vue-require-i18n-attribute-strings -->
         </gl-form-group>
-        <gl-button variant="success" @click="updateExternalDashboardUrl">
+        <gl-deprecated-button variant="success" @click="updateExternalDashboardUrl">
           {{ __('Save Changes') }}
-        </gl-button>
+        </gl-deprecated-button>
       </form>
     </div>
   </section>
diff --git a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
index 831a3ca1658..5b7c8141084 100644
--- a/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
+++ b/app/assets/javascripts/pages/admin/users/components/delete_user_modal.vue
@@ -1,12 +1,12 @@
 <script>
 import { escape as esc } from 'lodash';
-import { GlModal, GlButton, GlFormInput } from '@gitlab/ui';
+import { GlModal, GlDeprecatedButton, GlFormInput } from '@gitlab/ui';
 import { s__, sprintf } from '~/locale';
 
 export default {
   components: {
     GlModal,
-    GlButton,
+    GlDeprecatedButton,
     GlFormInput,
   },
   props: {
@@ -122,11 +122,15 @@ export default {
       </form>
     </template>
     <template slot="modal-footer">
-      <gl-button variant="secondary" @click="onCancel">{{ s__('Cancel') }}</gl-button>
-      <gl-button :disabled="!canSubmit" variant="warning" @click="onSecondaryAction">
+      <gl-deprecated-button variant="secondary" @click="onCancel">{{
+        s__('Cancel')
+      }}</gl-deprecated-button>
+      <gl-deprecated-button :disabled="!canSubmit" variant="warning" @click="onSecondaryAction">
         {{ secondaryAction }}
-      </gl-button>
-      <gl-button :disabled="!canSubmit" variant="danger" @click="onSubmit">{{ action }}</gl-button>
+      </gl-deprecated-button>
+      <gl-deprecated-button :disabled="!canSubmit" variant="danger" @click="onSubmit">{{
+        action
+      }}</gl-deprecated-button>
     </template>
   </gl-modal>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/empty_state.vue b/app/assets/javascripts/pipelines/components/empty_state.vue
index d16f49f981c..74ada6a4d15 100644
--- a/app/assets/javascripts/pipelines/components/empty_state.vue
+++ b/app/assets/javascripts/pipelines/components/empty_state.vue
@@ -1,10 +1,10 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 
 export default {
   name: 'PipelinesEmptyState',
   components: {
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     helpPagePath: {
@@ -43,9 +43,13 @@ export default {
           </p>
 
           <div class="text-center">
-            <gl-button :href="helpPagePath" variant="primary" class="js-get-started-pipelines">
+            <gl-deprecated-button
+              :href="helpPagePath"
+              variant="primary"
+              class="js-get-started-pipelines"
+            >
               {{ s__('Pipelines|Get started with Pipelines') }}
-            </gl-button>
+            </gl-deprecated-button>
           </div>
         </template>
 
diff --git a/app/assets/javascripts/pipelines/components/graph/action_component.vue b/app/assets/javascripts/pipelines/components/graph/action_component.vue
index fd59a580961..c5e95036f4f 100644
--- a/app/assets/javascripts/pipelines/components/graph/action_component.vue
+++ b/app/assets/javascripts/pipelines/components/graph/action_component.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import { dasherize } from '~/lib/utils/text_utility';
 import { __ } from '~/locale';
@@ -19,7 +19,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
   },
   directives: {
@@ -82,7 +82,7 @@ export default {
 };
 </script>
 <template>
-  <gl-button
+  <gl-deprecated-button
     :id="`js-ci-action-${link}`"
     v-gl-tooltip="{ boundary: 'viewport' }"
     :title="tooltipText"
@@ -93,5 +93,5 @@ export default {
   >
     <gl-loading-icon v-if="isLoading" class="js-action-icon-loading" />
     <icon v-else :name="actionIcon" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
index d929398b6dc..550b9daa521 100644
--- a/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
+++ b/app/assets/javascripts/pipelines/components/graph/linked_pipeline.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlLoadingIcon, GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlLoadingIcon, GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
 import CiStatus from '~/vue_shared/components/ci_icon.vue';
 import { __ } from '~/locale';
 
@@ -10,7 +10,7 @@ export default {
   components: {
     CiStatus,
     GlLoadingIcon,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     pipeline: {
@@ -78,7 +78,7 @@ export default {
     class="linked-pipeline build"
     :class="{ 'child-pipeline': childPipeline }"
   >
-    <gl-button
+    <gl-deprecated-button
       :id="buttonId"
       v-gl-tooltip
       :title="tooltipText"
@@ -104,6 +104,6 @@ export default {
           >{{ label }}</span
         >
       </div>
-    </gl-button>
+    </gl-deprecated-button>
   </li>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/nav_controls.vue b/app/assets/javascripts/pipelines/components/nav_controls.vue
index 5e4147f8805..4f6c9d2bd90 100644
--- a/app/assets/javascripts/pipelines/components/nav_controls.vue
+++ b/app/assets/javascripts/pipelines/components/nav_controls.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import LoadingButton from '../../vue_shared/components/loading_button.vue';
 
 export default {
   name: 'PipelineNavControls',
   components: {
     LoadingButton,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     newPipelinePath: {
@@ -42,14 +42,14 @@ export default {
 </script>
 <template>
   <div class="nav-controls">
-    <gl-button
+    <gl-deprecated-button
       v-if="newPipelinePath"
       :href="newPipelinePath"
       variant="success"
       class="js-run-pipeline"
     >
       {{ s__('Pipelines|Run Pipeline') }}
-    </gl-button>
+    </gl-deprecated-button>
 
     <loading-button
       v-if="resetCachePath"
@@ -59,8 +59,8 @@ export default {
       @click="onClickResetCache"
     />
 
-    <gl-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint">
+    <gl-deprecated-button v-if="ciLintPath" :href="ciLintPath" class="js-ci-lint">
       {{ s__('Pipelines|CI Lint') }}
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/pipelines/components/pipelines_actions.vue b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
index 9764e32955c..7d4276e8d2e 100644
--- a/app/assets/javascripts/pipelines/components/pipelines_actions.vue
+++ b/app/assets/javascripts/pipelines/components/pipelines_actions.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective, GlLoadingIcon } from '@gitlab/ui';
 import axios from '~/lib/utils/axios_utils';
 import flash from '~/flash';
 import { s__, __, sprintf } from '~/locale';
@@ -14,7 +14,7 @@ export default {
   components: {
     Icon,
     GlCountdown,
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
   },
   props: {
@@ -94,7 +94,7 @@ export default {
 
     <ul class="dropdown-menu dropdown-menu-right">
       <li v-for="action in actions" :key="action.path">
-        <gl-button
+        <gl-deprecated-button
           :class="{ disabled: isActionDisabled(action) }"
           :disabled="isActionDisabled(action)"
           class="js-pipeline-action-link no-btn btn d-flex align-items-center justify-content-between flex-wrap"
@@ -105,7 +105,7 @@ export default {
             <icon name="clock" />
             <gl-countdown :end-date-string="action.scheduled_at" />
           </span>
-        </gl-button>
+        </gl-deprecated-button>
       </li>
     </ul>
   </div>
diff --git a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
index 2fa3fa41eed..9739ef76867 100644
--- a/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
+++ b/app/assets/javascripts/pipelines/components/test_reports/test_summary.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlProgressBar } from '@gitlab/ui';
+import { GlDeprecatedButton, GlProgressBar } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { formatTime, secondsToMilliseconds } from '~/lib/utils/datetime_utility';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -7,7 +7,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   name: 'TestSummary',
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlProgressBar,
     Icon,
   },
@@ -62,14 +62,14 @@ export default {
   <div>
     <div class="row">
       <div class="col-12 d-flex prepend-top-8 align-items-center">
-        <gl-button
+        <gl-deprecated-button
           v-if="showBack"
           size="sm"
           class="append-right-default js-back-button"
           @click="onBackClick"
         >
           <icon name="angle-left" />
-        </gl-button>
+        </gl-deprecated-button>
 
         <h4>{{ heading }}</h4>
       </div>
diff --git a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
index 3a03cd409a6..15b6a29e5cf 100644
--- a/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
+++ b/app/assets/javascripts/prometheus_alerts/components/reset_key.vue
@@ -1,5 +1,11 @@
 <script>
-import { GlButton, GlFormGroup, GlFormInput, GlModal, GlModalDirective } from '@gitlab/ui';
+import {
+  GlDeprecatedButton,
+  GlFormGroup,
+  GlFormInput,
+  GlModal,
+  GlModalDirective,
+} from '@gitlab/ui';
 import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 import axios from '~/lib/utils/axios_utils';
 import { __, sprintf } from '~/locale';
@@ -8,7 +14,7 @@ import createFlash from '~/flash';
 export default {
   copyToClipboard: __('Copy'),
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlFormGroup,
     GlFormInput,
     GlModal,
@@ -112,13 +118,13 @@ export default {
             )
           }}
         </gl-modal>
-        <gl-button v-gl-modal.authKeyModal class="js-reset-auth-key">{{
+        <gl-deprecated-button v-gl-modal.authKeyModal class="js-reset-auth-key">{{
           __('Reset key')
-        }}</gl-button>
+        }}</gl-deprecated-button>
       </template>
-      <gl-button v-else class="js-reset-auth-key" @click="resetKey">{{
+      <gl-deprecated-button v-else class="js-reset-auth-key" @click="resetKey">{{
         __('Generate key')
-      }}</gl-button>
+      }}</gl-deprecated-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/registry/explorer/pages/details.vue b/app/assets/javascripts/registry/explorer/pages/details.vue
index b558ed51a5b..6afd4d1107a 100644
--- a/app/assets/javascripts/registry/explorer/pages/details.vue
+++ b/app/assets/javascripts/registry/explorer/pages/details.vue
@@ -3,7 +3,7 @@ import { mapState, mapActions, mapGetters } from 'vuex';
 import {
   GlTable,
   GlFormCheckbox,
-  GlButton,
+  GlDeprecatedButton,
   GlIcon,
   GlTooltipDirective,
   GlPagination,
@@ -41,7 +41,7 @@ export default {
   components: {
     GlTable,
     GlFormCheckbox,
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     ClipboardButton,
     GlPagination,
@@ -250,7 +250,7 @@ export default {
         />
       </template>
       <template #head(actions)>
-        <gl-button
+        <gl-deprecated-button
           ref="bulkDeleteButton"
           v-gl-tooltip
           :disabled="!selectedItems || selectedItems.length === 0"
@@ -261,7 +261,7 @@ export default {
           @click="deleteMultipleItems()"
         >
           <gl-icon name="remove" />
-        </gl-button>
+        </gl-deprecated-button>
       </template>
 
       <template #cell(checkbox)="{index}">
@@ -304,7 +304,7 @@ export default {
         </span>
       </template>
       <template #cell(actions)="{index, item}">
-        <gl-button
+        <gl-deprecated-button
           ref="singleDeleteButton"
           :title="s__('ContainerRegistry|Remove tag')"
           :aria-label="s__('ContainerRegistry|Remove tag')"
@@ -314,7 +314,7 @@ export default {
           @click="deleteSingleItem(index)"
         >
           <gl-icon name="remove" />
-        </gl-button>
+        </gl-deprecated-button>
       </template>
 
       <template #empty>
diff --git a/app/assets/javascripts/registry/explorer/pages/list.vue b/app/assets/javascripts/registry/explorer/pages/list.vue
index 1ed24fbb59f..7204cbd90eb 100644
--- a/app/assets/javascripts/registry/explorer/pages/list.vue
+++ b/app/assets/javascripts/registry/explorer/pages/list.vue
@@ -4,7 +4,7 @@ import {
   GlEmptyState,
   GlPagination,
   GlTooltipDirective,
-  GlButton,
+  GlDeprecatedButton,
   GlIcon,
   GlModal,
   GlSprintf,
@@ -30,7 +30,7 @@ export default {
     ProjectPolicyAlert,
     ClipboardButton,
     QuickstartDropdown,
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     GlModal,
     GlSprintf,
@@ -201,7 +201,7 @@ export default {
               class="d-none d-sm-block"
               :title="$options.i18n.deleteButtonDisabled"
             >
-              <gl-button
+              <gl-deprecated-button
                 ref="deleteImageButton"
                 v-gl-tooltip
                 :disabled="!listItem.destroy_path"
@@ -212,7 +212,7 @@ export default {
                 @click="deleteImage(listItem)"
               >
                 <gl-icon name="remove" />
-              </gl-button>
+              </gl-deprecated-button>
             </div>
           </div>
           <gl-pagination
diff --git a/app/assets/javascripts/registry/settings/components/settings_form.vue b/app/assets/javascripts/registry/settings/components/settings_form.vue
index cab3c7fff85..afd502109bf 100644
--- a/app/assets/javascripts/registry/settings/components/settings_form.vue
+++ b/app/assets/javascripts/registry/settings/components/settings_form.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapActions, mapState, mapGetters } from 'vuex';
-import { GlCard, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlCard, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import Tracking from '~/tracking';
 import {
   UPDATE_SETTINGS_ERROR_MESSAGE,
@@ -12,7 +12,7 @@ import ExpirationPolicyFields from '../../shared/components/expiration_policy_fi
 export default {
   components: {
     GlCard,
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
     ExpirationPolicyFields,
   },
@@ -73,15 +73,15 @@ export default {
       </template>
       <template #footer>
         <div class="d-flex justify-content-end">
-          <gl-button
+          <gl-deprecated-button
             ref="cancel-button"
             type="reset"
             class="mr-2 d-block"
             :disabled="isCancelButtonDisabled"
           >
             {{ __('Cancel') }}
-          </gl-button>
-          <gl-button
+          </gl-deprecated-button>
+          <gl-deprecated-button
             ref="save-button"
             type="submit"
             :disabled="isSubmitButtonDisabled"
@@ -90,7 +90,7 @@ export default {
           >
             {{ __('Save expiration policy') }}
             <gl-loading-icon v-if="isLoading" class="ml-2" />
-          </gl-button>
+          </gl-deprecated-button>
         </div>
       </template>
     </gl-card>
diff --git a/app/assets/javascripts/releases/components/app_edit.vue b/app/assets/javascripts/releases/components/app_edit.vue
index 4fa0e96217a..e90adcd0e25 100644
--- a/app/assets/javascripts/releases/components/app_edit.vue
+++ b/app/assets/javascripts/releases/components/app_edit.vue
@@ -1,6 +1,6 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlButton, GlLink, GlFormInput, GlFormGroup } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLink, GlFormInput, GlFormGroup } from '@gitlab/ui';
 import { escape as esc } from 'lodash';
 import { __, sprintf } from '~/locale';
 import MarkdownField from '~/vue_shared/components/markdown/field.vue';
@@ -15,7 +15,7 @@ export default {
   components: {
     GlFormInput,
     GlFormGroup,
-    GlButton,
+    GlDeprecatedButton,
     GlLink,
     MarkdownField,
     AssetLinksForm,
@@ -163,14 +163,14 @@ export default {
       <asset-links-form v-if="showAssetLinksForm" />
 
       <div class="d-flex pt-3">
-        <gl-button
+        <gl-deprecated-button
           class="mr-auto js-submit-button"
           variant="success"
           type="submit"
           :aria-label="__('Save changes')"
         >
           {{ __('Save changes') }}
-        </gl-button>
+        </gl-deprecated-button>
         <gl-link :href="cancelPath" class="js-cancel-button btn btn-default">
           {{ __('Cancel') }}
         </gl-link>
diff --git a/app/assets/javascripts/releases/components/asset_links_form.vue b/app/assets/javascripts/releases/components/asset_links_form.vue
index f4c92477775..7299fd24ec5 100644
--- a/app/assets/javascripts/releases/components/asset_links_form.vue
+++ b/app/assets/javascripts/releases/components/asset_links_form.vue
@@ -4,7 +4,7 @@ import {
   GlSprintf,
   GlLink,
   GlFormGroup,
-  GlButton,
+  GlDeprecatedButton,
   GlIcon,
   GlTooltipDirective,
   GlFormInput,
@@ -12,7 +12,7 @@ import {
 
 export default {
   name: 'AssetLinksForm',
-  components: { GlSprintf, GlLink, GlFormGroup, GlButton, GlIcon, GlFormInput },
+  components: { GlSprintf, GlLink, GlFormGroup, GlDeprecatedButton, GlIcon, GlFormInput },
   directives: { GlTooltip: GlTooltipDirective },
   computed: {
     ...mapState('detail', ['release', 'releaseAssetsDocsPath']),
@@ -106,7 +106,7 @@ export default {
         />
       </gl-form-group>
 
-      <gl-button
+      <gl-deprecated-button
         v-gl-tooltip
         class="mb-5 mb-sm-3 flex-grow-0 flex-shrink-0 remove-button"
         :aria-label="__('Remove asset link')"
@@ -115,10 +115,14 @@ export default {
       >
         <gl-icon class="m-0" name="remove" />
         <span class="d-inline d-sm-none">{{ __('Remove asset link') }}</span>
-      </gl-button>
+      </gl-deprecated-button>
     </div>
-    <gl-button variant="link" class="align-self-end mb-5 mb-sm-0" @click="onAddAnotherClicked">
+    <gl-deprecated-button
+      variant="link"
+      class="align-self-end mb-5 mb-sm-0"
+      @click="onAddAnotherClicked"
+    >
       {{ __('Add another link') }}
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/releases/components/release_block_milestone_info.vue b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
index d9fbd2884b7..01ad0cbf732 100644
--- a/app/assets/javascripts/releases/components/release_block_milestone_info.vue
+++ b/app/assets/javascripts/releases/components/release_block_milestone_info.vue
@@ -3,7 +3,7 @@ import {
   GlProgressBar,
   GlLink,
   GlBadge,
-  GlButton,
+  GlDeprecatedButton,
   GlTooltipDirective,
   GlSprintf,
 } from '@gitlab/ui';
@@ -17,7 +17,7 @@ export default {
     GlProgressBar,
     GlLink,
     GlBadge,
-    GlButton,
+    GlDeprecatedButton,
     GlSprintf,
   },
   directives: {
@@ -134,9 +134,13 @@ export default {
             <span :key="'bullet-' + milestone.id" class="append-right-4">&bull;</span>
           </template>
           <template v-if="shouldRenderShowMoreLink(index)">
-            <gl-button :key="'more-button-' + milestone.id" variant="link" @click="toggleShowAll">
+            <gl-deprecated-button
+              :key="'more-button-' + milestone.id"
+              variant="link"
+              @click="toggleShowAll"
+            >
               {{ moreText }}
-            </gl-button>
+            </gl-deprecated-button>
           </template>
         </template>
       </div>
diff --git a/app/assets/javascripts/repository/components/last_commit.vue b/app/assets/javascripts/repository/components/last_commit.vue
index 71c3e15ba49..a13f8ac65cf 100644
--- a/app/assets/javascripts/repository/components/last_commit.vue
+++ b/app/assets/javascripts/repository/components/last_commit.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlLink, GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import defaultAvatarUrl from 'images/no_avatar.png';
 import { sprintf, s__ } from '~/locale';
 import Icon from '../../vue_shared/components/icon.vue';
@@ -19,7 +19,7 @@ export default {
     ClipboardButton,
     CiIcon,
     GlLink,
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
   },
   directives: {
@@ -124,7 +124,7 @@ export default {
           >
             {{ commit.title }}
           </gl-link>
-          <gl-button
+          <gl-deprecated-button
             v-if="commit.description"
             :class="{ open: showDescription }"
             :aria-label="__('Show commit description')"
@@ -132,7 +132,7 @@ export default {
             @click="toggleShowDescription"
           >
             <icon name="ellipsis_h" :size="10" />
-          </gl-button>
+          </gl-deprecated-button>
           <div class="committer">
             <gl-link
               v-if="commit.author"
diff --git a/app/assets/javascripts/self_monitor/components/self_monitor_form.vue b/app/assets/javascripts/self_monitor/components/self_monitor_form.vue
index 1e203d332db..adc7d3c5ebd 100644
--- a/app/assets/javascripts/self_monitor/components/self_monitor_form.vue
+++ b/app/assets/javascripts/self_monitor/components/self_monitor_form.vue
@@ -1,6 +1,6 @@
 <script>
 import Vue from 'vue';
-import { GlFormGroup, GlButton, GlModal, GlToast, GlToggle } from '@gitlab/ui';
+import { GlFormGroup, GlDeprecatedButton, GlModal, GlToast, GlToggle } from '@gitlab/ui';
 import { mapState, mapActions } from 'vuex';
 import { __, s__, sprintf } from '~/locale';
 import { visitUrl, getBaseURL } from '~/lib/utils/url_utility';
@@ -10,7 +10,7 @@ Vue.use(GlToast);
 export default {
   components: {
     GlFormGroup,
-    GlButton,
+    GlDeprecatedButton,
     GlModal,
     GlToggle,
   },
@@ -122,7 +122,7 @@ export default {
       <h4 class="js-section-header">
         {{ s__('SelfMonitoring|Self monitoring') }}
       </h4>
-      <gl-button class="js-settings-toggle">{{ __('Expand') }}</gl-button>
+      <gl-deprecated-button class="js-settings-toggle">{{ __('Expand') }}</gl-deprecated-button>
       <p class="js-section-sub-header">
         {{ s__('SelfMonitoring|Enable or disable instance self monitoring') }}
       </p>
diff --git a/app/assets/javascripts/serverless/components/missing_prometheus.vue b/app/assets/javascripts/serverless/components/missing_prometheus.vue
index 6c19434f202..6c29f7c89ff 100644
--- a/app/assets/javascripts/serverless/components/missing_prometheus.vue
+++ b/app/assets/javascripts/serverless/components/missing_prometheus.vue
@@ -1,10 +1,10 @@
 <script>
-import { GlButton, GlLink } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLink } from '@gitlab/ui';
 import { s__ } from '../../locale';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlLink,
   },
   props: {
@@ -53,9 +53,9 @@ export default {
         </p>
 
         <div v-if="!missingData" class="text-left">
-          <gl-button :href="clustersPath" variant="success">
+          <gl-deprecated-button :href="clustersPath" variant="success">
             {{ s__('ServerlessDetails|Install Prometheus') }}
-          </gl-button>
+          </gl-deprecated-button>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
index 624ca18eec9..ae6f451df18 100644
--- a/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
+++ b/app/assets/javascripts/snippets/components/snippet_blob_edit.vue
@@ -1,23 +1,30 @@
 <script>
 import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
 import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
+import { GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
     BlobHeaderEdit,
     BlobContentEdit,
+    GlLoadingIcon,
   },
   inheritAttrs: false,
   props: {
+    value: {
+      type: String,
+      required: false,
+      default: '',
+    },
     fileName: {
       type: String,
       required: false,
       default: '',
     },
-  },
-  methods: {
-    emitFileNameChange(newFileName) {
-      this.$emit('name-change', newFileName);
+    isLoading: {
+      type: Boolean,
+      required: false,
+      default: true,
     },
   },
 };
@@ -26,8 +33,19 @@ export default {
   <div class="form-group file-editor">
     <label>{{ s__('Snippets|File') }}</label>
     <div class="file-holder snippet">
-      <blob-header-edit :value="fileName" @input="emitFileNameChange" />
-      <blob-content-edit v-bind="$attrs" :file-name="fileName" v-on="$listeners" />
+      <blob-header-edit :value="fileName" @input="$emit('name-change', $event)" />
+      <gl-loading-icon
+        v-if="isLoading"
+        :label="__('Loading snippet')"
+        :size="2"
+        class="loading-animation prepend-top-20 append-bottom-20"
+      />
+      <blob-content-edit
+        v-else
+        :value="value"
+        :file-name="fileName"
+        @input="$emit('input', $event)"
+      />
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/snippets/components/snippet_header.vue b/app/assets/javascripts/snippets/components/snippet_header.vue
index 7f8781fcc49..c280096b2bf 100644
--- a/app/assets/javascripts/snippets/components/snippet_header.vue
+++ b/app/assets/javascripts/snippets/components/snippet_header.vue
@@ -4,7 +4,7 @@ import {
   GlAvatar,
   GlIcon,
   GlSprintf,
-  GlButton,
+  GlDeprecatedButton,
   GlModal,
   GlAlert,
   GlLoadingIcon,
@@ -22,7 +22,7 @@ export default {
     GlAvatar,
     GlIcon,
     GlSprintf,
-    GlButton,
+    GlDeprecatedButton,
     GlModal,
     GlAlert,
     GlLoadingIcon,
@@ -189,7 +189,7 @@ export default {
     <div class="detail-page-header-actions">
       <div class="d-none d-sm-block">
         <template v-for="(action, index) in personalSnippetActions">
-          <gl-button
+          <gl-deprecated-button
             v-if="action.condition"
             :key="index"
             :variant="action.variant"
@@ -198,7 +198,7 @@ export default {
             @click="action.click ? action.click() : undefined"
           >
             {{ action.text }}
-          </gl-button>
+          </gl-deprecated-button>
         </template>
       </div>
       <div class="d-block d-sm-none dropdown">
@@ -228,8 +228,8 @@ export default {
       </gl-sprintf>
 
       <template #modal-footer>
-        <gl-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-button>
-        <gl-button
+        <gl-deprecated-button @click="closeDeleteModal">{{ __('Cancel') }}</gl-deprecated-button>
+        <gl-deprecated-button
           variant="danger"
           :disabled="isDeleting"
           data-qa-selector="delete_snippet_button"
@@ -237,7 +237,7 @@ export default {
         >
           <gl-loading-icon v-if="isDeleting" inline />
           {{ __('Delete snippet') }}
-        </gl-button>
+        </gl-deprecated-button>
       </template>
     </gl-modal>
   </div>
diff --git a/app/assets/javascripts/static_site_editor/components/edit_area.vue b/app/assets/javascripts/static_site_editor/components/edit_area.vue
new file mode 100644
index 00000000000..921d93669c5
--- /dev/null
+++ b/app/assets/javascripts/static_site_editor/components/edit_area.vue
@@ -0,0 +1,18 @@
+<script>
+import { GlFormTextarea } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFormTextarea,
+  },
+  props: {
+    value: {
+      type: String,
+      required: true,
+    },
+  },
+};
+</script>
+<template>
+  <gl-form-textarea :value="value" v-on="$listeners" />
+</template>
diff --git a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
index 7b8b46cb048..4a0e153eb33 100644
--- a/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
+++ b/app/assets/javascripts/static_site_editor/components/static_site_editor.vue
@@ -1,3 +1,37 @@
+<script>
+import { mapState, mapActions } from 'vuex';
+import { GlSkeletonLoader } from '@gitlab/ui';
+
+import EditArea from './edit_area.vue';
+
+export default {
+  components: {
+    EditArea,
+    GlSkeletonLoader,
+  },
+  computed: {
+    ...mapState(['content', 'isContentLoaded', 'isLoadingContent']),
+  },
+  mounted() {
+    this.loadContent();
+  },
+  methods: {
+    ...mapActions(['loadContent']),
+  },
+};
+</script>
 <template>
-  <div></div>
+  <div class="d-flex justify-content-center h-100">
+    <div v-if="isLoadingContent" class="w-50 h-50 mt-2">
+      <gl-skeleton-loader :width="500" :height="102">
+        <rect width="500" height="16" rx="4" />
+        <rect y="20" width="375" height="16" rx="4" />
+        <rect x="380" y="20" width="120" height="16" rx="4" />
+        <rect y="40" width="250" height="16" rx="4" />
+        <rect x="255" y="40" width="150" height="16" rx="4" />
+        <rect x="410" y="40" width="90" height="16" rx="4" />
+      </gl-skeleton-loader>
+    </div>
+    <edit-area v-if="isContentLoaded" class="w-75 h-100 shadow-none" :value="content" />
+  </div>
 </template>
diff --git a/app/assets/javascripts/static_site_editor/store/state.js b/app/assets/javascripts/static_site_editor/store/state.js
index 512967cc3d9..68a7f95760c 100644
--- a/app/assets/javascripts/static_site_editor/store/state.js
+++ b/app/assets/javascripts/static_site_editor/store/state.js
@@ -1,4 +1,7 @@
 const createState = (initialState = {}) => ({
+  isLoadingContent: false,
+  isContentLoaded: false,
+
   content: '',
   ...initialState,
 });
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
index 45798fbc9dc..996e54a1183 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_action_button.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlTooltipDirective, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlDeprecatedButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import { RUNNING } from './constants';
 
 export default {
   name: 'DeploymentActionButton',
   components: {
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -59,7 +59,7 @@ export default {
 
 <template>
   <span v-gl-tooltip :title="actionInProgressTooltip" class="d-inline-block" tabindex="0">
-    <gl-button
+    <gl-deprecated-button
       v-gl-tooltip
       :title="buttonTitle"
       :loading="isLoading"
@@ -70,6 +70,6 @@ export default {
       <span class="d-inline-flex align-items-baseline">
         <slot> </slot>
       </span>
-    </gl-button>
+    </gl-deprecated-button>
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
index 96603d23374..ba8da46d207 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_collapsible_extension.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
     Icon,
   },
@@ -58,7 +58,7 @@ export default {
       </div>
 
       <template v-else>
-        <gl-button
+        <gl-deprecated-button
           class="btn-blank btn s32 square append-right-default"
           :aria-label="ariaLabel"
           :disabled="isLoading"
@@ -66,8 +66,8 @@ export default {
         >
           <gl-loading-icon v-if="isLoading" />
           <icon v-else :name="arrowIconName" class="js-icon" />
-        </gl-button>
-        <gl-button
+        </gl-deprecated-button>
+        <gl-deprecated-button
           variant="link"
           class="js-title"
           :disabled="isLoading"
@@ -76,7 +76,7 @@ export default {
         >
           <template v-if="isCollapsed">{{ title }}</template>
           <template v-else>{{ __('Collapse') }}</template>
-        </gl-button>
+        </gl-deprecated-button>
       </template>
     </div>
 
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
index 266c07ead25..dcf02a29f52 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commits_header.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { escape as esc } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -7,7 +7,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     isSquashEnabled: {
@@ -80,20 +80,20 @@ export default {
       class="js-mr-widget-commits-count mr-widget-extension clickable d-flex align-items-center px-3 py-2"
       @click="toggle()"
     >
-      <gl-button
+      <gl-deprecated-button
         :aria-label="ariaLabel"
         variant="blank"
         class="commit-edit-toggle square s24 append-right-default"
         @click.stop="toggle()"
       >
         <icon :name="collapseIcon" :size="16" />
-      </gl-button>
+      </gl-deprecated-button>
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
         <span class="vertical-align-middle" v-html="message"></span>
-        <gl-button variant="link" class="modify-message-button">
+        <gl-deprecated-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}
-        </gl-button>
+        </gl-deprecated-button>
       </span>
     </div>
     <div v-show="expanded"><slot></slot></div>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue
index f2d7e86a85e..01a195049ba 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_pipeline_tour.vue
@@ -1,6 +1,6 @@
 <script>
 import { s__, sprintf } from '~/locale';
-import { GlPopover, GlButton } from '@gitlab/ui';
+import { GlPopover, GlDeprecatedButton } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 import Cookies from 'js-cookie';
 import { parseBoolean } from '~/lib/utils/common_utils';
@@ -29,7 +29,7 @@ export default {
   ),
   components: {
     GlPopover,
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
   mixins: [trackingMixin],
@@ -111,7 +111,7 @@ export default {
       <img :src="pipelineSvgPath" />
     </div>
     <p v-html="$options.popoverContent"></p>
-    <gl-button
+    <gl-deprecated-button
       ref="ok"
       category="primary"
       class="mt-2 mb-0"
@@ -124,8 +124,8 @@ export default {
       :data-track-label="trackLabel"
     >
       {{ __('Show me how') }}
-    </gl-button>
-    <gl-button
+    </gl-deprecated-button>
+    <gl-deprecated-button
       ref="no-thanks"
       category="secondary"
       class="mt-2 mb-0"
@@ -138,6 +138,6 @@ export default {
       @click="dismissPopover"
     >
       {{ __("No thanks, don't show this again") }}
-    </gl-button>
+    </gl-deprecated-button>
   </gl-popover>
 </template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
index e34060c3393..360a75c3946 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/ready_to_merge.vue
@@ -1,6 +1,6 @@
 <script>
 import { isEmpty } from 'lodash';
-import { GlIcon, GlButton } from '@gitlab/ui';
+import { GlIcon, GlDeprecatedButton } from '@gitlab/ui';
 import successSvg from 'icons/_icon_status_success.svg';
 import warningSvg from 'icons/_icon_status_warning.svg';
 import readyToMergeMixin from 'ee_else_ce/vue_merge_request_widget/mixins/ready_to_merge';
@@ -26,7 +26,7 @@ export default {
     CommitEdit,
     CommitMessageDropdown,
     GlIcon,
-    GlButton,
+    GlDeprecatedButton,
     MergeImmediatelyConfirmationDialog: () =>
       import(
         'ee_component/vue_merge_request_widget/components/merge_immediately_confirmation_dialog.vue'
@@ -263,7 +263,7 @@ export default {
       <div class="media-body">
         <div class="mr-widget-body-controls media space-children">
           <span class="btn-group">
-            <gl-button
+            <gl-deprecated-button
               size="sm"
               class="qa-merge-button accept-merge-request"
               :variant="mergeButtonVariant"
@@ -272,7 +272,7 @@ export default {
               @click="handleMergeButtonClick(isAutoMergeAvailable)"
             >
               {{ mergeButtonText }}
-            </gl-button>
+            </gl-deprecated-button>
             <button
               v-if="shouldShowMergeImmediatelyDropdown"
               :disabled="isMergeButtonDisabled"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
index e52ad9156d5..118caac84b9 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/work_in_progress.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { __, s__ } from '~/locale';
 import createFlash from '~/flash';
 import StatusIcon from '../mr_widget_status_icon.vue';
@@ -11,7 +11,7 @@ export default {
   name: 'WorkInProgress',
   components: {
     StatusIcon,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     tooltip,
@@ -66,7 +66,7 @@ export default {
         >
         </i>
       </span>
-      <gl-button
+      <gl-deprecated-button
         v-if="mr.removeWIPPath"
         size="sm"
         variant="default"
@@ -76,7 +76,7 @@ export default {
         @click="handleRemoveWIP"
       >
         {{ s__('mrWidget|Resolve WIP status') }}
-      </gl-button>
+      </gl-deprecated-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 3ff1d9cf48a..d38dd258ce6 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -12,7 +12,7 @@
  *    css-class="btn-transparent"
  * />
  */
-import { GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
 
 export default {
   name: 'ClipboardButton',
@@ -20,7 +20,7 @@ export default {
     GlTooltip: GlTooltipDirective,
   },
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
   },
   props: {
@@ -65,12 +65,12 @@ export default {
 </script>
 
 <template>
-  <gl-button
+  <gl-deprecated-button
     v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     :class="cssClass"
     :title="title"
     :data-clipboard-text="clipboardText"
   >
     <gl-icon name="copy-to-clipboard" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
index 7b09337eb15..cdcd5cdef7f 100644
--- a/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
+++ b/app/assets/javascripts/vue_shared/components/date_time_picker/date_time_picker.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
+import { GlDeprecatedButton, GlDropdown, GlDropdownItem, GlFormGroup } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 
 import { convertToFixedRange, isEqualTimeRanges, findTimeRange } from '~/lib/utils/datetime_range';
@@ -28,7 +28,7 @@ export default {
     TooltipOnTruncate,
     DateTimePickerInput,
     GlFormGroup,
-    GlButton,
+    GlDeprecatedButton,
     GlDropdown,
     GlDropdownItem,
   },
@@ -192,10 +192,10 @@ export default {
             />
           </div>
           <gl-form-group>
-            <gl-button @click="closeDropdown">{{ __('Cancel') }}</gl-button>
-            <gl-button variant="success" :disabled="!isValid" @click="setFixedRange()">
+            <gl-deprecated-button @click="closeDropdown">{{ __('Cancel') }}</gl-deprecated-button>
+            <gl-deprecated-button variant="success" :disabled="!isValid" @click="setFixedRange()">
               {{ __('Apply') }}
-            </gl-button>
+            </gl-deprecated-button>
           </gl-form-group>
         </gl-form-group>
         <gl-form-group label-for="group-id-dropdown" class="col-md-5 gl-pl-1 gl-pr-1 m-0">
diff --git a/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue b/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue
index 9aca210c1fb..e1f336f5250 100644
--- a/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/droplab_dropdown_button.vue
@@ -1,11 +1,11 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import Icon from './icon.vue';
 
 export default {
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     size: {
@@ -59,9 +59,13 @@ export default {
 
 <template>
   <div class="btn-group droplab-dropdown comment-type-dropdown">
-    <gl-button :class="primaryButtonClass" :size="size" @click.prevent="handlePrimaryActionClick">
+    <gl-deprecated-button
+      :class="primaryButtonClass"
+      :size="size"
+      @click.prevent="handlePrimaryActionClick"
+    >
       {{ selectedActionTitle }}
-    </gl-button>
+    </gl-deprecated-button>
     <button
       :class="buttonSizeClass"
       type="button"
@@ -74,13 +78,13 @@ export default {
     <ul :class="dropdownClass" class="dropdown-menu dropdown-open-top">
       <template v-for="(action, index) in actions">
         <li :key="index" :class="{ 'droplab-item-selected': selectedAction === index }">
-          <gl-button class="btn-transparent" @click.prevent="handleActionClick(index)">
+          <gl-deprecated-button class="btn-transparent" @click.prevent="handleActionClick(index)">
             <i aria-hidden="true" class="fa fa-check icon"> </i>
             <div class="description">
               <strong>{{ action.title }}</strong>
               <p>{{ action.description }}</p>
             </div>
-          </gl-button>
+          </gl-deprecated-button>
         </li>
         <li v-if="index === 0" :key="`${index}-separator`" class="divider droplab-item-ignore"></li>
       </template>
diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index e2a6e92081f..1f904cd3c6c 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/app/assets/javascripts/vue_shared/components/expand_button.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
@@ -16,7 +16,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   name: 'ExpandButton',
   components: {
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
   data() {
@@ -41,7 +41,7 @@ export default {
 </script>
 <template>
   <span>
-    <gl-button
+    <gl-deprecated-button
       v-show="isCollapsed"
       :aria-label="ariaLabel"
       type="button"
@@ -49,10 +49,10 @@ export default {
       @click="onClick"
     >
       <icon :size="12" name="ellipsis_h" />
-    </gl-button>
+    </gl-deprecated-button>
     <span v-if="isCollapsed"> <slot name="short"></slot> </span>
     <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
-    <gl-button
+    <gl-deprecated-button
       v-show="!isCollapsed"
       :aria-label="ariaLabel"
       type="button"
@@ -60,6 +60,6 @@ export default {
       @click="onClick"
     >
       <icon :size="12" name="ellipsis_h" />
-    </gl-button>
+    </gl-deprecated-button>
   </span>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
index 20bcceeb477..58afcebb7b3 100644
--- a/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
+++ b/app/assets/javascripts/vue_shared/components/filtered_search_dropdown.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 /**
@@ -15,7 +15,7 @@ export default {
   name: 'FilteredSearchDropdown',
   components: {
     Icon,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     title: {
@@ -141,10 +141,10 @@ export default {
 
         <div v-if="shouldRenderCreateButton" class="dropdown-footer">
           <slot name="footer" :filter="filter">
-            <gl-button
+            <gl-deprecated-button
               class="js-dropdown-create-button btn-transparent"
               @click="$emit('createItem', filter)"
-              >{{ computedCreateButtonText }}</gl-button
+              >{{ computedCreateButtonText }}</gl-deprecated-button
             >
           </slot>
         </div>
diff --git a/app/assets/javascripts/vue_shared/components/header_ci_component.vue b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
index 876eb7b899c..2665bb4aa92 100644
--- a/app/assets/javascripts/vue_shared/components/header_ci_component.vue
+++ b/app/assets/javascripts/vue_shared/components/header_ci_component.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlDeprecatedButton } from '@gitlab/ui';
 import { __, sprintf } from '~/locale';
 import CiIconBadge from './ci_badge_link.vue';
 import TimeagoTooltip from './time_ago_tooltip.vue';
@@ -18,7 +18,7 @@ export default {
     TimeagoTooltip,
     UserAvatarImage,
     GlLink,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -108,7 +108,7 @@ export default {
     <section v-if="$slots.default" class="header-action-buttons">
       <slot></slot>
     </section>
-    <gl-button
+    <gl-deprecated-button
       v-if="hasSidebarButton"
       id="toggleSidebar"
       class="d-block d-sm-none
@@ -116,6 +116,6 @@ sidebar-toggle-btn js-sidebar-build-toggle js-sidebar-build-toggle-header"
       @click="onClickSidebarButton"
     >
       <i class="fa fa-angle-double-left" aria-hidden="true" aria-labelledby="toggleSidebar"> </i>
-    </gl-button>
+    </gl-deprecated-button>
   </header>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/loading_button.vue b/app/assets/javascripts/vue_shared/components/loading_button.vue
index c9286e22f82..3508c557289 100644
--- a/app/assets/javascripts/vue_shared/components/loading_button.vue
+++ b/app/assets/javascripts/vue_shared/components/loading_button.vue
@@ -2,7 +2,7 @@
 import { GlLoadingIcon } from '@gitlab/ui';
 /* eslint-disable vue/require-default-prop */
 /*
-This component will be deprecated in favor of gl-button.
+This component will be deprecated in favor of gl-deprecated-button.
 https://gitlab-org.gitlab.io/gitlab-ui/?path=/story/base-button--loading-button
 https://gitlab.com/gitlab-org/gitlab/issues/207412
 */
diff --git a/app/assets/javascripts/vue_shared/components/markdown/header.vue b/app/assets/javascripts/vue_shared/components/markdown/header.vue
index bf25ed96f35..665637f3b9e 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/header.vue
@@ -1,6 +1,6 @@
 <script>
 import $ from 'jquery';
-import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlPopover, GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
 import ToolbarButton from './toolbar_button.vue';
 import Icon from '../icon.vue';
 
@@ -9,7 +9,7 @@ export default {
     ToolbarButton,
     Icon,
     GlPopover,
-    GlButton,
+    GlDeprecatedButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -142,9 +142,9 @@ export default {
                   )
                 }}
               </p>
-              <gl-button variant="primary" size="sm" @click="handleSuggestDismissed">
+              <gl-deprecated-button variant="primary" size="sm" @click="handleSuggestDismissed">
                 {{ __('Got it') }}
-              </gl-button>
+              </gl-deprecated-button>
             </gl-popover>
           </template>
           <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
diff --git a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
index 8a8cf09194c..af438ce5619 100644
--- a/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
+++ b/app/assets/javascripts/vue_shared/components/markdown/suggestion_diff_header.vue
@@ -1,9 +1,9 @@
 <script>
-import { GlButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon, GlTooltipDirective } from '@gitlab/ui';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
-  components: { Icon, GlButton, GlLoadingIcon },
+  components: { Icon, GlDeprecatedButton, GlLoadingIcon },
   directives: { 'gl-tooltip': GlTooltipDirective },
   props: {
     canApply: {
@@ -52,7 +52,7 @@ export default {
       <gl-loading-icon class="d-flex-center mr-2" />
       <span>{{ __('Applying suggestion') }}</span>
     </div>
-    <gl-button
+    <gl-deprecated-button
       v-else-if="canApply"
       v-gl-tooltip.viewport="__('This also resolves the discussion')"
       class="btn-inverted js-apply-btn"
@@ -61,6 +61,6 @@ export default {
       @click="applySuggestion"
     >
       {{ __('Apply suggestion') }}
-    </gl-button>
+    </gl-deprecated-button>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
index 271a375ade2..69ba5cb97e2 100644
--- a/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
+++ b/app/assets/javascripts/vue_shared/components/modal_copy_button.vue
@@ -1,13 +1,13 @@
 <script>
 import $ from 'jquery';
-import { GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlTooltipDirective } from '@gitlab/ui';
 import Clipboard from 'clipboard';
 import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     Icon,
   },
 
@@ -113,7 +113,7 @@ export default {
 };
 </script>
 <template>
-  <gl-button
+  <gl-deprecated-button
     v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     :class="cssClasses"
     :data-clipboard-target="target"
@@ -123,5 +123,5 @@ export default {
     <slot>
       <icon name="copy-to-clipboard" />
     </slot>
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/notes/system_note.vue b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
index 4ad382ed888..ec7d7e94e5c 100644
--- a/app/assets/javascripts/vue_shared/components/notes/system_note.vue
+++ b/app/assets/javascripts/vue_shared/components/notes/system_note.vue
@@ -18,7 +18,7 @@
  */
 import $ from 'jquery';
 import { mapGetters, mapActions, mapState } from 'vuex';
-import { GlButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
+import { GlDeprecatedButton, GlSkeletonLoading, GlTooltipDirective } from '@gitlab/ui';
 import descriptionVersionHistoryMixin from 'ee_else_ce/notes/mixins/description_version_history';
 import noteHeader from '~/notes/components/note_header.vue';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -35,7 +35,7 @@ export default {
     Icon,
     noteHeader,
     TimelineEntryItem,
-    GlButton,
+    GlDeprecatedButton,
     GlSkeletonLoading,
   },
   directives: {
@@ -131,7 +131,7 @@ export default {
             <gl-skeleton-loading />
           </pre>
           <pre v-else class="wrapper mt-2" v-html="descriptionVersion"></pre>
-          <gl-button
+          <gl-deprecated-button
             v-if="canDeleteDescriptionVersion"
             ref="deleteDescriptionVersionButton"
             v-gl-tooltip
@@ -140,7 +140,7 @@ export default {
             @click="deleteDescriptionVersion"
           >
             <icon name="remove" />
-          </gl-button>
+          </gl-deprecated-button>
         </div>
       </div>
     </div>
diff --git a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
index a51b2a3ab6d..3d52f4176db 100644
--- a/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
+++ b/app/assets/javascripts/vue_shared/components/project_selector/project_list_item.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { isString } from 'lodash';
 import Icon from '~/vue_shared/components/icon.vue';
 import ProjectAvatar from '~/vue_shared/components/project_avatar/default.vue';
@@ -11,7 +11,7 @@ export default {
   components: {
     Icon,
     ProjectAvatar,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     project: {
@@ -45,7 +45,7 @@ export default {
 };
 </script>
 <template>
-  <gl-button
+  <gl-deprecated-button
     class="d-flex align-items-center btn pt-1 pb-1 border-0 project-list-item"
     @click="onClick"
   >
@@ -70,5 +70,5 @@ export default {
         v-html="highlightedProjectName"
       ></div>
     </div>
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
index b9c611d2764..55fa1e4ef9c 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapGetters } from 'vuex';
-import { GlButton, GlIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
   },
   computed: {
@@ -14,8 +14,8 @@ export default {
 </script>
 
 <template>
-  <gl-button class="labels-select-dropdown-button w-100 text-left">
+  <gl-deprecated-button class="labels-select-dropdown-button w-100 text-left">
     <span class="dropdown-toggle-text">{{ dropdownButtonText }}</span>
     <gl-icon name="chevron-down" class="pull-right" />
-  </gl-button>
+  </gl-deprecated-button>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
index 842b2fdbc43..6bb77f6b6f3 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue
@@ -2,7 +2,7 @@
 import { mapState, mapActions } from 'vuex';
 import {
   GlTooltipDirective,
-  GlButton,
+  GlDeprecatedButton,
   GlIcon,
   GlFormInput,
   GlLink,
@@ -11,7 +11,7 @@ import {
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     GlFormInput,
     GlLink,
@@ -60,7 +60,7 @@ export default {
 <template>
   <div class="labels-select-contents-create js-labels-create">
     <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
-      <gl-button
+      <gl-deprecated-button
         :aria-label="__('Go back')"
         variant="link"
         size="sm"
@@ -68,9 +68,9 @@ export default {
         @click="toggleDropdownContentsCreateView"
       >
         <gl-icon name="arrow-left" />
-      </gl-button>
+      </gl-deprecated-button>
       <span class="flex-grow-1">{{ labelsCreateTitle }}</span>
-      <gl-button
+      <gl-deprecated-button
         :aria-label="__('Close')"
         variant="link"
         size="sm"
@@ -78,7 +78,7 @@ export default {
         @click="toggleDropdownContents"
       >
         <gl-icon name="close" />
-      </gl-button>
+      </gl-deprecated-button>
     </div>
     <div class="dropdown-input">
       <gl-form-input
@@ -107,7 +107,7 @@ export default {
       </div>
     </div>
     <div class="dropdown-actions clearfix pt-2 px-2">
-      <gl-button
+      <gl-deprecated-button
         :disabled="disableCreate"
         variant="primary"
         class="pull-left d-flex align-items-center"
@@ -115,10 +115,13 @@ export default {
       >
         <gl-loading-icon v-show="labelCreateInProgress" :inline="true" class="mr-1" />
         {{ __('Create') }}
-      </gl-button>
-      <gl-button class="pull-right js-btn-cancel-create" @click="toggleDropdownContentsCreateView">
+      </gl-deprecated-button>
+      <gl-deprecated-button
+        class="pull-right js-btn-cancel-create"
+        @click="toggleDropdownContentsCreateView"
+      >
         {{ __('Cancel') }}
-      </gl-button>
+      </gl-deprecated-button>
     </div>
   </div>
 </template>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
index a3494a9e38f..a8e48bfe1a1 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_labels_view.vue
@@ -1,13 +1,13 @@
 <script>
 import { mapState, mapGetters, mapActions } from 'vuex';
-import { GlLoadingIcon, GlButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
+import { GlLoadingIcon, GlDeprecatedButton, GlIcon, GlSearchBoxByType, GlLink } from '@gitlab/ui';
 
 import { UP_KEY_CODE, DOWN_KEY_CODE, ENTER_KEY_CODE, ESC_KEY_CODE } from '~/lib/utils/keycodes';
 
 export default {
   components: {
     GlLoadingIcon,
-    GlButton,
+    GlDeprecatedButton,
     GlIcon,
     GlSearchBoxByType,
     GlLink,
@@ -125,7 +125,7 @@ export default {
     />
     <div class="dropdown-title d-flex align-items-center pt-0 pb-2">
       <span class="flex-grow-1">{{ labelsListTitle }}</span>
-      <gl-button
+      <gl-deprecated-button
         :aria-label="__('Close')"
         variant="link"
         size="sm"
@@ -133,7 +133,7 @@ export default {
         @click="toggleDropdownContents"
       >
         <gl-icon name="close" />
-      </gl-button>
+      </gl-deprecated-button>
     </div>
     <div class="dropdown-input">
       <gl-search-box-by-type v-model="searchKey" :autofocus="true" />
@@ -160,11 +160,11 @@ export default {
     <div class="dropdown-footer">
       <ul class="list-unstyled">
         <li>
-          <gl-button
+          <gl-deprecated-button
             variant="link"
             class="d-flex w-100 flex-row text-break-word label-item"
             @click="toggleDropdownContentsCreateView"
-            >{{ footerCreateLabelTitle }}</gl-button
+            >{{ footerCreateLabelTitle }}</gl-deprecated-button
           >
         </li>
         <li>
diff --git a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
index 57f7962dfe1..081c892e09f 100644
--- a/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
+++ b/app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue
@@ -1,10 +1,10 @@
 <script>
 import { mapState, mapActions } from 'vuex';
-import { GlButton, GlLoadingIcon } from '@gitlab/ui';
+import { GlDeprecatedButton, GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
-    GlButton,
+    GlDeprecatedButton,
     GlLoadingIcon,
   },
   props: {
@@ -27,12 +27,12 @@ export default {
     {{ __('Labels') }}
     <template v-if="allowLabelEdit">
       <gl-loading-icon v-show="labelsSelectInProgress" inline />
-      <gl-button
+      <gl-deprecated-button
         variant="link"
         class="pull-right js-sidebar-dropdown-toggle"
         data-qa-selector="labels_edit_button"
         @click="toggleDropdownContents"
-        >{{ __('Edit') }}</gl-button
+        >{{ __('Edit') }}</gl-deprecated-button
       >
     </template>
   </div>
diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
index 8eaf8386b99..db378d6f977 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
@@ -1,12 +1,12 @@
 <script>
-import { GlButton } from '@gitlab/ui';
+import { GlDeprecatedButton } from '@gitlab/ui';
 import { sprintf, __ } from '~/locale';
 import UserAvatarLink from './user_avatar_link.vue';
 
 export default {
   components: {
     UserAvatarLink,
-    GlButton,
+    GlDeprecatedButton,
   },
   props: {
     items: {
@@ -82,8 +82,12 @@ export default {
       :img-size="imgSize"
     />
     <template v-if="hasBreakpoint">
-      <gl-button v-if="hasHiddenItems" variant="link" @click="expand"> {{ expandText }} </gl-button>
-      <gl-button v-else variant="link" @click="collapse"> {{ __('show less') }} </gl-button>
+      <gl-deprecated-button v-if="hasHiddenItems" variant="link" @click="expand">
+        {{ expandText }}
+      </gl-deprecated-button>
+      <gl-deprecated-button v-else variant="link" @click="collapse">
+        {{ __('show less') }}
+      </gl-deprecated-button>
     </template>
   </div>
 </template>
diff --git a/app/assets/stylesheets/page_bundles/ide.scss b/app/assets/stylesheets/page_bundles/ide.scss
index 0daf81628d3..024c1781bf8 100644
--- a/app/assets/stylesheets/page_bundles/ide.scss
+++ b/app/assets/stylesheets/page_bundles/ide.scss
@@ -967,7 +967,7 @@ $ide-commit-header-height: 48px;
 }
 
 .ide-nav-form {
-  li {
+  .nav-links li {
     width: 50%;
     padding-left: 0;
     padding-right: 0;