1 files changed, 10 insertions, 12 deletions
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 d52e6d38ac6..bdcea9871ea 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,13 +1,12 @@
 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+/* eslint-disable vue/no-v-html */
+import { GlButton } from '@gitlab/ui';
 import { escape } from 'lodash';
 import { __, n__, sprintf, s__ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 export default {
   components: {
-    Icon,
-    GlDeprecatedButton,
+    GlButton,
   },
   props: {
     isSquashEnabled: {
@@ -80,20 +79,19 @@ export default {
       class="js-mr-widget-commits-count mr-widget-extension clickable d-flex align-items-center px-3 py-2"
       @click="toggle()"
     >
-      <gl-deprecated-button
+      <gl-button
         :aria-label="ariaLabel"
-        variant="blank"
-        class="commit-edit-toggle square s24 gl-mr-3"
+        category="tertiary"
+        class="commit-edit-toggle gl-mr-3"
+        :icon="collapseIcon"
         @click.stop="toggle()"
-      >
-        <icon :name="collapseIcon" :size="16" />
-      </gl-deprecated-button>
+      />
       <span v-if="expanded">{{ __('Collapse') }}</span>
       <span v-else>
         <span class="vertical-align-middle" v-html="message"></span>
-        <gl-deprecated-button variant="link" class="modify-message-button">
+        <gl-button variant="link" class="modify-message-button">
           {{ modifyLinkMessage }}
-        </gl-deprecated-button>
+        </gl-button>
       </span>
     </div>
     <div v-show="expanded"><slot></slot></div>