diff --git a/app/assets/javascripts/vue_shared/components/clipboard_button.vue b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
index 945a33d9622..6b90a1f540e 100644
--- a/app/assets/javascripts/vue_shared/components/clipboard_button.vue
+++ b/app/assets/javascripts/vue_shared/components/clipboard_button.vue
@@ -12,20 +12,18 @@
  *    css-class="btn-transparent"
  * />
  */
-import tooltip from '../directives/tooltip';
+import { GlButton, GlTooltipDirective } from '@gitlab-org/gitlab-ui';
 import Icon from '../components/icon.vue';
 
 export default {
   name: 'ClipboardButton',
-
   directives: {
-    tooltip,
+    GlTooltip: GlTooltipDirective,
   },
-
   components: {
+    GlButton,
     Icon,
   },
-
   props: {
     text: {
       type: String,
@@ -68,16 +66,12 @@ export default {
 </script>
 
 <template>
-  <button
-    v-tooltip
+  <gl-button
+    v-gl-tooltip="{ placement: tooltipPlacement, container: tooltipContainer }"
     :class="cssClass"
     :title="title"
     :data-clipboard-text="clipboardText"
-    :data-container="tooltipContainer"
-    :data-placement="tooltipPlacement"
-    type="button"
-    class="btn"
   >
     <icon name="duplicate" />
-  </button>
+  </gl-button>
 </template>
diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
index 2f7ea077b54..fd17349d48f 100644
--- a/spec/javascripts/vue_shared/components/clipboard_button_spec.js
+++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
@@ -27,8 +27,6 @@ describe('clipboard button', () => {
 
     it('should have a tooltip with default values', () => {
       expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!');
-      expect(vm.$el.getAttribute('data-placement')).toEqual('top');
-      expect(vm.$el.getAttribute('data-container')).toEqual(null);
     });
 
     it('should render provided classname', () => {