diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -2,10 +2,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  background: var(--settings-btn-bg);
   border: 1px solid transparent;
   font-size: var(--m-font-16);
   padding: 12px 24px;
+  background: var(--background-color);
+  color: var(--fg);
   border-radius: 4px;
   cursor: pointer;
 }
@@ -13,64 +14,17 @@
 .btn:hover {
   transition-duration: 200ms;
   transition-property: background, color;
+  background-color: var(--hover-background-color);
 }
 
 .btn:disabled {
   cursor: not-allowed;
   color: var(--btn-disabled-color);
+  background: var(--disabled-background-color);
 }
 
-.primary {
-  background: var(--btn-bg-primary);
-  color: var(--fg);
-}
-
-.primary:hover {
-  background: var(--btn-bg-primary-hover);
-}
-
-.primary:disabled {
-  background: var(--btn-bg-primary-disabled);
-}
-
-.secondary {
-  background: var(--btn-bg-secondary);
-  color: var(--fg);
-  border-color: var(--btn-secondary-border);
-}
-
-.secondary:hover {
-  background: var(--btn-bg-secondary-hover);
-}
-
-.secondary:disabled {
-  background: var(--btn-bg-secondary-disabled);
-}
-
-.success {
-  background: var(--btn-bg-success);
-  color: var(--fg);
-}
-
-.success:hover {
-  background: var(--btn-bg-success-hover);
-}
-
-.success:disabled {
-  background: var(--btn-bg-success-disabled);
-}
-
-.danger {
-  background: var(--btn-bg-danger);
-  color: var(--fg);
-}
-
-.danger:hover {
-  background: var(--btn-bg-danger-hover);
-}
-
-.danger:disabled {
-  background: var(--btn-bg-danger-disabled);
+.outline {
+  border: 1px solid var(--btn-outline-border);
 }
 
 .round {
diff --git a/web/components/button.react.js b/web/components/button.react.js
--- a/web/components/button.react.js
+++ b/web/components/button.react.js
@@ -2,20 +2,46 @@
 
 import classnames from 'classnames';
 import * as React from 'react';
+import tinycolor from 'tinycolor2';
 
 import css from './button.css';
 
-export type ButtonVariant =
-  | 'primary'
-  | 'secondary'
-  | 'success'
-  | 'danger'
-  | 'round';
+export type ButtonVariant = 'filled' | 'outline' | 'round';
+export type ButtonColor = {
+  +backgroundColor: string,
+  +color?: string,
+  +hoverColor?: string,
+  +disabledColor?: string,
+};
+
+export const buttonThemes = {
+  standard: ({
+    backgroundColor: 'var(--btn-bg-filled)',
+    hoverColor: 'var(--btn-bg-filled-hover)',
+    disabledColor: 'var(--btn-bg-filled-disabled)',
+  }: ButtonColor),
+  danger: ({
+    backgroundColor: 'var(--btn-bg-danger)',
+    hoverColor: 'var(--btn-bg-danger-hover)',
+    disabledColor: 'var(--btn-bg-danger-disabled)',
+  }: ButtonColor),
+  success: ({
+    backgroundColor: 'var(--btn-bg-success)',
+    hoverColor: 'var(--btn-bg-success-hover)',
+    disabledColor: 'var(--btn-bg-success-disabled)',
+  }: ButtonColor),
+  outline: ({
+    backgroundColor: 'var(--btn-bg-outline)',
+    hoverColor: 'var(--btn-bg-outline-hover)',
+    disabledColor: 'var(--btn-bg-outline-disabled)',
+  }: ButtonColor),
+};
 
 export type ButtonProps = {
   +onClick: (event: SyntheticEvent<HTMLButtonElement>) => mixed,
   +children: React.Node,
   +variant?: ButtonVariant,
+  +buttonColor?: ButtonColor,
   +type?: string,
   +disabled?: boolean,
   +className?: string,
@@ -25,19 +51,53 @@
   const {
     onClick,
     children,
-    variant = 'primary',
+    variant = 'filled',
+    buttonColor,
     type,
     disabled = false,
     className = '',
   } = props;
+
   const btnCls = classnames(css.btn, css[variant]);
 
+  const style = React.useMemo(() => {
+    let color;
+    if (buttonColor) {
+      color = buttonColor;
+    } else if (variant === 'outline') {
+      color = buttonThemes.outline;
+    } else {
+      color = buttonThemes.standard;
+    }
+
+    let hoverColor;
+    if (color.hoverColor) {
+      hoverColor = color.hoverColor;
+    } else {
+      const col = tinycolor(color.backgroundColor);
+      if (col.isValid()) {
+        hoverColor = col.darken();
+      } else {
+        hoverColor = color.backgroundColor;
+      }
+    }
+
+    return {
+      'color': color.color,
+      '--background-color': color.backgroundColor,
+      '--hover-background-color': hoverColor,
+      '--disabled-background-color':
+        color.disabledColor ?? color.backgroundColor,
+    };
+  }, [buttonColor, variant]);
+
   return (
     <button
       type={type}
       className={`${btnCls} ${className}`}
       onClick={onClick}
       disabled={disabled}
+      style={style}
     >
       {children}
     </button>
diff --git a/web/components/stepper.react.js b/web/components/stepper.react.js
--- a/web/components/stepper.react.js
+++ b/web/components/stepper.react.js
@@ -37,7 +37,7 @@
   return (
     <Button
       className={css.button}
-      variant={type === 'prev' ? 'secondary' : 'primary'}
+      variant={type === 'prev' ? 'outline' : 'filled'}
       disabled={disabled || loading}
       onClick={onClick}
     >
diff --git a/web/modals/alert.react.js b/web/modals/alert.react.js
--- a/web/modals/alert.react.js
+++ b/web/modals/alert.react.js
@@ -22,7 +22,7 @@
         <Button
           onClick={popModal}
           type="submit"
-          variant="primary"
+          variant="filled"
           className={css.ok_button}
         >
           OK
diff --git a/web/modals/chat/sidebar-promote-modal.react.js b/web/modals/chat/sidebar-promote-modal.react.js
--- a/web/modals/chat/sidebar-promote-modal.react.js
+++ b/web/modals/chat/sidebar-promote-modal.react.js
@@ -4,7 +4,7 @@
 
 import type { ThreadInfo } from 'lib/types/thread-types';
 
-import Button from '../../components/button.react';
+import Button, { buttonThemes } from '../../components/button.react';
 import Modal from '../modal.react';
 import css from './sidebar-promote-modal.css';
 
@@ -34,10 +34,15 @@
         <p>{`Are you sure you want to promote "${uiName}"?`}</p>
         <p>Promoting a thread to a channel cannot be undone.</p>
         <div className={css.buttonContainer}>
-          <Button onClick={onClose} type="submit" variant="secondary">
+          <Button onClick={onClose} type="submit" variant="outline">
             Cancel
           </Button>
-          <Button onClick={handleConfirm} type="submit" variant="danger">
+          <Button
+            onClick={handleConfirm}
+            type="submit"
+            variant="filled"
+            buttonColor={buttonThemes.danger}
+          >
             Promote to channel
           </Button>
         </div>
diff --git a/web/modals/threads/cant-leave-thread-modal.react.js b/web/modals/threads/cant-leave-thread-modal.react.js
--- a/web/modals/threads/cant-leave-thread-modal.react.js
+++ b/web/modals/threads/cant-leave-thread-modal.react.js
@@ -20,7 +20,7 @@
         <Button
           onClick={props.onClose}
           type="submit"
-          variant="primary"
+          variant="filled"
           className={css.ok_button}
         >
           OK
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,7 +4,7 @@
 
 import { type ThreadInfo } from 'lib/types/thread-types';
 
-import Button from '../../components/button.react';
+import Button, { buttonThemes } from '../../components/button.react';
 import Modal from '../modal.react';
 import css from './confirm-leave-thread-modal.css';
 
@@ -32,10 +32,15 @@
           {'"?'}
         </p>
         <div className={css.buttonContainer}>
-          <Button variant="secondary" onClick={onClose}>
+          <Button variant="outline" onClick={onClose}>
             Cancel
           </Button>
-          <Button variant="danger" onClick={onConfirm} type="submit">
+          <Button
+            variant="filled"
+            buttonColor={buttonThemes.danger}
+            onClick={onConfirm}
+            type="submit"
+          >
             Yes, leave chat
           </Button>
         </div>
diff --git a/web/modals/threads/members/add-members-modal.react.js b/web/modals/threads/members/add-members-modal.react.js
--- a/web/modals/threads/members/add-members-modal.react.js
+++ b/web/modals/threads/members/add-members-modal.react.js
@@ -147,12 +147,12 @@
         />
       </div>
       <div className={css.addMembersFooter}>
-        <Button onClick={onClose} variant="secondary">
+        <Button onClick={onClose} variant="outline">
           Cancel
         </Button>
         <Button
           disabled={!pendingUsersToAdd.size}
-          variant="primary"
+          variant="filled"
           onClick={addUsers}
         >
           Add selected members
diff --git a/web/modals/threads/settings/thread-settings-delete-tab.react.js b/web/modals/threads/settings/thread-settings-delete-tab.react.js
--- a/web/modals/threads/settings/thread-settings-delete-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-delete-tab.react.js
@@ -13,6 +13,7 @@
   useServerCall,
 } from 'lib/utils/action-utils';
 
+import { buttonThemes } from '../../../components/button.react';
 import SWMansionIcon from '../../../SWMansionIcon.react';
 import Input from '../../input.react';
 import { useModalContext } from '../../modal-provider.react';
@@ -118,7 +119,8 @@
       <SubmitSection
         errorMessage={errorMessage}
         onClick={onDelete}
-        variant="danger"
+        variant="filled"
+        buttonColor={buttonThemes.danger}
         disabled={
           threadSettingsOperationInProgress || accountPassword.length === 0
         }
diff --git a/web/modals/threads/settings/thread-settings-relationship-button.react.js b/web/modals/threads/settings/thread-settings-relationship-button.react.js
--- a/web/modals/threads/settings/thread-settings-relationship-button.react.js
+++ b/web/modals/threads/settings/thread-settings-relationship-button.react.js
@@ -29,7 +29,7 @@
   useServerCall,
 } from 'lib/utils/action-utils';
 
-import Button from '../../../components/button.react';
+import Button, { buttonThemes } from '../../../components/button.react';
 import { useSelector } from '../../../redux/redux-utils';
 import css from './thread-settings-relationship-tab.css';
 
@@ -51,21 +51,21 @@
   const { username } = otherUserInfo;
   invariant(username, 'Other username should be specified');
 
-  let variant = 'primary';
+  let color;
   if (relationshipButton === relationshipButtons.FRIEND) {
-    variant = 'success';
+    color = buttonThemes.success;
   } else if (relationshipButton === relationshipButtons.UNFRIEND) {
-    variant = 'danger';
+    color = buttonThemes.danger;
   } else if (relationshipButton === relationshipButtons.BLOCK) {
-    variant = 'danger';
+    color = buttonThemes.danger;
   } else if (relationshipButton === relationshipButtons.UNBLOCK) {
-    variant = 'success';
+    color = buttonThemes.success;
   } else if (relationshipButton === relationshipButtons.ACCEPT) {
-    variant = 'success';
+    color = buttonThemes.success;
   } else if (relationshipButton === relationshipButtons.REJECT) {
-    variant = 'danger';
+    color = buttonThemes.danger;
   } else if (relationshipButton === relationshipButtons.WITHDRAW) {
-    variant = 'danger';
+    color = buttonThemes.danger;
   }
 
   const { text, action } = React.useMemo(() => {
@@ -127,7 +127,12 @@
   }, [dispatchActionPromise, updateRelationshipsActionPromise]);
 
   return (
-    <Button variant={variant} onClick={onClick} disabled={disabled}>
+    <Button
+      variant="filled"
+      buttonColor={color}
+      onClick={onClick}
+      disabled={disabled}
+    >
       <div className={css.relationshipButtonContent}>
         {icon}
         <div className={css.relationshipButtonText}>{text}</div>
diff --git a/web/settings/account-delete-modal.react.js b/web/settings/account-delete-modal.react.js
--- a/web/settings/account-delete-modal.react.js
+++ b/web/settings/account-delete-modal.react.js
@@ -17,7 +17,7 @@
   useServerCall,
 } from 'lib/utils/action-utils';
 
-import Button from '../components/button.react';
+import Button, { buttonThemes } from '../components/button.react';
 import Input from '../modals/input.react';
 import { useModalContext } from '../modals/modal-provider.react';
 import Modal from '../modals/modal.react';
@@ -89,7 +89,8 @@
             />
             <div className={css.form_footer}>
               <Button
-                variant="danger"
+                variant="filled"
+                buttonColor={buttonThemes.danger}
                 type="submit"
                 onClick={this.onDelete}
                 disabled={inputDisabled}
diff --git a/web/settings/danger-zone.react.js b/web/settings/danger-zone.react.js
--- a/web/settings/danger-zone.react.js
+++ b/web/settings/danger-zone.react.js
@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import Button from '../components/button.react.js';
+import Button, { buttonThemes } from '../components/button.react';
 import { useModalContext } from '../modals/modal-provider.react.js';
 import AccountDeleteModal from './account-delete-modal.react';
 import css from './danger-zone.css';
@@ -20,7 +20,8 @@
       <h5 className={css.subheading}>Delete Account</h5>
       <Button
         onClick={onDeleteAccountClick}
-        variant="danger"
+        variant="filled"
+        buttonColor={buttonThemes.danger}
         className={css.button}
       >
         Delete Account
diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js
--- a/web/settings/password-change-modal.js
+++ b/web/settings/password-change-modal.js
@@ -113,7 +113,7 @@
             <div className={css['form-footer']}>
               <Button
                 type="submit"
-                variant="primary"
+                variant="filled"
                 onClick={this.onSubmit}
                 disabled={inputDisabled}
               >
diff --git a/web/settings/relationship/add-users-list-modal.react.js b/web/settings/relationship/add-users-list-modal.react.js
--- a/web/settings/relationship/add-users-list-modal.react.js
+++ b/web/settings/relationship/add-users-list-modal.react.js
@@ -7,7 +7,7 @@
   RelationshipAction,
 } from 'lib/types/relationship-types.js';
 
-import type { ButtonVariant } from '../../components/button.react.js';
+import type { ButtonColor } from '../../components/button.react.js';
 import SearchModal from '../../modals/search-modal.react';
 import AddUsersList from './add-users-list.react.js';
 
@@ -16,7 +16,7 @@
   +name: string,
   +excludedStatuses: $ReadOnlySet<UserRelationshipStatus>,
   +confirmButtonContent: React.Node,
-  +confirmButtonVariant?: ButtonVariant,
+  +confirmButtonColor?: ButtonColor,
   +relationshipAction: RelationshipAction,
 };
 
@@ -26,7 +26,7 @@
     name,
     excludedStatuses,
     confirmButtonContent,
-    confirmButtonVariant = 'primary',
+    confirmButtonColor,
     relationshipAction,
   } = props;
 
