diff --git a/web/roles/delete-role-modal.css b/web/modals/confirmation-alert.css
similarity index 50%
copy from web/roles/delete-role-modal.css
copy to web/modals/confirmation-alert.css
index 443d4cc4f..c9fd4bef1 100644
--- a/web/roles/delete-role-modal.css
+++ b/web/modals/confirmation-alert.css
@@ -1,20 +1,11 @@
-.roleDeletionText {
-  color: var(--modal-fg);
-  font-size: var(--m-font-14);
-  padding: 16px 32px;
-}
-
 .buttonsContainer {
   display: flex;
   flex-direction: row;
   justify-content: flex-end;
   padding: 16px 32px;
+  column-gap: 8px;
 }
 
 .cancelButton {
   width: 100px;
 }
-
-.deleteRoleButton {
-  margin-left: 8px;
-}
diff --git a/web/modals/confirmation-alert.react.js b/web/modals/confirmation-alert.react.js
new file mode 100644
index 000000000..6feb95882
--- /dev/null
+++ b/web/modals/confirmation-alert.react.js
@@ -0,0 +1,55 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+
+import css from './confirmation-alert.css';
+import Modal from './modal.react.js';
+import Button, { buttonThemes } from '../components/button.react.js';
+
+type Props = {
+  +children: React.Node,
+  +title: string,
+  +confirmationButtonContent: React.Node,
+  +onConfirm: () => mixed,
+  +isDestructive?: boolean,
+};
+
+function ConfirmationAlert(props: Props): React.Node {
+  const {
+    children,
+    title,
+    confirmationButtonContent,
+    onConfirm,
+    isDestructive = false,
+  } = props;
+  const { popModal } = useModalContext();
+
+  return (
+    <Modal name={title} onClose={popModal} size="large">
+      {children}
+      <div className={css.buttonsContainer}>
+        <Button
+          variant="outline"
+          className={css.cancelButton}
+          buttonColor={buttonThemes.outline}
+          onClick={popModal}
+        >
+          Cancel
+        </Button>
+        <Button
+          variant="filled"
+          buttonColor={
+            isDestructive ? buttonThemes.danger : buttonThemes.primary
+          }
+          onClick={onConfirm}
+        >
+          {confirmationButtonContent}
+        </Button>
+      </div>
+    </Modal>
+  );
+}
+
+export default ConfirmationAlert;
diff --git a/web/roles/delete-role-modal.css b/web/roles/delete-role-modal.css
index 443d4cc4f..088ead4f8 100644
--- a/web/roles/delete-role-modal.css
+++ b/web/roles/delete-role-modal.css
@@ -1,20 +1,5 @@
 .roleDeletionText {
   color: var(--modal-fg);
   font-size: var(--m-font-14);
   padding: 16px 32px;
 }
-
-.buttonsContainer {
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-end;
-  padding: 16px 32px;
-}
-
-.cancelButton {
-  width: 100px;
-}
-
-.deleteRoleButton {
-  margin-left: 8px;
-}
diff --git a/web/roles/delete-role-modal.react.js b/web/roles/delete-role-modal.react.js
index 6c4a52164..cdb132e57 100644
--- a/web/roles/delete-role-modal.react.js
+++ b/web/roles/delete-role-modal.react.js
@@ -1,108 +1,94 @@
 // @flow
 
 import * as React from 'react';
 
 import {
   useDeleteCommunityRole,
   deleteCommunityRoleActionTypes,
 } from 'lib/actions/thread-actions.js';
 import { useModalContext } from 'lib/components/modal-provider.react.js';
 import { createLoadingStatusSelector } from 'lib/selectors/loading-selectors.js';
 import { useRoleMemberCountsForCommunity } from 'lib/shared/thread-utils.js';
 import type { LoadingStatus } from 'lib/types/loading-types.js';
 import type { ThreadInfo } from 'lib/types/thread-types.js';
 import { useDispatchActionPromise } from 'lib/utils/action-utils.js';
 import { constructRoleDeletionMessagePrompt } from 'lib/utils/role-utils.js';
 
 import css from './delete-role-modal.css';
-import Button, { buttonThemes } from '../components/button.react.js';
 import LoadingIndicator from '../loading-indicator.react.js';
-import Modal from '../modals/modal.react.js';
+import ConfirmationAlert from '../modals/confirmation-alert.react.js';
 import { useSelector } from '../redux/redux-utils.js';
 
 const deleteRoleLoadingStatusSelector = createLoadingStatusSelector(
   deleteCommunityRoleActionTypes,
 );
 
 type DeleteRoleModalProps = {
   +threadInfo: ThreadInfo,
   +defaultRoleID: string,
   +roleID: string,
 };
 
 function DeleteRoleModal(props: DeleteRoleModalProps): React.Node {
   const { threadInfo, defaultRoleID, roleID } = props;
   const { popModal } = useModalContext();
 
   const callDeleteCommunityRole = useDeleteCommunityRole();
   const dispatchActionPromise = useDispatchActionPromise();
 
   const deleteRoleLoadingStatus: LoadingStatus = useSelector(
     deleteRoleLoadingStatusSelector,
   );
 
   const roleNamesToMemberCounts = useRoleMemberCountsForCommunity(threadInfo);
   const roleName = threadInfo.roles[roleID].name;
   const memberCount = roleNamesToMemberCounts[roleName];
   const defaultRoleName = threadInfo.roles[defaultRoleID].name;
 
   const message = constructRoleDeletionMessagePrompt(
     defaultRoleName,
     memberCount,
   );
 
   const onDeleteRole = React.useCallback(() => {
     dispatchActionPromise(
       deleteCommunityRoleActionTypes,
       (async () => {
         const response = await callDeleteCommunityRole({
           community: threadInfo.id,
           roleID: roleID,
         });
         popModal();
         return response;
       })(),
     );
   }, [
     callDeleteCommunityRole,
     dispatchActionPromise,
     roleID,
     threadInfo.id,
     popModal,
   ]);
 
   const deleteButtonContent = React.useMemo(() => {
     if (deleteRoleLoadingStatus === 'loading') {
       return (
         <LoadingIndicator status={deleteRoleLoadingStatus} size="medium" />
       );
     }
     return 'Yes, delete role';
   }, [deleteRoleLoadingStatus]);
 
   return (
-    <Modal name="Delete role" onClose={popModal} size="large">
+    <ConfirmationAlert
+      title="Delete role"
+      confirmationButtonContent={deleteButtonContent}
+      onConfirm={onDeleteRole}
+      isDestructive
+    >
       <div className={css.roleDeletionText}>{message}</div>
-      <div className={css.buttonsContainer}>
-        <Button
-          variant="outline"
-          className={css.cancelButton}
-          buttonColor={buttonThemes.outline}
-          onClick={popModal}
-        >
-          Cancel
-        </Button>
-        <Button
-          variant="filled"
-          className={css.deleteRoleButton}
-          buttonColor={buttonThemes.danger}
-          onClick={onDeleteRole}
-        >
-          {deleteButtonContent}
-        </Button>
-      </div>
-    </Modal>
+    </ConfirmationAlert>
   );
 }
 
 export default DeleteRoleModal;