diff --git a/app/assets/javascripts/ide/components/terminal/session.vue b/app/assets/javascripts/ide/components/terminal/session.vue
index a8fe9ea686668c0518f6adc5dc9a836fadbe45d1..0e67a2ab45fa8e1e9c0715bfe4c5574ad3dda1c6 100644
--- a/app/assets/javascripts/ide/components/terminal/session.vue
+++ b/app/assets/javascripts/ide/components/terminal/session.vue
@@ -1,5 +1,6 @@
 <script>
 import { mapActions, mapState } from 'vuex';
+import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
 import Terminal from './terminal.vue';
 import { isEndingStatus } from '../../stores/modules/terminal/utils';
@@ -7,6 +8,7 @@ import { isEndingStatus } from '../../stores/modules/terminal/utils';
 export default {
   components: {
     Terminal,
+    GlButton,
   },
   computed: {
     ...mapState('terminal', ['session']),
@@ -14,15 +16,17 @@ export default {
       if (isEndingStatus(this.session.status)) {
         return {
           action: () => this.restartSession(),
+          variant: 'info',
+          category: 'primary',
           text: __('Restart Terminal'),
-          class: 'btn-primary',
         };
       }
 
       return {
         action: () => this.stopSession(),
+        variant: 'danger',
+        category: 'secondary',
         text: __('Stop Terminal'),
-        class: 'btn-inverted btn-remove',
       };
     },
   },
@@ -37,15 +41,13 @@ export default {
     <header class="ide-job-header d-flex align-items-center">
       <h5>{{ __('Web Terminal') }}</h5>
       <div class="ml-auto align-self-center">
-        <button
+        <gl-button
           v-if="actionButton"
-          type="button"
-          class="btn btn-sm"
-          :class="actionButton.class"
+          :variant="actionButton.variant"
+          :category="actionButton.category"
           @click="actionButton.action"
+          >{{ actionButton.text }}</gl-button
         >
-          {{ actionButton.text }}
-        </button>
       </div>
     </header>
     <terminal :terminal-path="session.terminalPath" :status="session.status" />
diff --git a/spec/frontend/ide/components/terminal/session_spec.js b/spec/frontend/ide/components/terminal/session_spec.js
index ce61a31691aee1794f6aeea0c175491aa0dd9d80..3ca37166ac4f58881cde0c91c6bd83dd916a61a6 100644
--- a/spec/frontend/ide/components/terminal/session_spec.js
+++ b/spec/frontend/ide/components/terminal/session_spec.js
@@ -1,4 +1,5 @@
 import { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import Vuex from 'vuex';
 import TerminalSession from '~/ide/components/terminal/session.vue';
 import Terminal from '~/ide/components/terminal/terminal.vue';
@@ -38,6 +39,8 @@ describe('IDE TerminalSession', () => {
     });
   };
 
+  const findButton = () => wrapper.find(GlButton);
+
   beforeEach(() => {
     state = {
       session: { status: RUNNING, terminalPath: TEST_TERMINAL_PATH },
@@ -69,8 +72,8 @@ describe('IDE TerminalSession', () => {
       state.session = { status };
       factory();
 
-      const button = wrapper.find('button');
-      button.trigger('click');
+      const button = findButton();
+      button.vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(button.text()).toEqual('Stop Terminal');
@@ -84,8 +87,8 @@ describe('IDE TerminalSession', () => {
       state.session = { status };
       factory();
 
-      const button = wrapper.find('button');
-      button.trigger('click');
+      const button = findButton();
+      button.vm.$emit('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(button.text()).toEqual('Restart Terminal');