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 = 'primary' | 'secondary' | 'round';
+export type ButtonColor =
   | 'success'
   | 'danger'
-  | 'round';
+  | {
+      +backgroundColor: string,
+      +color?: string,
+    };
 
 export type ButtonProps = {
   +onClick: (event: SyntheticEvent<HTMLButtonElement>) => mixed,
   +children: React.Node,
   +variant?: ButtonVariant,
+  +color?: ButtonColor,
   +type?: string,
   +disabled?: boolean,
   +className?: string,
@@ -26,11 +29,17 @@
     onClick,
     children,
     variant = 'primary',
+    color,
     type,
     disabled = false,
     className = '',
   } = props;
-  const btnCls = classnames(css.btn, css[variant]);
+
+  const btnCls = classnames(
+    css.btn,
+    css[variant],
+    typeof color === 'string' ? css[color] : null,
+  );
 
   return (
     <button
@@ -38,6 +47,7 @@
       className={`${btnCls} ${className}`}
       onClick={onClick}
       disabled={disabled}
+      style={typeof color !== 'string' ? color : null}
     >
       {children}
     </button>
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
@@ -37,7 +37,12 @@
           <Button onClick={onClose} type="submit" variant="secondary">
             Cancel
           </Button>
-          <Button onClick={handleConfirm} type="submit" variant="danger">
+          <Button
+            onClick={handleConfirm}
+            type="submit"
+            variant="primary"
+            color="danger"
+          >
             Promote to channel
           </Button>
         </div>
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
@@ -35,7 +35,12 @@
           <Button variant="secondary" onClick={onClose}>
             Cancel
           </Button>
-          <Button variant="danger" onClick={onConfirm} type="submit">
+          <Button
+            variant="primary"
+            color="danger"
+            onClick={onConfirm}
+            type="submit"
+          >
             Yes, leave chat
           </Button>
         </div>
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="primary"
+        color="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="primary"
+      color={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="primary"
+                color="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="primary"
+        color="danger"
         className={css.button}
       >
         Delete Account
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;
 
@@ -238,7 +238,8 @@
         <Button
           onClick={confirmSelection}
           disabled={pendingUserIDs.size === 0 || loadingStatus === 'loading'}
-          variant={confirmButtonVariant}
+          variant="primary"
+          color={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}
     />
   );