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,31 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import * as React from 'react';
 
+import Button from '../../components/button.react';
 import css from './relationship-prompt.css';
 
 type Props = {
   +text: string,
   +icon: IconDefinition,
-  +color?: string,
-  +textColor?: string,
+  +backgroundColor: string,
   +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, backgroundColor, onClick } = props;
 
   return (
-    <button className={css.promptButton} onClick={onClick} style={buttonStyle}>
+    <Button
+      variant="filled"
+      buttonColor={{
+        backgroundColor: `var(${backgroundColor})`,
+        color: 'var(--relationship-button-text)',
+      }}
+      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,18 @@
 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;
+}
+
+button.promptButton:hover {
+  transition-property: none;
+}
+
+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
@@ -36,7 +36,7 @@
         <RelationshipPromptButton
           text="Block User"
           icon={faUserShield}
-          color="--relationship-button-red"
+          backgroundColor="--relationship-button-red"
           onClick={blockUser}
         />
       </RelationshipPromptButtonContainer>
@@ -50,7 +50,7 @@
         <RelationshipPromptButton
           text="Unblock User"
           icon={faUserShield}
-          color="--relationship-button-green"
+          backgroundColor="--relationship-button-green"
           onClick={unblockUser}
         />
       </RelationshipPromptButtonContainer>
@@ -61,13 +61,13 @@
         <RelationshipPromptButton
           text="Accept Friend Request"
           icon={faUserPlus}
-          color="--relationship-button-green"
+          backgroundColor="--relationship-button-green"
           onClick={friendUser}
         />
         <RelationshipPromptButton
           text="Reject Friend Request"
           icon={faUserSlash}
-          color="--relationship-button-red"
+          backgroundColor="--relationship-button-red"
           onClick={unfriendUser}
         />
       </RelationshipPromptButtonContainer>
@@ -78,7 +78,7 @@
         <RelationshipPromptButton
           text="Withdraw Friend Request"
           icon={faUserMinus}
-          color="--relationship-button-red"
+          backgroundColor="--relationship-button-red"
           onClick={unfriendUser}
         />
       </RelationshipPromptButtonContainer>
@@ -89,13 +89,13 @@
         <RelationshipPromptButton
           text="Add Friend"
           icon={faUserPlus}
-          color="--relationship-button-green"
+          backgroundColor="--relationship-button-green"
           onClick={friendUser}
         />
         <RelationshipPromptButton
           text="Block User"
           icon={faUserShield}
-          color="--relationship-button-red"
+          backgroundColor="--relationship-button-red"
           onClick={blockUser}
         />
       </RelationshipPromptButtonContainer>