diff --git a/web/chat/relationship-prompt/relationship-prompt-button.js b/web/chat/relationship-prompt/relationship-prompt-button.js
index b9fb6aa8f..12335b89f 100644
--- a/web/chat/relationship-prompt/relationship-prompt-button.js
+++ b/web/chat/relationship-prompt/relationship-prompt-button.js
@@ -1,34 +1,32 @@
 // @flow
 
 import { type IconDefinition } from '@fortawesome/fontawesome-common-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 
+import Button, { type ButtonColor } from '../../components/button.react';
 import css from './relationship-prompt.css';
 
 type Props = {
   +text: string,
   +icon: IconDefinition,
-  +color?: string,
-  +textColor?: string,
+  +buttonColor: ButtonColor,
   +onClick: () => void,
 };
 function RelationshipPromptButton(props: Props): React.Node {
-  const { text, icon, color, textColor, onClick } = props;
-  const buttonStyle = React.useMemo(
-    () => ({
-      backgroundColor: `var(${color ?? '--relationship-button-green'})`,
-      color: `var(${textColor ?? '--relationship-button-text'})`,
-    }),
-    [color, textColor],
-  );
+  const { text, icon, buttonColor, onClick } = props;
 
   return (
-    <button className={css.promptButton} onClick={onClick} style={buttonStyle}>
+    <Button
+      variant="filled"
+      buttonColor={buttonColor}
+      onClick={onClick}
+      className={css.promptButton}
+    >
       <FontAwesomeIcon icon={icon} className={css.promptIcon} />
-      {text}
-    </button>
+      <p className={css.promptText}>{text}</p>
+    </Button>
   );
 }
 
 export default RelationshipPromptButton;
diff --git a/web/chat/relationship-prompt/relationship-prompt.css b/web/chat/relationship-prompt/relationship-prompt.css
index 1a4edfa18..e12f9132c 100644
--- a/web/chat/relationship-prompt/relationship-prompt.css
+++ b/web/chat/relationship-prompt/relationship-prompt.css
@@ -1,21 +1,16 @@
 div.promptButtonContainer {
   display: flex;
 }
+
 button.promptButton {
-  font-size: var(--m-font-16);
-  font-weight: var(--semi-bold);
-  cursor: pointer;
-  margin: 0.5rem;
-  padding: 1.2rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
   flex: 1;
-  border-radius: 0.4rem;
-  border: none;
+  margin: 0.5rem;
+}
+
+p.promptText {
+  font-weight: var(--semi-bold);
 }
 
 svg.promptIcon {
   padding: 0.5rem;
 }
diff --git a/web/chat/relationship-prompt/relationship-prompt.js b/web/chat/relationship-prompt/relationship-prompt.js
index 2ae245ef8..e12ea6054 100644
--- a/web/chat/relationship-prompt/relationship-prompt.js
+++ b/web/chat/relationship-prompt/relationship-prompt.js
@@ -1,110 +1,111 @@
 // @flow
 
 import {
   faUserMinus,
   faUserPlus,
   faUserShield,
   faUserSlash,
 } from '@fortawesome/free-solid-svg-icons';
 import * as React from 'react';
 
 import { useRelationshipPrompt } from 'lib/hooks/relationship-prompt';
 import { userRelationshipStatus } from 'lib/types/relationship-types';
 import type { ThreadInfo } from 'lib/types/thread-types';
 
+import { buttonThemes } from '../../components/button.react';
 import RelationshipPromptButton from './relationship-prompt-button';
 import RelationshipPromptButtonContainer from './relationship-prompt-button-container';
 
 type Props = { +threadInfo: ThreadInfo };
 
 function RelationshipPrompt(props: Props) {
   const { threadInfo } = props;
   const {
     otherUserInfo,
     callbacks: { blockUser, unblockUser, friendUser, unfriendUser },
   } = useRelationshipPrompt(threadInfo);
   if (!otherUserInfo?.username) {
     return null;
   }
   const relationshipStatus = otherUserInfo.relationshipStatus;
 
   if (relationshipStatus === userRelationshipStatus.FRIEND) {
     return null;
   } else if (relationshipStatus === userRelationshipStatus.BLOCKED_VIEWER) {
     return (
       <RelationshipPromptButtonContainer>
         <RelationshipPromptButton
           text="Block User"
           icon={faUserShield}
-          color="--relationship-button-red"
+          buttonColor={buttonThemes.danger}
           onClick={blockUser}
         />
       </RelationshipPromptButtonContainer>
     );
   } else if (
     relationshipStatus === userRelationshipStatus.BOTH_BLOCKED ||
     relationshipStatus === userRelationshipStatus.BLOCKED_BY_VIEWER
   ) {
     return (
       <RelationshipPromptButtonContainer>
         <RelationshipPromptButton
           text="Unblock User"
           icon={faUserShield}
-          color="--relationship-button-green"
+          buttonColor={buttonThemes.success}
           onClick={unblockUser}
         />
       </RelationshipPromptButtonContainer>
     );
   } else if (relationshipStatus === userRelationshipStatus.REQUEST_RECEIVED) {
     return (
       <RelationshipPromptButtonContainer>
         <RelationshipPromptButton
           text="Accept Friend Request"
           icon={faUserPlus}
-          color="--relationship-button-green"
+          buttonColor={buttonThemes.success}
           onClick={friendUser}
         />
         <RelationshipPromptButton
           text="Reject Friend Request"
           icon={faUserSlash}
-          color="--relationship-button-red"
+          buttonColor={buttonThemes.danger}
           onClick={unfriendUser}
         />
       </RelationshipPromptButtonContainer>
     );
   } else if (relationshipStatus === userRelationshipStatus.REQUEST_SENT) {
     return (
       <RelationshipPromptButtonContainer>
         <RelationshipPromptButton
           text="Withdraw Friend Request"
           icon={faUserMinus}
-          color="--relationship-button-red"
+          buttonColor={buttonThemes.danger}
           onClick={unfriendUser}
         />
       </RelationshipPromptButtonContainer>
     );
   } else {
     return (
       <RelationshipPromptButtonContainer>
         <RelationshipPromptButton
           text="Add Friend"
           icon={faUserPlus}
-          color="--relationship-button-green"
+          buttonColor={buttonThemes.success}
           onClick={friendUser}
         />
         <RelationshipPromptButton
           text="Block User"
           icon={faUserShield}
-          color="--relationship-button-red"
+          buttonColor={buttonThemes.danger}
           onClick={blockUser}
         />
       </RelationshipPromptButtonContainer>
     );
   }
 }
 
 const MemoizedRelationshipPrompt: React.ComponentType<Props> = React.memo(
   RelationshipPrompt,
 );
 
 export default MemoizedRelationshipPrompt;