1 files changed, 8 insertions, 15 deletions
diff --git a/app/assets/javascripts/design_management/components/design_scaler.vue b/app/assets/javascripts/design_management/components/design_scaler.vue
index 8d26f84641e..85c6bd4d79e 100644
--- a/app/assets/javascripts/design_management/components/design_scaler.vue
+++ b/app/assets/javascripts/design_management/components/design_scaler.vue
@@ -1,5 +1,5 @@
 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
 
 const SCALE_STEP_SIZE = 0.2;
 const DEFAULT_SCALE = 1;
@@ -8,7 +8,8 @@ const MAX_SCALE = 2;
 
 export default {
   components: {
-    GlIcon,
+    GlButtonGroup,
+    GlButton,
   },
   data() {
     return {
@@ -49,17 +50,9 @@ export default {
 </script>
 
 <template>
-  <div class="design-scaler btn-group" role="group">
-    <button class="btn" :disabled="disableDecrease" @click="decrementScale">
-      <span class="gl-display-flex gl-justify-content-center gl-align-items-center gl-icon s16">
-        –
-      </span>
-    </button>
-    <button class="btn" :disabled="disableReset" @click="resetScale">
-      <gl-icon name="redo" />
-    </button>
-    <button class="btn" :disabled="disableIncrease" @click="incrementScale">
-      <gl-icon name="plus" />
-    </button>
-  </div>
+  <gl-button-group class="gl-z-index-1">
+    <gl-button icon="dash" :disabled="disableDecrease" @click="decrementScale" />
+    <gl-button icon="redo" :disabled="disableReset" @click="resetScale" />
+    <gl-button icon="plus" :disabled="disableIncrease" @click="incrementScale" />
+  </gl-button-group>
 </template>