diff --git a/web/modals/threads/settings/thread-settings-relationship-button.react.js b/web/modals/threads/settings/thread-settings-relationship-button.react.js
--- a/web/modals/threads/settings/thread-settings-relationship-button.react.js
+++ b/web/modals/threads/settings/thread-settings-relationship-button.react.js
@@ -12,7 +12,10 @@
   getRelationshipDispatchAction,
 } from 'lib/shared/relationship-utils';
 import type { SetState } from 'lib/types/hook-types';
-import { type RelationshipButton } from 'lib/types/relationship-types';
+import {
+  relationshipButtons,
+  type RelationshipButton,
+} from 'lib/types/relationship-types';
 import type { UserInfo } from 'lib/types/user-types';
 import {
   useDispatchActionPromise,
@@ -40,10 +43,31 @@
   const { username } = otherUserInfo;
   invariant(username, 'Other username should be specified');
 
-  const { text, action } = React.useMemo(() => {
+  const { text, action, variant } = React.useMemo(() => {
+    let buttonVariant;
+
+    if (relationshipButton === relationshipButtons.FRIEND) {
+      buttonVariant = 'success';
+    } else if (relationshipButton === relationshipButtons.UNFRIEND) {
+      buttonVariant = 'danger';
+    } else if (relationshipButton === relationshipButtons.BLOCK) {
+      buttonVariant = 'danger';
+    } else if (relationshipButton === relationshipButtons.UNBLOCK) {
+      buttonVariant = 'success';
+    } else if (relationshipButton === relationshipButtons.ACCEPT) {
+      buttonVariant = 'success';
+    } else if (relationshipButton === relationshipButtons.REJECT) {
+      buttonVariant = 'danger';
+    } else if (relationshipButton === relationshipButtons.WITHDRAW) {
+      buttonVariant = 'danger';
+    } else {
+      buttonVariant = 'primary';
+    }
+
     return {
       text: getRelationshipActionText(relationshipButton, username),
       action: getRelationshipDispatchAction(relationshipButton),
+      variant: buttonVariant,
     };
   }, [relationshipButton, username]);
 
@@ -70,7 +94,7 @@
   }, [dispatchActionPromise, updateRelationshipsActionPromise]);
 
   return (
-    <Button variant="primary" onClick={onClick} disabled={disabled}>
+    <Button variant={variant} onClick={onClick} disabled={disabled}>
       {text}
     </Button>
   );