1 files changed, 12 insertions, 6 deletions
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
index 53bf9d5ab6f..1727383ea2c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_merge_help.vue
@@ -1,8 +1,15 @@
 <script>
+import { GlButton, GlModalDirective } from '@gitlab/ui';
 import { sprintf, s__ } from '~/locale';
 
 export default {
   name: 'MRWidgetMergeHelp',
+  components: {
+    GlButton,
+  },
+  directives: {
+    GlModalDirective,
+  },
   props: {
     missingBranch: {
       type: String,
@@ -31,13 +38,12 @@ export default {
       {{ s__('mrWidget|You can merge this merge request manually using the') }}
     </template>
 
-    <button
-      type="button"
-      class="btn-link btn-blank js-open-modal-help"
-      data-toggle="modal"
-      data-target="#modal_merge_info"
+    <gl-button
+      v-gl-modal-directive="'modal-merge-info'"
+      variant="link"
+      class="gl-mt-n2 js-open-modal-help"
     >
       {{ s__('mrWidget|command line') }}
-    </button>
+    </gl-button>
   </section>
 </template>