diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -20,31 +20,31 @@
   color: var(--btn-disabled-color);
 }
 
-.primary {
-  background: var(--btn-bg-primary);
+.filled {
+  background: var(--btn-bg-filled);
   color: var(--fg);
 }
 
-.primary:hover {
-  background: var(--btn-bg-primary-hover);
+.filled:hover {
+  background: var(--btn-bg-filled-hover);
 }
 
-.primary:disabled {
-  background: var(--btn-bg-primary-disabled);
+.filled:disabled {
+  background: var(--btn-bg-filled-disabled);
 }
 
-.secondary {
-  background: var(--btn-bg-secondary);
+.outline {
+  background: var(--btn-bg-outline);
   color: var(--fg);
-  border-color: var(--btn-secondary-border);
+  border-color: var(--btn-outline-border);
 }
 
-.secondary:hover {
-  background: var(--btn-bg-secondary-hover);
+.outline:hover {
+  background: var(--btn-bg-outline-hover);
 }
 
-.secondary:disabled {
-  background: var(--btn-bg-secondary-disabled);
+.outline:disabled {
+  background: var(--btn-bg-outline-disabled);
 }
 
 .success {
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
@@ -5,17 +5,20 @@
 
 import css from './button.css';
 
-export type ButtonVariant =
-  | 'primary'
-  | 'secondary'
+export type ButtonVariant = 'filled' | 'outline' | 'round';
+export type ButtonColor =
   | 'success'
   | 'danger'
-  | 'round';
+  | {
+      +backgroundColor: string,
+      +color?: string,
+    };
 
 export type ButtonProps = {
   +onClick: (event: SyntheticEvent<HTMLButtonElement>) => mixed,
   +children: React.Node,
   +variant?: ButtonVariant,
+  +buttonColor?: ButtonColor,
   +type?: string,
   +disabled?: boolean,
   +className?: string,
@@ -25,12 +28,18 @@
   const {
     onClick,
     children,
-    variant = 'primary',
+    variant = 'filled',
+    buttonColor,
     type,
     disabled = false,
     className = '',
   } = props;
-  const btnCls = classnames(css.btn, css[variant]);
+
+  const btnCls = classnames(
+    css.btn,
+    css[variant],
+    typeof buttonColor === 'string' ? css[buttonColor] : null,
+  );
 
   return (
     <button
@@ -38,6 +47,7 @@
       className={`${btnCls} ${className}`}
       onClick={onClick}
       disabled={disabled}
+      style={typeof buttonColor !== 'string' ? buttonColor : null}
     >
       {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
@@ -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="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
@@ -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="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
@@ -118,7 +118,8 @@
       <SubmitSection
         errorMessage={errorMessage}
         onClick={onDelete}
-        variant="danger"
+        variant="filled"
+        buttonColor="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
@@ -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 = 'success';
   } else if (relationshipButton === relationshipButtons.UNFRIEND) {
-    variant = 'danger';
+    color = 'danger';
   } else if (relationshipButton === relationshipButtons.BLOCK) {
-    variant = 'danger';
+    color = 'danger';
   } else if (relationshipButton === relationshipButtons.UNBLOCK) {
-    variant = 'success';
+    color = 'success';
   } else if (relationshipButton === relationshipButtons.ACCEPT) {
-    variant = 'success';
+    color = 'success';
   } else if (relationshipButton === relationshipButtons.REJECT) {
-    variant = 'danger';
+    color = 'danger';
   } else if (relationshipButton === relationshipButtons.WITHDRAW) {
-    variant = 'danger';
+    color = '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
@@ -89,7 +89,8 @@
             />
             <div className={css.form_footer}>
               <Button
-                variant="danger"
+                variant="filled"
+                buttonColor="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
@@ -20,7 +20,8 @@
       <h5 className={css.subheading}>Delete Account</h5>
       <Button
         onClick={onDeleteAccountClick}
-        variant="danger"
+        variant="filled"
+        buttonColor="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
@@ -36,7 +36,7 @@
       name="Block Users"
       excludedStatuses={excludedStatuses}
       confirmButtonContent={buttonContent}
-      confirmButtonVariant="danger"
+      confirmButtonColor="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);