1 files changed, 17 insertions, 12 deletions
diff --git a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
index eb97c458f88..666693e934f 100644
--- a/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
+++ b/app/assets/javascripts/invite_members/components/invite_members_trigger.vue
@@ -1,13 +1,10 @@
 <script>
-import { GlLink, GlIcon } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import eventHub from '../event_hub';
 
 export default {
-  components: {
-    GlLink,
-    GlIcon,
-  },
+  components: { GlButton },
   props: {
     displayText: {
       type: String,
@@ -24,20 +21,28 @@ export default {
       required: false,
       default: '',
     },
+    variant: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
   },
   methods: {
     openModal() {
-      eventHub.$emit('openModal');
+      eventHub.$emit('openModal', { inviteeType: 'members' });
     },
   },
 };
 </script>
 
 <template>
-  <gl-link :class="classes" @click="openModal">
-    <div v-if="icon" class="nav-icon-container">
-      <gl-icon :size="16" :name="icon" />
-    </div>
-    <span class="nav-item-name"> {{ displayText }} </span>
-  </gl-link>
+  <gl-button
+    :class="classes"
+    :icon="icon"
+    :variant="variant"
+    data-qa-selector="invite_members_button"
+    @click="openModal"
+  >
+    {{ displayText }}
+  </gl-button>
 </template>