diff --git a/src/components/AuthFailedApp.js b/src/components/AuthFailedApp.js
index 9abecc8a6c..7649d676dc 100644
--- a/src/components/AuthFailedApp.js
+++ b/src/components/AuthFailedApp.js
@@ -7,8 +7,7 @@ import LText from "./LText";
 import type { T } from "../types/common";
 import colors from "../colors";
 import BottomModal from "./BottomModal";
-import GreyButton from "./GreyButton";
-import BlueButton from "./BlueButton";
+import Button from "./Button";
 import LedgerLiveLogo from "./LedgerLiveLogo";
 import LiveLogo from "../icons/LiveLogo";
 import HardResetModal from "./HardResetModal";
@@ -50,21 +49,17 @@ class AuthFailedApp extends Component<Props, State> {
             {t("auth.failed.title")}
           </LText>
         </View>
-        <BlueButton
+        <Button
+          type="primary"
           title={t("auth.failed.buttons.tryAgain")}
           onPress={this.onSoftReset}
-          containerStyle={{ height: 48, marginBottom: 10 }}
-          titleStyle={styles.buttonTitle}
+          containerStyle={{ marginBottom: 10 }}
         />
-        <GreyButton
+        <Button
+          type="secondary"
           title={t("auth.failed.buttons.reset")}
           onPress={this.onPress}
-          containerStyle={{
-            marginTop: 10,
-            height: 48,
-            backgroundColor: colors.lightGrey,
-          }}
-          titleStyle={styles.buttonTitle}
+          containerStyle={{ marginTop: 10 }}
         />
         <BottomModal isOpened={isModalOpened} onClose={this.onRequestClose}>
           <HardResetModal
@@ -84,9 +79,6 @@ const styles = StyleSheet.create({
     justifyContent: "center",
     backgroundColor: colors.lightGrey,
   },
-  buttonTitle: {
-    fontSize: 16,
-  },
   descriptionContainer: {
     marginHorizontal: 16,
     marginVertical: 24,
diff --git a/src/components/BlueButton.js b/src/components/BlueButton.js
deleted file mode 100644
index 18254eebe2..0000000000
--- a/src/components/BlueButton.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/* @flow */
-import React, { Component } from "react";
-import colors from "../colors";
-import GenericButton from "./GenericButton";
-
-export default class BlueButton extends Component<*> {
-  render() {
-    return (
-      <GenericButton
-        {...this.props}
-        titleStyle={[{ color: "white" }, this.props.titleStyle]}
-        containerStyle={[
-          { backgroundColor: colors.live },
-          this.props.containerStyle,
-        ]}
-        spinnerColor="white"
-      />
-    );
-  }
-}
diff --git a/src/components/BottomModal.js b/src/components/BottomModal.js
index 4e28707370..b4654cf09d 100644
--- a/src/components/BottomModal.js
+++ b/src/components/BottomModal.js
@@ -6,6 +6,7 @@ import ReactNativeModal from "react-native-modal";
 
 import StyledStatusBar from "./StyledStatusBar";
 import colors from "../colors";
+import ButtonUseTouchable from "../context/ButtonUseTouchable";
 
 export type Props = {
   isOpened: boolean,
@@ -18,25 +19,27 @@ class BottomModal extends Component<Props> {
   render() {
     const { isOpened, onClose, children, style } = this.props;
     return (
-      <ReactNativeModal
-        isVisible={isOpened}
-        onBackdropPress={onClose}
-        useNativeDriver
-        style={{
-          justifyContent: "flex-end",
-          margin: 0,
-        }}
-      >
-        <View style={[styles.modal, style]}>
-          <StyledStatusBar
-            backgroundColor={
-              Platform.OS === "android" ? "rgba(0,0,0,0.7)" : "transparent"
-            }
-            barStyle="light-content"
-          />
-          {children}
-        </View>
-      </ReactNativeModal>
+      <ButtonUseTouchable.Provider value={true}>
+        <ReactNativeModal
+          isVisible={isOpened}
+          onBackdropPress={onClose}
+          useNativeDriver
+          style={{
+            justifyContent: "flex-end",
+            margin: 0,
+          }}
+        >
+          <View style={[styles.modal, style]}>
+            <StyledStatusBar
+              backgroundColor={
+                Platform.OS === "android" ? "rgba(0,0,0,0.7)" : "transparent"
+              }
+              barStyle="light-content"
+            />
+            {children}
+          </View>
+        </ReactNativeModal>
+      </ButtonUseTouchable.Provider>
     );
   }
 }
diff --git a/src/components/GenerateMockAccountsButton.js b/src/components/GenerateMockAccountsButton.js
index 8a7cec18d3..cb712f5147 100644
--- a/src/components/GenerateMockAccountsButton.js
+++ b/src/components/GenerateMockAccountsButton.js
@@ -2,7 +2,7 @@
 import React from "react";
 import sample from "lodash/sample";
 import { genAccount } from "@ledgerhq/live-common/lib/mock/account";
-import GreyButton from "./GreyButton";
+import Button from "./Button";
 import { accountModel } from "../reducers/accounts";
 import db from "../db";
 import { withReboot } from "../context/Reboot";
@@ -23,7 +23,6 @@ async function injectMockAccountsInDB(count) {
 }
 
 const GenerateMockAccountsButton = ({
-  title,
   reboot,
   count,
   ...rest
@@ -32,9 +31,9 @@ const GenerateMockAccountsButton = ({
   count: number,
   reboot: *,
 }) => (
-  <GreyButton
+  <Button
     {...rest}
-    title={title}
+    type="secondary"
     onPress={async () => {
       await injectMockAccountsInDB(count);
       reboot();
diff --git a/src/components/GenericButton.js b/src/components/GenericButton.js
deleted file mode 100644
index acc97a64e2..0000000000
--- a/src/components/GenericButton.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/* @flow */
-
-import React, { Component } from "react";
-import {
-  TouchableOpacity,
-  StyleSheet,
-  ActivityIndicator,
-  View,
-} from "react-native";
-import LText from "./LText";
-
-const WAIT_TIME_BEFORE_SPINNER = 300;
-
-export default class GenericButton extends Component<
-  {
-    // when on press returns a promise,
-    // the button will toggle in a pending state and
-    // will wait the promise to complete before enabling the button again
-    // it also displays a spinner if it takes more than WAIT_TIME_BEFORE_SPINNER
-    onPress: () => ?Promise<any>,
-    // if not provided, spinner will be disabled
-    spinnerColor?: string,
-    // text of the button
-    title: string,
-    containerStyle: ?*,
-    titleStyle: ?*,
-    iconLeft?: *,
-  },
-  {
-    pending: boolean,
-    spinnerOn: boolean,
-  },
-> {
-  state = {
-    pending: false,
-    spinnerOn: false,
-  };
-
-  timeout: *;
-
-  unmounted = false;
-
-  componentWillUnmount() {
-    clearTimeout(this.timeout);
-    this.unmounted = true;
-  }
-
-  onPress = async () => {
-    try {
-      const res = this.props.onPress();
-      if (res && res.then) {
-        // it's a promise, we will use pending/spinnerOn state
-        this.setState({ pending: true });
-        this.timeout = setTimeout(() => {
-          this.setState(({ pending, spinnerOn }) => {
-            if (spinnerOn || !pending) return null;
-            return { spinnerOn: true };
-          });
-        }, WAIT_TIME_BEFORE_SPINNER);
-        await res;
-      }
-    } finally {
-      clearTimeout(this.timeout);
-      if (!this.unmounted) {
-        this.setState(
-          ({ pending }) =>
-            pending ? { pending: false, spinnerOn: false } : null,
-        );
-      }
-    }
-  };
-
-  render() {
-    const {
-      onPress,
-      title,
-      containerStyle,
-      titleStyle,
-      spinnerColor,
-      iconLeft,
-      ...otherProps
-    } = this.props;
-    const { pending, spinnerOn } = this.state;
-    const disabled = !onPress || pending;
-    return (
-      <TouchableOpacity
-        onPress={this.onPress}
-        disabled={disabled}
-        style={[
-          styles.container,
-          disabled ? styles.containerDisabled : null,
-          containerStyle,
-        ]}
-        {...otherProps}
-      >
-        {iconLeft && <View style={{ marginRight: 10 }}>{iconLeft}</View>}
-        <LText style={[styles.title, titleStyle]}>{title}</LText>
-        {spinnerOn && spinnerColor ? (
-          <ActivityIndicator
-            color={spinnerColor}
-            style={styles.activityIndicator}
-          />
-        ) : null}
-      </TouchableOpacity>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    height: 40,
-    alignItems: "center",
-    flexDirection: "row",
-    justifyContent: "center",
-    paddingHorizontal: 10,
-    borderRadius: 4,
-  },
-  containerDisabled: {
-    opacity: 0.5,
-  },
-  activityIndicator: {
-    position: "absolute",
-  },
-  title: {},
-});
diff --git a/src/components/GreyButton.js b/src/components/GreyButton.js
deleted file mode 100644
index dad95d78cb..0000000000
--- a/src/components/GreyButton.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* @flow */
-import React, { Component } from "react";
-import { StyleSheet } from "react-native";
-import GenericButton from "./GenericButton";
-
-export default class GreyButton extends Component<*> {
-  render() {
-    return (
-      <GenericButton
-        {...this.props}
-        titleStyle={[styles.title, this.props.titleStyle]}
-        containerStyle={[styles.container, this.props.containerStyle]}
-      />
-    );
-  }
-}
-const styles = StyleSheet.create({
-  title: {
-    color: "#aaa",
-  },
-  container: {
-    backgroundColor: "#fff",
-    borderWidth: 1,
-    borderColor: "#aaa",
-  },
-});
diff --git a/src/components/HardResetModal.js b/src/components/HardResetModal.js
index bbdff7d258..2476bb8f0b 100644
--- a/src/components/HardResetModal.js
+++ b/src/components/HardResetModal.js
@@ -7,8 +7,7 @@ import type { T } from "../types/common";
 import colors from "../colors";
 import ModalBottomAction from "./ModalBottomAction";
 import Trash from "../icons/Trash";
-import RedButton from "./RedButton";
-import GreyButton from "./GreyButton";
+import Button from "./Button";
 import Circle from "./Circle";
 
 type Props = {
@@ -30,17 +29,17 @@ class HardResetModal extends PureComponent<Props> {
         description={t("reset.description")}
         footer={
           <View style={styles.footerContainer}>
-            <GreyButton
+            <Button
+              type="secondary"
               title={t("common.cancel")}
               onPress={onRequestClose}
               containerStyle={styles.buttonContainer}
-              titleStyle={styles.buttonTitle}
             />
-            <RedButton
+            <Button
+              type="alert"
               title={t("reset.button")}
               onPress={onHardReset}
-              containerStyle={[styles.buttonContainer, styles.resetButtonBg]}
-              titleStyle={[styles.buttonTitle, styles.resetButtonTitle]}
+              containerStyle={styles.buttonContainer}
             />
           </View>
         }
@@ -57,16 +56,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-around",
   },
   buttonContainer: {
-    height: 48,
     width: 136,
   },
-  resetButtonBg: {
-    backgroundColor: colors.alert,
-  },
-  buttonTitle: {
-    fontSize: 16,
-  },
-  resetButtonTitle: {
-    color: colors.white,
-  },
 });
diff --git a/src/components/ImportAccountsButton.js b/src/components/ImportAccountsButton.js
index 302a90e4a4..47e1c6b52b 100644
--- a/src/components/ImportAccountsButton.js
+++ b/src/components/ImportAccountsButton.js
@@ -1,7 +1,7 @@
 // @flow
 import React from "react";
 import { withNavigation } from "react-navigation";
-import BlueButton from "./BlueButton";
+import Button from "./Button";
 
 const ImportAccountsButton = ({
   title,
@@ -10,7 +10,8 @@ const ImportAccountsButton = ({
   title: string,
   navigation: *,
 }) => (
-  <BlueButton
+  <Button
+    type="primary"
     title={title}
     onPress={() => navigation.navigate("ImportAccounts")}
   />
diff --git a/src/components/ImportBridgeStreamData.js b/src/components/ImportBridgeStreamData.js
index f9e030d89b..068c300dda 100644
--- a/src/components/ImportBridgeStreamData.js
+++ b/src/components/ImportBridgeStreamData.js
@@ -3,7 +3,7 @@ import React from "react";
 // $FlowFixMe
 import { Buffer } from "buffer";
 import { withNavigation } from "react-navigation";
-import GreyButton from "./GreyButton";
+import Button from "./Button";
 
 const ImportBridgeStreamData = ({
   title,
@@ -17,8 +17,9 @@ const ImportBridgeStreamData = ({
   reboot: *,
   dataStr: *,
 }) => (
-  <GreyButton
+  <Button
     {...rest}
+    type="secondary"
     title={title}
     onPress={() => {
       const data = JSON.parse(Buffer.from(dataStr, "base64").toString("utf8"));
diff --git a/src/components/OutlineButton.js b/src/components/OutlineButton.js
deleted file mode 100644
index 6e2ba073ae..0000000000
--- a/src/components/OutlineButton.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/* @flow */
-import React, { Component } from "react";
-import { StyleSheet } from "react-native";
-
-import colors from "../colors";
-import GenericButton from "./Touchable";
-
-type Props = {
-  children: React$Node,
-  onPress: () => *,
-  containerStyle?: *,
-  outlineColor?: string,
-};
-
-export default class OutlineButton extends Component<Props> {
-  render() {
-    const { children, outlineColor } = this.props;
-    const outline = outlineColor
-      ? {
-          borderColor: outlineColor,
-        }
-      : {};
-    return (
-      <GenericButton
-        {...this.props}
-        style={[styles.containerStyle, this.props.containerStyle, outline]}
-      >
-        {children}
-      </GenericButton>
-    );
-  }
-}
-
-const styles = StyleSheet.create({
-  containerStyle: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "center",
-    backgroundColor: "transparent",
-    borderRadius: 4,
-    borderWidth: 2,
-    borderColor: colors.live,
-    paddingVertical: 16,
-  },
-});
diff --git a/src/components/ReceiveFundsButton.js b/src/components/ReceiveFundsButton.js
deleted file mode 100644
index fc0a591290..0000000000
--- a/src/components/ReceiveFundsButton.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/* @flow */
-import React, { Component } from "react";
-import { StyleSheet } from "react-native";
-import GenericButton from "./GenericButton";
-
-export default class ReceiveFundsButton extends Component<*> {
-  render() {
-    return <GenericButton {...this.props} containerStyle={styles.container} />;
-  }
-}
-
-const styles = StyleSheet.create({
-  container: {
-    width: 80,
-    height: 40,
-    margin: 10,
-    backgroundColor: "white",
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});
diff --git a/src/components/RedButton.js b/src/components/RedButton.js
deleted file mode 100644
index 82c311d152..0000000000
--- a/src/components/RedButton.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/* @flow */
-import React, { Component } from "react";
-import { StyleSheet } from "react-native";
-import GenericButton from "./GenericButton";
-
-export default class RedButton extends Component<*> {
-  render() {
-    return (
-      <GenericButton
-        {...this.props}
-        titleStyle={[styles.title, this.props.titleStyle]}
-        containerStyle={[styles.container, this.props.containerStyle]}
-      />
-    );
-  }
-}
-const styles = StyleSheet.create({
-  title: {
-    color: "#f00",
-  },
-  container: {
-    backgroundColor: "#fff",
-    borderWidth: 1,
-    borderColor: "#f00",
-  },
-});
diff --git a/src/components/WhiteButton.js b/src/components/WhiteButton.js
deleted file mode 100644
index 6a7c5f510b..0000000000
--- a/src/components/WhiteButton.js
+++ /dev/null
@@ -1,19 +0,0 @@
-/* @flow */
-import React, { Component } from "react";
-import colors from "../colors";
-import GenericButton from "./GenericButton";
-
-export default class WhiteButton extends Component<*> {
-  render() {
-    return (
-      <GenericButton
-        {...this.props}
-        textStyle={[{ color: colors.live }, this.props.textStyle]}
-        containerStyle={[
-          { backgroundColor: "white" },
-          this.props.containerStyle,
-        ]}
-      />
-    );
-  }
-}
diff --git a/src/index.js b/src/index.js
index f105745248..072b6550bb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -9,6 +9,7 @@ import { exportSelector as accountsExportSelector } from "./reducers/accounts";
 import CounterValues from "./countervalues";
 import LocaleProvider from "./context/Locale";
 import RebootProvider from "./context/Reboot";
+import ButtonUseTouchable from "./context/ButtonUseTouchable";
 import AuthPass from "./context/AuthPass";
 import LedgerStoreProvider from "./context/LedgerStore";
 import { RootNavigator } from "./navigators";
@@ -101,7 +102,9 @@ export default class Root extends Component<{}, {}> {
                     <LocaleProvider>
                       <BridgeSyncProvider>
                         <CounterValues.PollingProvider>
-                          <App />
+                          <ButtonUseTouchable.Provider value={false}>
+                            <App />
+                          </ButtonUseTouchable.Provider>
                         </CounterValues.PollingProvider>
                       </BridgeSyncProvider>
                     </LocaleProvider>
diff --git a/src/screens/Account/EmptyStateAccount.js b/src/screens/Account/EmptyStateAccount.js
index 296684d2f8..f9a9bbe4d4 100644
--- a/src/screens/Account/EmptyStateAccount.js
+++ b/src/screens/Account/EmptyStateAccount.js
@@ -8,7 +8,7 @@ import type { Account } from "@ledgerhq/live-common/lib/types";
 import colors from "../../colors";
 import type { T } from "../../types/common";
 import LText from "../../components/LText";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 import Receive from "../../icons/Receive";
 
 class EmptyStateAccount extends PureComponent<{
@@ -40,12 +40,12 @@ class EmptyStateAccount extends PureComponent<{
             </Trans>
           </LText>
           {config.READ_ONLY === "0" && (
-            <BlueButton
+            <Button
+              type="primary"
               title={t("common:account.emptyState.buttons.receiveFunds")}
               onPress={this.goToReceiveFunds}
-              containerStyle={styles.recieveButton}
-              titleStyle={[styles.buttonTitle]}
-              iconLeft={<Receive size={16} color={colors.white} />}
+              containerStyle={styles.receiveButton}
+              iconLeft={Receive}
             />
           )}
         </View>
@@ -67,11 +67,7 @@ const styles = StyleSheet.create({
   body: {
     alignItems: "center",
   },
-  buttonTitle: {
-    fontSize: 16,
-  },
-  recieveButton: {
-    height: 48,
+  receiveButton: {
     width: 290,
   },
   title: {
diff --git a/src/screens/AccountSettings/DeleteAccountModal.js b/src/screens/AccountSettings/DeleteAccountModal.js
index f835ccbb70..5fc09f46e2 100644
--- a/src/screens/AccountSettings/DeleteAccountModal.js
+++ b/src/screens/AccountSettings/DeleteAccountModal.js
@@ -9,8 +9,7 @@ import Trash from "../../icons/Trash";
 import type { T } from "../../types/common";
 import colors from "../../colors";
 import ModalBottomAction from "../../components/ModalBottomAction";
-import RedButton from "../../components/RedButton";
-import GreyButton from "../../components/GreyButton";
+import Button from "../../components/Button";
 
 type Props = {
   t: T,
@@ -39,17 +38,17 @@ class DeleteAccountModal extends PureComponent<Props> {
         }
         footer={
           <View style={styles.footerContainer}>
-            <GreyButton
+            <Button
+              type="secondary"
               title={t("common:common.cancel")}
               onPress={onRequestClose}
               containerStyle={styles.buttonContainer}
-              titleStyle={styles.buttonTitle}
             />
-            <RedButton
+            <Button
+              type="alert"
               title={t("common:common.delete")}
               onPress={deleteAccount}
-              containerStyle={[styles.buttonContainer, styles.deleteButtonBg]}
-              titleStyle={[styles.buttonTitle, styles.deleteButtonTitle]}
+              containerStyle={styles.buttonContainer}
             />
           </View>
         }
@@ -66,16 +65,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-around",
   },
   buttonContainer: {
-    height: 48,
     width: 136,
   },
-  deleteButtonBg: {
-    backgroundColor: colors.alert,
-  },
-  buttonTitle: {
-    fontSize: 16,
-  },
-  deleteButtonTitle: {
-    color: colors.white,
-  },
 });
diff --git a/src/screens/AccountSettings/EditAccountName.js b/src/screens/AccountSettings/EditAccountName.js
index 18e531d0c5..91ab2fa437 100644
--- a/src/screens/AccountSettings/EditAccountName.js
+++ b/src/screens/AccountSettings/EditAccountName.js
@@ -19,7 +19,7 @@ import { accountScreenSelector } from "../../reducers/accounts";
 import { updateAccount } from "../../actions/accounts";
 import type { T } from "../../types/common";
 import colors from "../../colors";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 
 type Props = {
   navigation: NavigationScreenProp<{
@@ -86,11 +86,11 @@ class EditAccountName extends PureComponent<Props, State> {
               onSubmitEditing={this.onNameEndEditing}
             />
             <View style={styles.flex}>
-              <BlueButton
+              <Button
+                type="primary"
                 title={t("common:common.apply")}
                 onPress={this.onNameEndEditing}
-                containerStyle={[styles.buttonContainer]}
-                titleStyle={[styles.buttonTitle]}
+                containerStyle={styles.buttonContainer}
               />
             </View>
           </ScrollView>
@@ -123,10 +123,6 @@ const styles = StyleSheet.create({
   },
   buttonContainer: {
     marginHorizontal: 16,
-    height: 48,
-  },
-  buttonTitle: {
-    fontSize: 16,
   },
   flex: {
     flex: 1,
diff --git a/src/screens/Accounts/AccountOrderModal.js b/src/screens/Accounts/AccountOrderModal.js
index e5ac482281..bb5b45fd9a 100644
--- a/src/screens/Accounts/AccountOrderModal.js
+++ b/src/screens/Accounts/AccountOrderModal.js
@@ -10,7 +10,7 @@ import type { T } from "../../types/common";
 import MenuTitle from "../../components/MenuTitle";
 import OrderOption from "./OrderOption";
 import BottomModal from "../../components/BottomModal";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 
 class AccountOrderModal extends Component<{
   navigation: *,
@@ -26,11 +26,7 @@ class AccountOrderModal extends Component<{
         <OrderOption id="balance" />
         <OrderOption id="name" />
         <View style={{ paddingHorizontal: 16, paddingVertical: 12 }}>
-          <BlueButton
-            onPress={onClose}
-            title="Done"
-            containerStyle={{ height: 48 }}
-          />
+          <Button type="primary" onPress={onClose} title="Done" />
         </View>
       </BottomModal>
     );
diff --git a/src/screens/ConnectDevice/index.js b/src/screens/ConnectDevice/index.js
index a3535ff098..3ed3324d47 100644
--- a/src/screens/ConnectDevice/index.js
+++ b/src/screens/ConnectDevice/index.js
@@ -14,7 +14,7 @@ import StepHeader from "../../components/StepHeader";
 import Stepper from "../../components/Stepper";
 import LText from "../../components/LText";
 import CurrencyIcon from "../../components/CurrencyIcon";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 
 import colors from "../../colors";
 
@@ -188,20 +188,13 @@ class ConnectDevice extends Component<Props, State> {
         </View>
         <View style={styles.bottomContainer}>
           <LText semiBold style={styles.noDeviceText}>
-            Don&#39;t have your device ?
+            {"Don't have your device ?"}
           </LText>
-          <BlueButton
+          <Button
+            type="primary"
             title="Continue"
             onPress={this.navigate}
             disabled={!enabled}
-            containerStyle={[
-              styles.continueButton,
-              !enabled ? styles.disabledContinueButton : null,
-            ]}
-            titleStyle={[
-              styles.continueButtonText,
-              !enabled ? styles.disabledContinueButtonText : null,
-            ]}
           />
         </View>
       </SafeAreaView>
@@ -257,20 +250,6 @@ const styles = StyleSheet.create({
   step: {
     marginBottom: 16,
   },
-  continueButton: {
-    paddingVertical: 16,
-    height: "auto",
-  },
-  continueButtonText: {
-    fontSize: 16,
-    fontFamily: "Museo Sans",
-  },
-  disabledContinueButton: {
-    backgroundColor: colors.lightFog,
-  },
-  disabledContinueButtonText: {
-    color: colors.grey,
-  },
 });
 
 const mapStateToProps = createStructuredSelector({
diff --git a/src/screens/EditFees/index.js b/src/screens/EditFees/index.js
index b8fceb0a0b..cd3f21ef8a 100644
--- a/src/screens/EditFees/index.js
+++ b/src/screens/EditFees/index.js
@@ -19,7 +19,7 @@ import colors from "../../colors";
 
 import { accountScreenSelector } from "../../reducers/accounts";
 
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 import HeaderRightClose from "../../components/HeaderRightClose";
 
 import FeesRow from "./FeesRow";
@@ -106,10 +106,10 @@ class FeeSettings extends Component<Props, State> {
                 onPress={this.onPressFees}
               />
               <View style={styles.buttonContainer}>
-                <BlueButton
+                <Button
+                  type="primary"
                   title="Validate Fees"
                   containerStyle={styles.continueButton}
-                  titleStyle={styles.continueButtonTitle}
                   onPress={this.onValidateFees}
                 />
               </View>
@@ -132,14 +132,8 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
   },
   continueButton: {
-    height: "auto",
-    paddingVertical: 16,
     alignSelf: "stretch",
   },
-  continueButtonTitle: {
-    fontSize: 16,
-    fontFamily: "Museo Sans",
-  },
   container: {
     flex: 1,
   },
diff --git a/src/screens/ImportAccounts/DisplayResult.js b/src/screens/ImportAccounts/DisplayResult.js
index de0af7a833..1bb9e53561 100644
--- a/src/screens/ImportAccounts/DisplayResult.js
+++ b/src/screens/ImportAccounts/DisplayResult.js
@@ -20,7 +20,7 @@ import { accountsSelector } from "../../reducers/accounts";
 
 import LText from "../../components/LText";
 import colors from "../../colors";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 import HeaderRightClose from "../../components/HeaderRightClose";
 import StyledStatusBar from "../../components/StyledStatusBar";
 import DisplayResultItem from "./DisplayResultItem";
@@ -243,11 +243,10 @@ class DisplayResult extends Component<Props, State> {
               }))}
             />
             {selectedAccounts.length ? (
-              <BlueButton
+              <Button
+                type="primary"
                 title={t("common.continue")}
                 onPress={this.onImport}
-                containerStyle={styles.button}
-                titleStyle={styles.buttonText}
               />
             ) : null}
           </ScrollView>
@@ -256,11 +255,10 @@ class DisplayResult extends Component<Props, State> {
             <LText bold style={styles.noAccountText}>
               {t("account.import.result.noAccounts")}
             </LText>
-            <BlueButton
+            <Button
+              type="primary"
               title={t("common.done")}
               onPress={this.close}
-              containerStyle={styles.button}
-              titleStyle={styles.buttonText}
             />
           </View>
         )}
@@ -297,13 +295,6 @@ const styles = StyleSheet.create({
     color: colors.grey,
     fontSize: 14,
   },
-  button: {
-    paddingVertical: 16,
-    height: "auto",
-  },
-  buttonText: {
-    fontSize: 16,
-  },
   noAccountText: {
     flex: 1,
     fontSize: 16,
diff --git a/src/screens/ImportAccounts/FallBackCameraScreen.android.js b/src/screens/ImportAccounts/FallBackCameraScreen.android.js
index a211583011..b13d040d41 100644
--- a/src/screens/ImportAccounts/FallBackCameraScreen.android.js
+++ b/src/screens/ImportAccounts/FallBackCameraScreen.android.js
@@ -9,7 +9,7 @@ import Icon from "react-native-vector-icons/dist/Feather";
 import colors from "../../colors";
 import type { T } from "../../types/common";
 import LText from "../../components/LText";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 import HeaderRightClose from "../../components/HeaderRightClose";
 import FallbackCamera from "../../icons/FallbackCamera";
 
@@ -87,12 +87,12 @@ class FallBackCameraScreen extends PureComponent<Props, State> {
               {"You’ll be taken to Android settings to activate it"}
             </Trans>
           </LText>
-          <BlueButton
+          <Button
+            type="primary"
             title={t("account.import.fallback.buttonAndroid")}
             onPress={this.openNativeSettings}
             containerStyle={styles.buttonContainer}
-            titleStyle={styles.buttonTitle}
-            iconLeft={<Icon name="settings" size={16} color={colors.white} />}
+            iconLeft={IconSettings}
           />
         </View>
       </View>
@@ -100,6 +100,10 @@ class FallBackCameraScreen extends PureComponent<Props, State> {
   }
 }
 
+const IconSettings = ({ size, color }: { size: number, color: string }) => (
+  <Icon name="settings" size={size} color={color} />
+);
+
 export default translate()(FallBackCameraScreen);
 
 const styles = StyleSheet.create({
@@ -126,10 +130,6 @@ const styles = StyleSheet.create({
     color: colors.black,
   },
   buttonContainer: {
-    height: 48,
     width: 290,
   },
-  buttonTitle: {
-    fontSize: 16,
-  },
 });
diff --git a/src/screens/ImportAccounts/FallBackCameraScreen.ios.js b/src/screens/ImportAccounts/FallBackCameraScreen.ios.js
index 3f8178cf14..726819b4cc 100644
--- a/src/screens/ImportAccounts/FallBackCameraScreen.ios.js
+++ b/src/screens/ImportAccounts/FallBackCameraScreen.ios.js
@@ -8,7 +8,7 @@ import Icon from "react-native-vector-icons/dist/Feather";
 import colors from "../../colors";
 import type { T } from "../../types/common";
 import LText from "../../components/LText";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 import HeaderRightClose from "../../components/HeaderRightClose";
 import FallbackCamera from "../../icons/FallbackCamera";
 
@@ -54,12 +54,12 @@ class FallBackCameraScreen extends PureComponent<{
               {"You’ll be taken to iOS settings to activate it"}
             </Trans>
           </LText>
-          <BlueButton
+          <Button
+            type="primary"
             title={t("account.import.fallback.buttonIOS")}
             onPress={this.openNativeSettings}
             containerStyle={styles.buttonContainer}
-            titleStyle={styles.buttonTitle}
-            iconLeft={<Icon name="settings" size={16} color={colors.white} />}
+            iconLeft={IconSettings}
           />
         </View>
       </View>
@@ -67,6 +67,10 @@ class FallBackCameraScreen extends PureComponent<{
   }
 }
 
+const IconSettings = ({ size, color }: { size: number, color: string }) => (
+  <Icon name="settings" size={size} color={color} />
+);
+
 export default translate()(FallBackCameraScreen);
 
 const styles = StyleSheet.create({
@@ -93,10 +97,6 @@ const styles = StyleSheet.create({
     color: colors.black,
   },
   buttonContainer: {
-    height: 48,
     width: 290,
   },
-  buttonTitle: {
-    fontSize: 16,
-  },
 });
diff --git a/src/screens/Portfolio/EmptyStatePortfolio.js b/src/screens/Portfolio/EmptyStatePortfolio.js
index 400d33e8e0..dd40c3bfda 100644
--- a/src/screens/Portfolio/EmptyStatePortfolio.js
+++ b/src/screens/Portfolio/EmptyStatePortfolio.js
@@ -6,7 +6,7 @@ import type { NavigationScreenProp } from "react-navigation";
 import colors from "../../colors";
 import type { T } from "../../types/common";
 import LText from "../../components/LText";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 
 class EmptyStatePortfolio extends PureComponent<{
   t: T,
@@ -27,11 +27,11 @@ class EmptyStatePortfolio extends PureComponent<{
             {t("portfolio.emptyState.title")}
           </LText>
           <LText style={styles.desc}>{t("portfolio.emptyState.desc")}</LText>
-          <BlueButton
+          <Button
+            type="primary"
             title={t("portfolio.emptyState.buttons.import")}
             onPress={this.goToImportAccounts}
-            containerStyle={styles.recieveButton}
-            titleStyle={[styles.buttonTitle]}
+            containerStyle={styles.receiveButton}
           />
         </View>
       </View>
@@ -51,11 +51,7 @@ const styles = StyleSheet.create({
   body: {
     alignItems: "center",
   },
-  buttonTitle: {
-    fontSize: 16,
-  },
-  recieveButton: {
-    height: 48,
+  receiveButton: {
     width: 290,
   },
   title: {
diff --git a/src/screens/ReceiveComfirmation/index.js b/src/screens/ReceiveComfirmation/index.js
index 8125d5811c..a510acff79 100644
--- a/src/screens/ReceiveComfirmation/index.js
+++ b/src/screens/ReceiveComfirmation/index.js
@@ -13,7 +13,7 @@ import colors from "../../colors";
 import Stepper from "../../components/Stepper";
 import StepHeader from "../../components/StepHeader";
 import HeaderRightClose from "../../components/HeaderRightClose";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 import LText from "../../components/LText/index";
 import DisplayAddress from "../../components/DisplayAddress";
 import VerifyAddressDisclaimer from "../../components/VerifyAddressDisclaimer";
@@ -86,10 +86,9 @@ class ReceiveConfirmation extends Component<Props, State> {
           </View>
         </View>
         <View style={styles.bottomContainer}>
-          <BlueButton
+          <Button
+            type="primary"
             title="Verify Address"
-            containerStyle={styles.continueButton}
-            titleStyle={styles.continueButtonText}
             onPress={() => console.warn("TODO: trigger verify on device")}
           />
         </View>
@@ -112,14 +111,6 @@ const styles = StyleSheet.create({
   bottomContainer: {
     padding: 16,
   },
-  continueButton: {
-    paddingVertical: 16,
-    height: "auto",
-  },
-  continueButtonText: {
-    fontSize: 16,
-    fontFamily: "Museo Sans",
-  },
   qrWrapper: {
     borderWidth: 1,
     borderColor: colors.lightFog,
diff --git a/src/screens/SelectFunds/index.js b/src/screens/SelectFunds/index.js
index 9f7061f22e..c73881f983 100644
--- a/src/screens/SelectFunds/index.js
+++ b/src/screens/SelectFunds/index.js
@@ -23,8 +23,7 @@ import colors from "../../colors";
 import LText from "../../components/LText/index";
 import CurrencyUnitValue from "../../components/CurrencyUnitValue";
 import CounterValue from "../../components/CounterValue";
-import OutlineButton from "../../components/OutlineButton";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 
 import AmountInput from "./AmountInput";
 import CounterValuesSeparator from "./CounterValuesSeparator";
@@ -127,18 +126,13 @@ class SelectFunds extends Component<Props, State> {
                 </LText>
               </View>
               <View style={styles.bottomWrapper}>
-                <OutlineButton
-                  outlineColor={colors.live}
-                  containerStyle={styles.useMaxButton}
+                <Button
+                  type="tertiary"
+                  title="USE MAX"
                   onPress={() => {
                     console.log("max"); // eslint-disable-line no-console
                   }}
-                  hitSlop={{ top: 10, bottom: 10, left: 0, right: 0 }}
-                >
-                  <LText bold style={styles.useMaxText}>
-                    USE MAX
-                  </LText>
-                </OutlineButton>
+                />
                 <LText style={styles.available}>
                   Available : &nbsp;
                   <CurrencyUnitValue
@@ -148,18 +142,11 @@ class SelectFunds extends Component<Props, State> {
                   />
                 </LText>
                 <View style={styles.continueWrapper}>
-                  <BlueButton
+                  <Button
+                    type="primary"
                     title="Continue"
                     onPress={this.navigate}
                     disabled={!isValid}
-                    containerStyle={[
-                      styles.continueButton,
-                      !isValid ? styles.disabledContinueButton : null,
-                    ]}
-                    titleStyle={[
-                      styles.continueButtonText,
-                      !isValid ? styles.disabledContinueButtonText : null,
-                    ]}
                   />
                 </View>
               </View>
@@ -186,11 +173,6 @@ const styles = StyleSheet.create({
     color: colors.grey,
     marginTop: 10,
   },
-  useMaxButton: {
-    paddingVertical: 6,
-    paddingHorizontal: 12,
-    borderWidth: 1,
-  },
   useMaxText: {
     fontSize: 10,
     color: colors.live,
@@ -217,20 +199,6 @@ const styles = StyleSheet.create({
     justifyContent: "flex-end",
     paddingBottom: 16,
   },
-  continueButton: {
-    paddingVertical: 16,
-    height: "auto",
-  },
-  continueButtonText: {
-    fontSize: 16,
-    fontFamily: "Museo Sans",
-  },
-  disabledContinueButton: {
-    backgroundColor: colors.lightFog,
-  },
-  disabledContinueButtonText: {
-    color: colors.grey,
-  },
 });
 
 const mapStateToProps = (state, props: Props): { account: Account } => ({
diff --git a/src/screens/SelectRecipient/index.js b/src/screens/SelectRecipient/index.js
index d44f909bf7..0df1e7f330 100644
--- a/src/screens/SelectRecipient/index.js
+++ b/src/screens/SelectRecipient/index.js
@@ -8,7 +8,6 @@ import {
   KeyboardAvoidingView,
   TouchableOpacity,
   Platform,
-  Text,
 } from "react-native";
 import type { NavigationScreenProp } from "react-navigation";
 import { createStructuredSelector } from "reselect";
@@ -20,8 +19,7 @@ import Icon from "react-native-vector-icons/dist/FontAwesome";
 import { accountScreenSelector } from "../../reducers/accounts";
 
 import LText from "../../components/LText";
-import OutlineButton from "../../components/OutlineButton";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 import Stepper from "../../components/Stepper";
 import StepHeader from "../../components/StepHeader";
 
@@ -92,18 +90,14 @@ class SelectRecipient extends Component<Props, State> {
           keyboardVerticalOffset={keyboardVerticalOffset}
         >
           <View style={styles.container}>
-            <OutlineButton
+            <Button
+              type="tertiary"
+              title="Scan QR code"
+              IconLeft={IconQRCode}
               onPress={() => {
                 console.log("scan qr code"); // eslint-disable-line no-console
               }}
-            >
-              <Text>
-                <Icon name="qrcode" size={16} color={colors.live} />
-              </Text>
-              <LText semiBold secondary style={styles.buttonText}>
-                Scan QR code
-              </LText>
-            </OutlineButton>
+            />
           </View>
           <View style={styles.container}>
             <LText style={styles.addressTitle}>
@@ -135,7 +129,8 @@ class SelectRecipient extends Component<Props, State> {
             ) : null}
           </View>
           <View style={[styles.container, styles.containerFlexEnd]}>
-            <BlueButton
+            <Button
+              type="primary"
               title="Continue"
               onPress={() =>
                 this.props.navigation.navigate("SendSelectFunds", {
@@ -144,14 +139,6 @@ class SelectRecipient extends Component<Props, State> {
                 })
               }
               disabled={!validAddress}
-              containerStyle={[
-                styles.continueButton,
-                !validAddress ? styles.disabledContinueButton : null,
-              ]}
-              titleStyle={[
-                styles.continueButtonText,
-                !validAddress ? styles.disabledContinueButtonText : null,
-              ]}
             />
           </View>
         </KeyboardAvoidingView>
@@ -160,6 +147,10 @@ class SelectRecipient extends Component<Props, State> {
   }
 }
 
+const IconQRCode = ({ size, color }: { size: number, color: string }) => (
+  <Icon name="qrcode" size={size} color={color} />
+);
+
 const styles = StyleSheet.create({
   root: {
     flex: 1,
@@ -173,10 +164,6 @@ const styles = StyleSheet.create({
     flex: 1,
     justifyContent: "flex-end",
   },
-  buttonText: {
-    color: colors.live,
-    marginLeft: 16,
-  },
   addressTitle: {
     color: colors.grey,
     fontSize: 12,
@@ -187,20 +174,6 @@ const styles = StyleSheet.create({
     fontSize: 24,
     color: colors.darkBlue,
   },
-  continueButton: {
-    paddingVertical: 16,
-    height: "auto",
-  },
-  continueButtonText: {
-    fontSize: 16,
-    fontFamily: "Museo Sans",
-  },
-  disabledContinueButton: {
-    backgroundColor: colors.lightFog,
-  },
-  disabledContinueButtonText: {
-    color: colors.grey,
-  },
   errorText: {
     color: colors.alert,
     fontSize: 12,
diff --git a/src/screens/SendSummary/index.js b/src/screens/SendSummary/index.js
index 6d3b2c6ed1..1ff94b29fa 100644
--- a/src/screens/SendSummary/index.js
+++ b/src/screens/SendSummary/index.js
@@ -9,7 +9,7 @@ import type { BigNumber as BigNumberType } from "bignumber.js";
 import { accountScreenSelector } from "../../reducers/accounts";
 
 import LText from "../../components/LText";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 import CurrencyIcon from "../../components/CurrencyIcon";
 import CounterValue from "../../components/CounterValue";
 
@@ -171,10 +171,10 @@ class SendSummary extends Component<Props, State> {
             />
           </LText>
           <View style={{ flex: 1 }} />
-          <BlueButton
+          <Button
+            type="primary"
             title="Continue"
             containerStyle={styles.continueButton}
-            titleStyle={styles.continueButtonTitle}
             onPress={this.onContinue}
           />
         </View>
@@ -229,14 +229,8 @@ const styles = StyleSheet.create({
     color: colors.grey,
   },
   continueButton: {
-    height: "auto",
-    paddingVertical: 16,
     alignSelf: "stretch",
   },
-  continueButtonTitle: {
-    fontSize: 16,
-    fontFamily: "Museo Sans",
-  },
   link: {
     color: colors.live,
     textDecorationStyle: "solid",
diff --git a/src/screens/Settings/Help/ClearCacheRow.js b/src/screens/Settings/Help/ClearCacheRow.js
index da4187cb15..e281678e1e 100644
--- a/src/screens/Settings/Help/ClearCacheRow.js
+++ b/src/screens/Settings/Help/ClearCacheRow.js
@@ -11,8 +11,7 @@ import type { T } from "../../../types/common";
 import Warning from "../../../icons/Warning";
 import { withReboot } from "../../../context/Reboot";
 import ModalBottomAction from "../../../components/ModalBottomAction";
-import BlueButton from "../../../components/BlueButton";
-import GreyButton from "../../../components/GreyButton";
+import Button from "../../../components/Button";
 import Archive from "../../../icons/Archive";
 import Circle from "../../../components/Circle";
 import BottomModal from "../../../components/BottomModal";
@@ -76,18 +75,17 @@ class ClearCacheRow extends PureComponent<Props, State> {
             description={t("settings.help.clearCacheModalDesc")}
             footer={
               <View style={styles.footerContainer}>
-                <GreyButton
+                <Button
+                  type="secondary"
                   title={t("common.cancel")}
                   onPress={this.onRequestClose}
                   containerStyle={styles.buttonContainer}
-                  titleStyle={styles.buttonTitle}
                 />
-
-                <BlueButton
+                <Button
+                  type="primary"
                   title={t("settings.help.clearCacheButton")}
                   onPress={this.onClearCache}
-                  containerStyle={[styles.buttonContainer, styles.clearCacheBg]}
-                  titleStyle={[styles.buttonTitle, styles.clearCacheTitle]}
+                  containerStyle={styles.buttonContainer}
                 />
               </View>
             }
@@ -112,16 +110,6 @@ const styles = StyleSheet.create({
     justifyContent: "space-around",
   },
   buttonContainer: {
-    height: 48,
     width: 136,
   },
-  clearCacheBg: {
-    backgroundColor: colors.live,
-  },
-  buttonTitle: {
-    fontSize: 16,
-  },
-  clearCacheTitle: {
-    color: colors.white,
-  },
 });
diff --git a/src/screens/VerifyAddress/index.js b/src/screens/VerifyAddress/index.js
index c7c749dfc0..fbb7bf71b9 100644
--- a/src/screens/VerifyAddress/index.js
+++ b/src/screens/VerifyAddress/index.js
@@ -14,7 +14,7 @@ import LText from "../../components/LText/index";
 
 import colors from "../../colors";
 import Stepper from "../../components/Stepper";
-import BlueButton from "../../components/BlueButton";
+import Button from "../../components/Button";
 
 import deviceConnected from "../../images/device-connected.png";
 
@@ -60,12 +60,7 @@ class VerifyAddress extends Component<Props, State> {
         </View>
         <Image source={deviceConnected} />
         <View style={styles.bottomContainer}>
-          <BlueButton
-            title="Verify"
-            onPress={this.navigate}
-            containerStyle={styles.continueButton}
-            titleStyle={styles.continueButtonText}
-          />
+          <Button type="primary" title="Verify" onPress={this.navigate} />
         </View>
       </SafeAreaView>
     );
@@ -98,14 +93,6 @@ const styles = StyleSheet.create({
     textAlign: "center",
     color: colors.smoke,
   },
-  continueButton: {
-    paddingVertical: 16,
-    height: "auto",
-  },
-  continueButtonText: {
-    fontSize: 16,
-    fontFamily: "Museo Sans",
-  },
 });
 
 const mapStateToProps = createStructuredSelector({