diff --git a/web/modals/concurrent-modification-modal.react.js b/web/modals/concurrent-modification-modal.react.js
--- a/web/modals/concurrent-modification-modal.react.js
+++ b/web/modals/concurrent-modification-modal.react.js
@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 
+import Button from '../components/button.react';
 import css from '../style.css';
 import { useModalContext } from './modal-provider.react';
 import Modal from './modal.react';
@@ -21,11 +22,9 @@
           time as you! Please refresh the entry and try again.
         </p>
         <div className={css['form-footer']}>
-          <input
-            type="submit"
-            value="Refresh entry"
-            onClick={props.onRefresh}
-          />
+          <Button onClick={props.onRefresh} type="submit">
+            Refresh entry
+          </Button>
         </div>
       </div>
     </Modal>
diff --git a/web/modals/threads/confirm-leave-thread-modal.react.js b/web/modals/threads/confirm-leave-thread-modal.react.js
--- a/web/modals/threads/confirm-leave-thread-modal.react.js
+++ b/web/modals/threads/confirm-leave-thread-modal.react.js
@@ -4,6 +4,7 @@
 
 import { type ThreadInfo } from 'lib/types/thread-types';
 
+import Button from '../../components/button.react';
 import css from '../../style.css';
 import Modal from '../modal.react';
 
@@ -22,7 +23,9 @@
           {'"?'}
         </p>
         <div className={css['form-footer']}>
-          <input type="submit" value="Leave thread" onClick={props.onConfirm} />
+          <Button onClick={props.onConfirm} type="submit">
+            Leave Thread
+          </Button>
         </div>
       </div>
     </Modal>
diff --git a/web/modals/threads/new-thread-modal.react.js b/web/modals/threads/new-thread-modal.react.js
--- a/web/modals/threads/new-thread-modal.react.js
+++ b/web/modals/threads/new-thread-modal.react.js
@@ -26,6 +26,7 @@
 } from 'lib/utils/action-utils';
 import { firstLine } from 'lib/utils/string-utils';
 
+import Button from '../../components/button.react';
 import { useSelector } from '../../redux/redux-utils';
 import { nonThreadCalendarQuery } from '../../selectors/nav-selectors';
 import css from '../../style.css';
@@ -172,12 +173,13 @@
               </div>
             </div>
             <div className={css['form-footer']}>
-              <input
-                type="submit"
-                value="Save"
+              <Button
                 onClick={this.onSubmit}
                 disabled={this.props.inputDisabled}
-              />
+                type="submit"
+              >
+                Save
+              </Button>
               <div className={css['modal-form-error']}>
                 {this.state.errorMessage}
               </div>
@@ -220,7 +222,7 @@
     });
   };
 
-  onSubmit = (event: SyntheticEvent<HTMLInputElement>) => {
+  onSubmit = (event: SyntheticEvent<HTMLElement>) => {
     event.preventDefault();
 
     const threadType = this.state.threadType;
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -36,6 +36,7 @@
 } from 'lib/utils/action-utils';
 import { firstLine } from 'lib/utils/string-utils';
 
+import Button from '../../components/button.react';
 import { useModalContext } from '../../modals/modal-provider.react';
 import { useSelector } from '../../redux/redux-utils';
 import css from '../../style.css';
@@ -315,21 +316,23 @@
     let buttons = null;
     if (this.state.currentTabType === 'delete') {
       buttons = (
-        <input
-          type="submit"
-          value="Delete"
+        <Button
           onClick={this.onDelete}
+          variant="danger"
           disabled={inputDisabled}
-        />
+        >
+          Delete
+        </Button>
       );
     } else {
       buttons = (
-        <input
+        <Button
           type="submit"
-          value="Save"
           onClick={this.onSubmit}
           disabled={inputDisabled || !this.changeQueued()}
-        />
+        >
+          Save
+        </Button>
       );
     }
 
@@ -468,7 +471,7 @@
     this.setState({ accountPassword: target.value });
   };
 
-  onSubmit = (event: SyntheticEvent<HTMLInputElement>) => {
+  onSubmit = (event: SyntheticEvent<HTMLElement>) => {
     event.preventDefault();
     this.props.dispatchActionPromise(
       changeThreadSettingsActionTypes,
@@ -502,7 +505,7 @@
     }
   }
 
-  onDelete = (event: SyntheticEvent<HTMLInputElement>) => {
+  onDelete = (event: SyntheticEvent<HTMLElement>) => {
     event.preventDefault();
     this.props.dispatchActionPromise(
       deleteThreadActionTypes,
diff --git a/web/splash/splash.react.js b/web/splash/splash.react.js
--- a/web/splash/splash.react.js
+++ b/web/splash/splash.react.js
@@ -18,6 +18,7 @@
   useServerCall,
 } from 'lib/utils/action-utils';
 
+import Button from '../components/button.react';
 import LoadingIndicator from '../loading-indicator.react';
 import LogInModal from '../modals/account/log-in-modal.react';
 import { useModalContext } from '../modals/modal-provider.react';
@@ -157,13 +158,13 @@
                             <option value="android">Android</option>
                           </select>
                         </div>
-                        <button
+                        <Button
                           type="submit"
                           className={css.requestAccessSubmit}
                           onClick={this.onSubmitRequestAccess}
                         >
                           {submitButtonContent}
-                        </button>
+                        </Button>
                       </form>
                       {androidWarning}
                     </div>
@@ -220,7 +221,7 @@
     }
   };
 
-  onSubmitRequestAccess = (event: SyntheticEvent<HTMLInputElement>) => {
+  onSubmitRequestAccess = (event: SyntheticEvent<HTMLElement>) => {
     event.preventDefault();
 
     if (this.state.email.search(validEmailRegex) === -1) {