diff --git a/web/chat/chat-input-bar.css b/web/chat/chat-input-bar.css
--- a/web/chat/chat-input-bar.css
+++ b/web/chat/chat-input-bar.css
@@ -37,28 +37,8 @@
   width: 100%;
   justify-content: center;
 }
-button.joinButton {
-  display: flex;
-  align-items: center;
-  border: none;
-  padding: 12px 24px;
-  border-radius: 4px;
-  color: var(--fg);
-  font-size: var(--m-font-16);
-  font-weight: var(--semi-bold);
-  cursor: pointer;
-}
-
-button.joinButton {
-  display: flex;
-  border-radius: 4px;
-  justify-content: center;
-  cursor: pointer;
-}
 p.joinButtonText {
-  font-size: var(--m-font-16);
   font-weight: var(--semi-bold);
-  color: var(--fg);
   padding-left: 8px;
 }
 span.explanation {
diff --git a/web/chat/chat-input-bar.react.js b/web/chat/chat-input-bar.react.js
--- a/web/chat/chat-input-bar.react.js
+++ b/web/chat/chat-input-bar.react.js
@@ -34,6 +34,7 @@
   useDispatchActionPromise,
 } from 'lib/utils/action-utils';
 
+import Button from '../components/button.react';
 import {
   type InputState,
   type PendingMultimediaUpload,
@@ -185,13 +186,13 @@
       }
       joinButton = (
         <div className={css.joinButtonContainer}>
-          <button
+          <Button
+            variant="filled"
+            buttonColor={{ backgroundColor: `#${this.props.threadInfo.color}` }}
             onClick={this.onClickJoin}
-            className={css.joinButton}
-            style={{ backgroundColor: `#${this.props.threadInfo.color}` }}
           >
             {buttonContent}
-          </button>
+          </Button>
         </div>
       );
     }
@@ -414,8 +415,7 @@
     }
   };
 
-  onClickJoin = (event: SyntheticEvent<HTMLAnchorElement>) => {
-    event.preventDefault();
+  onClickJoin = () => {
     this.props.dispatchActionPromise(joinThreadActionTypes, this.joinAction());
   };