diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
index 806f8f939a6c4933c30183800de74733fe6c6c6a..6bcf88713a52d1487749f0075db5b5c6e12251d5 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/mr_widget_closed.vue
@@ -1,7 +1,17 @@
 <script>
+import api from '~/api';
+import showGlobalToast from '~/vue_shared/plugins/global_toast';
+
 import MrWidgetAuthorTime from '../mr_widget_author_time.vue';
 import StateContainer from '../state_container.vue';
 
+import {
+  MR_WIDGET_CLOSED_REOPEN,
+  MR_WIDGET_CLOSED_REOPENING,
+  MR_WIDGET_CLOSED_RELOADING,
+  MR_WIDGET_CLOSED_REOPEN_FAILURE,
+} from '../../i18n';
+
 export default {
   name: 'MRWidgetClosed',
   components: {
@@ -14,10 +24,62 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isPending: false,
+      isReloading: false,
+    };
+  },
+  computed: {
+    reopenText() {
+      let text = MR_WIDGET_CLOSED_REOPEN;
+
+      if (this.isPending) {
+        text = MR_WIDGET_CLOSED_REOPENING;
+      } else if (this.isReloading) {
+        text = MR_WIDGET_CLOSED_RELOADING;
+      }
+
+      return text;
+    },
+    actions() {
+      if (!window.gon?.current_user_id) {
+        return [];
+      }
+
+      return [
+        {
+          text: this.reopenText,
+          loading: this.isPending || this.isReloading,
+          onClick: this.reopen,
+          testId: 'extension-actions-reopen-button',
+        },
+      ];
+    },
+  },
+  methods: {
+    reopen() {
+      this.isPending = true;
+
+      api
+        .updateMergeRequest(this.mr.targetProjectId, this.mr.iid, { state_event: 'reopen' })
+        .then(() => {
+          this.isReloading = true;
+
+          window.location.reload();
+        })
+        .catch(() => {
+          showGlobalToast(MR_WIDGET_CLOSED_REOPEN_FAILURE);
+        })
+        .finally(() => {
+          this.isPending = false;
+        });
+    },
+  },
 };
 </script>
 <template>
-  <state-container :mr="mr" status="closed">
+  <state-container :mr="mr" status="closed" :actions="actions">
     <mr-widget-author-time
       :action-text="s__('mrWidget|Closed by')"
       :author="mr.metrics.closedBy"
diff --git a/app/assets/javascripts/vue_merge_request_widget/i18n.js b/app/assets/javascripts/vue_merge_request_widget/i18n.js
index 454a14faabbe33e5abd27368c67fe2466f96257f..5380bcae003c1f496abd3ea1320d4a563197e745 100644
--- a/app/assets/javascripts/vue_merge_request_widget/i18n.js
+++ b/app/assets/javascripts/vue_merge_request_widget/i18n.js
@@ -25,3 +25,10 @@ export const MERGE_TRAIN_BUTTON_TEXT = {
   failed: __('Start merge train...'),
   passed: __('Start merge train'),
 };
+
+export const MR_WIDGET_CLOSED_REOPEN = __('Reopen');
+export const MR_WIDGET_CLOSED_REOPENING = __('Reopening...');
+export const MR_WIDGET_CLOSED_RELOADING = __('Refreshing...');
+export const MR_WIDGET_CLOSED_REOPEN_FAILURE = __(
+  'An error occurred. Unable to reopen this merge request.',
+);
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 64f787b32f304928fa0e7e661085aa8f3f6e8cc9..f4db6328d0838195ac47b251d95652260954e664 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -4551,6 +4551,9 @@ msgstr ""
 msgid "An error occurred. Please try again."
 msgstr ""
 
+msgid "An error occurred. Unable to reopen this merge request."
+msgstr ""
+
 msgid "An example project for managing Kubernetes clusters integrated with GitLab"
 msgstr ""
 
@@ -33684,6 +33687,9 @@ msgid_plural "Refreshing in %d seconds to show the updated status..."
 msgstr[0] ""
 msgstr[1] ""
 
+msgid "Refreshing..."
+msgstr ""
+
 msgid "Regenerate export"
 msgstr ""
 
@@ -34220,6 +34226,9 @@ msgstr ""
 msgid "Reopened this %{quick_action_target}."
 msgstr ""
 
+msgid "Reopening..."
+msgstr ""
+
 msgid "Reopens this %{quick_action_target}."
 msgstr ""
 
diff --git a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
index 06ee017dee7cd400986d29f2f2c490f490fecea3..270a37f87e7de576c8891af8d75d6a2ef95fbbb2 100644
--- a/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
+++ b/spec/frontend/vue_merge_request_widget/components/states/mr_widget_closed_spec.js
@@ -1,9 +1,28 @@
-import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { shallowMount, mount } from '@vue/test-utils';
+import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+
+import api from '~/api';
+
+import showGlobalToast from '~/vue_shared/plugins/global_toast';
+
 import closedComponent from '~/vue_merge_request_widget/components/states/mr_widget_closed.vue';
 import MrWidgetAuthorTime from '~/vue_merge_request_widget/components/mr_widget_author_time.vue';
 import StateContainer from '~/vue_merge_request_widget/components/state_container.vue';
