diff --git a/app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue b/app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue
index 9dd4e76befe15376347b4dcbe48a1f7036be6ea7..55eeb9d0e63d8db2b81ee783fd0d46b1f05ace51 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/widget/action_buttons.vue
@@ -1,12 +1,18 @@
 <script>
-import { GlButton, GlDropdown, GlDropdownItem, GlTooltipDirective } from '@gitlab/ui';
-import { sprintf, __ } from '~/locale';
+import {
+  GlButton,
+  GlDisclosureDropdown,
+  GlIcon,
+  GlLoadingIcon,
+  GlTooltipDirective,
+} from '@gitlab/ui';
 
 export default {
   components: {
     GlButton,
-    GlDropdown,
-    GlDropdownItem,
+    GlDisclosureDropdown,
+    GlIcon,
+    GlLoadingIcon,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -29,10 +35,22 @@ export default {
     };
   },
   computed: {
-    dropdownLabel() {
-      if (!this.widget) return undefined;
-
-      return sprintf(__('%{widget} options'), { widget: this.widget });
+    dropdownItems() {
+      return this.tertiaryButtons.map((button) => {
+        return {
+          text: button.text,
+          href: button.href,
+          action: () => this.onClickAction(button),
+          icon: button.icon || button.iconName,
+          loading: button.loading,
+          extraAttrs: {
+            dataClipboardText: button.dataClipboardText,
+            dataMethod: button.dataMethod,
+            target: button.target,
+            disabled: button.disabled,
+          },
+        };
+      });
     },
   },
   methods: {
@@ -74,32 +92,25 @@ export default {
 
 <template>
   <div class="gl-display-flex gl-align-items-flex-start">
-    <gl-dropdown
-      v-gl-tooltip
-      :title="__('Options')"
-      :text="dropdownLabel"
+    <gl-disclosure-dropdown
+      :items="dropdownItems"
       icon="ellipsis_v"
       no-caret
       category="tertiary"
-      right
-      lazy
+      placement="right"
       text-sr-only
       size="small"
       toggle-class="gl-p-2!"
       class="gl-display-block gl-md-display-none!"
     >
-      <gl-dropdown-item
-        v-for="(btn, index) in tertiaryButtons"
-        :key="index"
-        :href="btn.href"
-        :target="btn.target"
-        :data-clipboard-text="btn.dataClipboardText"
-        :data-method="btn.dataMethod"
-        @click="onClickAction(btn)"
-      >
-        {{ btn.text }}
-      </gl-dropdown-item>
-    </gl-dropdown>
+      <template #list-item="{ item }">
+        <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
+          {{ item.text }}
+          <gl-loading-icon v-if="item.loading" size="sm" />
+          <gl-icon v-else-if="item.icon" :name="item.icon" />
+        </span>
+      </template>
+    </gl-disclosure-dropdown>
     <gl-button
       v-for="(btn, index) in tertiaryButtons"
       :id="btn.id"
@@ -112,7 +123,7 @@ export default {
       :data-clipboard-text="btn.dataClipboardText"
       :data-qa-selector="actionButtonQaSelector(btn)"
       :data-method="btn.dataMethod"
-      :icon="btn.icon"
+      :icon="btn.icon || btn.iconName"
       :data-testid="btn.testId || 'extension-actions-button'"
       :variant="btn.variant || 'confirm'"
       :loading="btn.loading"
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 6306e3a84b7d1104cd8cc414efbe35c0dbaf5004..3a3e22caab00918fa5b3c7d07650baa295cbab7a 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -1346,9 +1346,6 @@ msgstr ""
 msgid "%{webhooks_link_start}%{webhook_type}%{webhooks_link_end} enable you to send notifications to web applications in response to events in a group or project. We recommend using an %{integrations_link_start}integration%{integrations_link_end} in preference to a webhook."
 msgstr ""
 
-msgid "%{widget} options"
-msgstr ""
-
 msgid "%{wildcards_link_start}Wildcards%{wildcards_link_end} such as %{code_tag_start}v*%{code_tag_end} or %{code_tag_start}*-release%{code_tag_end} are supported."
 msgstr ""
 
diff --git a/spec/frontend/vue_merge_request_widget/components/widget/action_buttons_spec.js b/spec/frontend/vue_merge_request_widget/components/widget/action_buttons_spec.js
index adefce9060ce8499f4720495db6dbd1e98387783..86e3922ec8b4097020839d3bd3576c8ff6254290 100644
--- a/spec/frontend/vue_merge_request_widget/components/widget/action_buttons_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/widget/action_buttons_spec.js
@@ -1,4 +1,4 @@
-import { GlButton, GlDropdownItem } from '@gitlab/ui';
+import { GlButton, GlDisclosureDropdown } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Actions from '~/vue_merge_request_widget/components/widget/action_buttons.vue';
 
@@ -37,7 +37,7 @@ describe('~/vue_merge_request_widget/components/widget/action_buttons.vue', () =
         tertiaryButtons: [{ text: 'hello world', href: 'https://gitlab.com', target: '_blank' }],
       });
 
-      expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(1);
+      expect(wrapper.findAllComponents(GlDisclosureDropdown)).toHaveLength(1);
     });
   });
 });