@@ -36,7 +36,7 @@
         searchText={searchText}
         excludedStatuses={excludedStatuses}
         confirmButtonContent={confirmButtonContent}
-        confirmButtonVariant={confirmButtonVariant}
+        confirmButtonColor={confirmButtonColor}
         relationshipAction={relationshipAction}
         closeModal={closeModal}
       />
@@ -44,7 +44,7 @@
     [
       excludedStatuses,
       confirmButtonContent,
-      confirmButtonVariant,
+      confirmButtonColor,
       relationshipAction,
       closeModal,
     ],
diff --git a/web/settings/relationship/add-users-list.react.js b/web/settings/relationship/add-users-list.react.js
--- a/web/settings/relationship/add-users-list.react.js
+++ b/web/settings/relationship/add-users-list.react.js
@@ -20,7 +20,7 @@
 } from 'lib/utils/action-utils.js';
 
 import Button from '../../components/button.react.js';
-import type { ButtonVariant } from '../../components/button.react.js';
+import type { ButtonColor } from '../../components/button.react.js';
 import Label from '../../components/label.react.js';
 import LoadingIndicator from '../../loading-indicator.react.js';
 import { useSelector } from '../../redux/redux-utils.js';
@@ -36,7 +36,7 @@
   +excludedStatuses?: $ReadOnlySet<UserRelationshipStatus>,
   +closeModal: () => void,
   +confirmButtonContent: React.Node,
