diff --git a/web/roles/delete-role-modal.css b/web/modals/confirmation-alert.css
copy from web/roles/delete-role-modal.css
copy to web/modals/confirmation-alert.css
--- 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
--- /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
--- a/web/roles/delete-role-modal.css
+++ b/web/roles/delete-role-modal.css
@@ -3,18 +3,3 @@
   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
--- a/web/roles/delete-role-modal.react.js
+++ b/web/roles/delete-role-modal.react.js
@@ -15,9 +15,8 @@
 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(
@@ -81,27 +80,14 @@
   }, [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>
   );
 }