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="primary"
+            color={{ 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());
   };