-  +confirmButtonVariant: ButtonVariant,
+  +confirmButtonColor?: ButtonColor,
   +relationshipAction: RelationshipAction,
 };
 
@@ -46,7 +46,7 @@
     excludedStatuses = new Set(),
     closeModal,
     confirmButtonContent,
-    confirmButtonVariant,
+    confirmButtonColor,
     relationshipAction,
   } = props;
 
@@ -232,13 +232,14 @@
       <div className={css.userRowsContainer}>{userRows}</div>
       {errors}
       <div className={css.buttons}>
-        <Button variant="secondary" onClick={closeModal}>
+        <Button variant="outline" onClick={closeModal}>
           Cancel
         </Button>
         <Button
           onClick={confirmSelection}
           disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
-          variant={confirmButtonVariant}
+          variant="filled"
+          buttonColor={confirmButtonColor}
         >
           <div className={css.confirmButtonContainer}>{buttonContent}</div>
         </Button>
diff --git a/web/settings/relationship/block-users-modal.react.js b/web/settings/relationship/block-users-modal.react.js
--- a/web/settings/relationship/block-users-modal.react.js
+++ b/web/settings/relationship/block-users-modal.react.js
@@ -9,6 +9,7 @@
   userRelationshipStatus,
 } from 'lib/types/relationship-types.js';
 
