diff --git a/web/components/button.css b/web/components/button.css
--- a/web/components/button.css
+++ b/web/components/button.css
@@ -47,6 +47,19 @@
   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);
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,7 +5,12 @@
 
 import css from './button.css';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'round';
+export type ButtonVariant =
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'danger'
+  | 'round';
 
 type Props = {
   +onClick: (event: SyntheticEvent<HTMLButtonElement>) => mixed,
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -66,6 +66,9 @@
   --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-success: var(--success-primary);
+  --btn-bg-success-hover: var(--success-dark-50);
+  --btn-bg-success-disabled: var(--shades-black-80);
   --btn-bg-danger: var(--error-primary);
   --btn-bg-danger-hover: var(--error-dark-50);
   --btn-bg-danger-disabled: var(--shades-black-80);
@@ -97,7 +100,7 @@
   --thread-color-read: var(--shades-black-60);
   --thread-from-color-read: var(--shades-black-80);
   --thread-last-message-color-read: var(--shades-black-60);
-  --relationship-button-green: var(--success-dark-50);
+  --relationship-button-green: var(--success-primary);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);