+import Actions from '~/vue_merge_request_widget/components/action_buttons.vue';
+
+import { MR_WIDGET_CLOSED_REOPEN_FAILURE } from '~/vue_merge_request_widget/i18n';
+
+jest.mock('~/api', () => ({
+  updateMergeRequest: jest.fn(),
+}));
+jest.mock('~/vue_shared/plugins/global_toast');
+
+useMockLocationHelper();
 
 const MOCK_DATA = {
+  iid: 1,
   metrics: {
     mergedBy: {},
     closedBy: {
@@ -19,22 +38,39 @@ const MOCK_DATA = {
   },
   targetBranchPath: '/twitter/flight/commits/so_long_jquery',
   targetBranch: 'so_long_jquery',
+  targetProjectId: 'twitter/flight',
 };
 
+function createComponent({ shallow = true, props = {} } = {}) {
+  const mounter = shallow ? shallowMount : mount;
+
+  return mounter(closedComponent, {
+    propsData: {
+      mr: MOCK_DATA,
+      ...props,
+    },
+  });
+}
+
+function findActions(wrapper) {
+  return wrapper.findComponent(StateContainer).findComponent(Actions);
+}
+
+function findReopenActionButton(wrapper) {
+  return findActions(wrapper).find('button[data-testid="extension-actions-reopen-button"]');
+}
+
 describe('MRWidgetClosed', () => {
   let wrapper;
 
   beforeEach(() => {
-    wrapper = shallowMount(closedComponent, {
-      propsData: {
-        mr: MOCK_DATA,
-      },
-    });
+    wrapper = createComponent();
   });
 
   afterEach(() => {
-    wrapper.destroy();
-    wrapper = null;
+    if (wrapper) {
+      wrapper.destroy();
+    }
   });
 
   it('renders closed icon', () => {
@@ -51,4 +87,93 @@ describe('MRWidgetClosed', () => {
       dateReadable: MOCK_DATA.metrics.readableClosedAt,
     });
   });
+
+  describe('actions', () => {
+    describe('reopen', () => {
+      beforeEach(() => {
+        window.gon = { current_user_id: 1 };
+        api.updateMergeRequest.mockResolvedValue(true);
+        wrapper = createComponent({ shallow: false });
+      });
+
+      it('shows the "reopen" button', () => {
+        expect(wrapper.findComponent(StateContainer).props().actions.length).toBe(1);
+        expect(findReopenActionButton(wrapper).text()).toBe('Reopen');
+      });
+
+      it('does not show widget actions when the user is not logged in', () => {
+        window.gon = {};
+
+        wrapper = createComponent();
+
+        expect(findActions(wrapper).exists()).toBe(false);
+      });
+
+      it('makes the reopen request with the correct MR information', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        reopenButton.trigger('click');
+        await nextTick();
+
+        expect(api.updateMergeRequest).toHaveBeenCalledWith(
+          MOCK_DATA.targetProjectId,
+          MOCK_DATA.iid,
+          { state_event: 'reopen' },
+        );
+      });
+
+      it('shows "Reopening..." while the reopen network request is pending', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        api.updateMergeRequest.mockReturnValue(new Promise(() => {}));
+
+        reopenButton.trigger('click');
+        await nextTick();
+
+        expect(reopenButton.text()).toBe('Reopening...');
+      });
+
+      it('shows "Refreshing..." when the reopen has succeeded', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        reopenButton.trigger('click');
+        await waitForPromises();
+
+        expect(reopenButton.text()).toBe('Refreshing...');
+      });
+
+      it('reloads the page when a reopen has succeeded', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        reopenButton.trigger('click');
+        await waitForPromises();
+
+        expect(window.location.reload).toHaveBeenCalledTimes(1);
+      });
+
+      it('shows "Reopen" when a reopen request has failed', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        api.updateMergeRequest.mockRejectedValue(false);
+
+        reopenButton.trigger('click');
+        await waitForPromises();
+
+        expect(window.location.reload).not.toHaveBeenCalled();
+        expect(reopenButton.text()).toBe('Reopen');
+      });
+
+      it('requests a toast popup when a reopen request has failed', async () => {
+        const reopenButton = findReopenActionButton(wrapper);
+
+        api.updateMergeRequest.mockRejectedValue(false);
+
+        reopenButton.trigger('click');
+        await waitForPromises();
+
+        expect(showGlobalToast).toHaveBeenCalledTimes(1);
+        expect(showGlobalToast).toHaveBeenCalledWith(MR_WIDGET_CLOSED_REOPEN_FAILURE);
+      });
+    });
+  });
 });