diff --git a/web/modals/threads/settings/thread-settings-relationship-button.react.js b/web/modals/threads/settings/thread-settings-relationship-button.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/threads/settings/thread-settings-relationship-button.react.js
@@ -0,0 +1,76 @@
+// @flow
+import invariant from 'invariant';
+import * as React from 'react';
+
+import {
+  updateRelationships,
+  updateRelationshipsActionTypes,
+} from 'lib/actions/relationship-actions';
+import {
+  getRelationshipActionText,
+  getRelationshipDispatchAction,
+} from 'lib/shared/relationship-utils';
+import { type RelationshipButton } from 'lib/types/relationship-types';
+import type { UserInfo } from 'lib/types/user-types';
+import {
+  useDispatchActionPromise,
+  useServerCall,
+} from 'lib/utils/action-utils';
+
+import Button from '../../../components/button.react';
+
+type ButtonProps = {
+  +relationshipButton: RelationshipButton,
+  +otherUserInfo: UserInfo,
+  +setErrorMessage?: string => void,
+};
+
+function ThreadSettingsRelationshipButton(props: ButtonProps): React.Node {
+  const { relationshipButton, otherUserInfo, setErrorMessage } = props;
+
+  const { username } = otherUserInfo;
+  invariant(username, 'Other username should be specified');
+
+  const text = React.useMemo(
+    () => getRelationshipActionText(relationshipButton, username),
+    [relationshipButton, username],
+  );
+
+  const relationshipAction = React.useMemo(
+    () => getRelationshipDispatchAction(relationshipButton),
+    [relationshipButton],
+  );
+  const dispatchActionPromise = useDispatchActionPromise();
+  const callUpdateRelationships = useServerCall(updateRelationships);
+
+  const updateRelationshipsAction = React.useCallback(
+    async action => {
+      try {
+        setErrorMessage?.('');
+        return await callUpdateRelationships({
+          action,
+          userIDs: [otherUserInfo.id],
+        });
+      } catch (e) {
+        setErrorMessage?.('Error updating relationship');
+        throw e;
+      }
+    },
+    [callUpdateRelationships, otherUserInfo.id, setErrorMessage],
+  );
+
+  const onClick = React.useCallback(() => {
+    dispatchActionPromise(
+      updateRelationshipsActionTypes,
+      updateRelationshipsAction(relationshipAction),
+    );
+  }, [dispatchActionPromise, relationshipAction, updateRelationshipsAction]);
+
+  return (
+    <Button variant="primary" onClick={onClick}>
+      {text}
+    </Button>
+  );
+}
+
+export default ThreadSettingsRelationshipButton;