diff --git a/web/chat/relationship-prompt/relationship-prompt-button.js b/web/chat/relationship-prompt/relationship-prompt-button.js
--- a/web/chat/relationship-prompt/relationship-prompt-button.js
+++ b/web/chat/relationship-prompt/relationship-prompt-button.js
@@ -4,30 +4,28 @@
 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>
   );
 }
 
diff --git a/web/chat/relationship-prompt/relationship-prompt.css b/web/chat/relationship-prompt/relationship-prompt.css
--- a/web/chat/relationship-prompt/relationship-prompt.css
+++ b/web/chat/relationship-prompt/relationship-prompt.css
@@ -1,19 +1,14 @@
 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 {
diff --git a/web/chat/relationship-prompt/relationship-prompt.js b/web/chat/relationship-prompt/relationship-prompt.js
--- a/web/chat/relationship-prompt/relationship-prompt.js
+++ b/web/chat/relationship-prompt/relationship-prompt.js
@@ -12,6 +12,7 @@
 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';
 
@@ -36,7 +37,7 @@
         <RelationshipPromptButton
           text="Block User"
           icon={faUserShield}
-          color="--relationship-button-red"
+          buttonColor={buttonThemes.danger}
           onClick={blockUser}
         />
       </RelationshipPromptButtonContainer>
@@ -50,7 +51,7 @@
         <RelationshipPromptButton
           text="Unblock User"
           icon={faUserShield}
-          color="--relationship-button-green"
+          buttonColor={buttonThemes.success}
           onClick={unblockUser}
         />
       </RelationshipPromptButtonContainer>
@@ -61,13 +62,13 @@
         <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>
@@ -78,7 +79,7 @@
         <RelationshipPromptButton
           text="Withdraw Friend Request"
           icon={faUserMinus}
-          color="--relationship-button-red"
+          buttonColor={buttonThemes.danger}
           onClick={unfriendUser}
         />
       </RelationshipPromptButtonContainer>
@@ -89,13 +90,13 @@
         <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>