+import { buttonThemes } from '../../components/button.react';
 import AddUsersListModal from './add-users-list-modal.react.js';
 
 const excludedStatuses = new Set([
@@ -36,7 +37,7 @@
       name="Block Users"
       excludedStatuses={excludedStatuses}
       confirmButtonContent={buttonContent}
-      confirmButtonVariant="danger"
+      confirmButtonColor={buttonThemes.danger}
       relationshipAction={relationshipActions.BLOCK}
     />
   );
diff --git a/web/settings/relationship/user-list-row.css b/web/settings/relationship/user-list-row.css
--- a/web/settings/relationship/user-list-row.css
+++ b/web/settings/relationship/user-list-row.css
@@ -23,7 +23,7 @@
 .button {
   font-size: var(--s-font-14);
   line-height: var(--line-height-text);
-  color: var(--btn-bg-primary);
+  color: var(--btn-bg-filled);
   cursor: pointer;
   background: none;
   border: none;
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -60,12 +60,12 @@
   --success: var(--success-dark-50);
 
   /* Color Theme */
-  --btn-bg-primary: var(--violet-dark-100);
-  --btn-bg-primary-hover: var(--violet-dark-80);
-  --btn-bg-primary-disabled: var(--shades-black-80);
-  --btn-bg-secondary: var(--shades-black-90);
-  --btn-bg-secondary-hover: var(--shades-black-80);
-  --btn-bg-secondary-disabled: var(--shades-black-90);
+  --btn-bg-filled: var(--violet-dark-100);
+  --btn-bg-filled-hover: var(--violet-dark-80);
+  --btn-bg-filled-disabled: var(--shades-black-80);
+  --btn-bg-outline: var(--shades-black-90);
+  --btn-bg-outline-hover: var(--shades-black-80);
+  --btn-bg-outline-disabled: var(--shades-black-90);
   --btn-bg-success: var(--success-dark-50);
   --btn-bg-success-hover: var(--success-dark-90);
   --btn-bg-success-disabled: var(--shades-black-80);
@@ -96,7 +96,7 @@
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
-  --btn-secondary-border: var(--shades-black-60);
+  --btn-outline-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-from-color-read: var(--shades-black-80);
   --thread-last-message-color-read: var(--shades-black-60);