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
@@ -14,6 +14,7 @@
   +type?: string,
   +disabled?: boolean,
   +className?: string,
+  +color?: string,
 };
 
 function Button(props: Props): React.Node {
@@ -24,15 +25,32 @@
     type,
     disabled = false,
     className = '',
+    color,
   } = props;
   const btnCls = classnames(css.btn, css[variant]);
 
+  const buttonStyle = React.useMemo(() => {
+    switch (variant) {
+      case 'primary':
+        return {
+          backgroundColor: `var(${color ?? '--btn-bg-primary'})`,
+        };
+      case 'secondary':
+        return {
+          borderColor: `var(${color ?? '--btn-secondary-border'})`,
+        };
+      default:
+        return {};
+    }
+  }, [color, variant]);
+
   return (
     <button
       type={type}
       className={`${btnCls} ${className}`}
       onClick={onClick}
       disabled={disabled}
+      style={buttonStyle}
     >
       {children}
     </button>