diff --git a/src/components/BigNumberPad.js b/src/components/BigNumberPad.js
index 604eab5b066..0ebb6d86ed2 100644
--- a/src/components/BigNumberPad.js
+++ b/src/components/BigNumberPad.js
@@ -59,6 +59,7 @@ class BigNumberPad extends React.Component {
                             return (
                                 <Button
                                     key={column}
+                                    shouldEnableHapticFeedback
                                     style={[styles.flex1, marginLeft]}
                                     text={column === '<' ? column : this.props.toLocaleDigit(column)}
                                     onLongPress={() => this.handleLongPress(column)}
diff --git a/src/components/Button.js b/src/components/Button.js
index eedd74040cb..6c826576c69 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -9,6 +9,7 @@ import KeyboardShortcut from '../libs/KeyboardShortcut';
 import Icon from './Icon';
 import CONST from '../CONST';
 import * as StyleUtils from '../styles/StyleUtils';
+import HapticFeedback from '../libs/HapticFeedback';
 
 const propTypes = {
     /** The text for the button label */
@@ -73,6 +74,9 @@ const propTypes = {
 
     /** Should we remove the left border radius top + bottom? */
     shouldRemoveLeftBorderRadius: PropTypes.bool,
+
+    /** Should enable the haptic feedback? */
+    shouldEnableHapticFeedback: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -96,6 +100,7 @@ const defaultProps = {
     ContentComponent: undefined,
     shouldRemoveRightBorderRadius: false,
     shouldRemoveLeftBorderRadius: false,
+    shouldEnableHapticFeedback: false,
 };
 
 class Button extends Component {
@@ -179,8 +184,18 @@ class Button extends Component {
     render() {
         return (
             <Pressable
-                onPress={this.props.onPress}
-                onLongPress={this.props.onLongPress}
+                onPress={(e) => {
+                    if (this.props.shouldEnableHapticFeedback) {
+                        HapticFeedback.trigger();
+                    }
+                    this.props.onPress(e);
+                }}
+                onLongPress={(e) => {
+                    if (this.props.shouldEnableHapticFeedback) {
+                        HapticFeedback.trigger();
+                    }
+                    this.props.onLongPress(e);
+                }}
                 onPressIn={this.props.onPressIn}
                 onPressOut={this.props.onPressOut}
                 disabled={this.props.isLoading || this.props.isDisabled}
diff --git a/src/components/PressableWithSecondaryInteraction/index.android.js b/src/components/PressableWithSecondaryInteraction/index.android.js
deleted file mode 100644
index 0537a79657b..00000000000
--- a/src/components/PressableWithSecondaryInteraction/index.android.js
+++ /dev/null
@@ -1,60 +0,0 @@
-import _ from 'underscore';
-import React, {forwardRef} from 'react';
-import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
-import {Pressable, Platform} from 'react-native';
-import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
-import Text from '../Text';
-
-/**
- * Triggers haptic feedback, and calls onSecondaryInteraction
- *
- * @param {GestureResponderEvent} event
- * @param {Object} props
- */
-function handleLongPress(event, props) {
-    event.preventDefault();
-    props.onSecondaryInteraction(event);
-
-    // The constant effectHeavyClick is added in API level 29.
-    // Docs: https://developer.android.com/reference/android/os/VibrationEffect#EFFECT_HEAVY_CLICK
-    // We use keyboardTap added in API level 8 as a fallback.
-    // Docs: https://developer.android.com/reference/android/view/HapticFeedbackConstants#KEYBOARD_TAP
-    if (Platform.Version >= 29) {
-        ReactNativeHapticFeedback.trigger('effectHeavyClick');
-        return;
-    }
-    ReactNativeHapticFeedback.trigger('keyboardTap');
-}
-
-/**
- * This is a special Pressable that calls onSecondaryInteraction when LongPressed.
- *
- * @param {Object} props
- * @returns {React.Component}
- */
-const PressableWithSecondaryInteraction = (props) => {
-    // Use Text node for inline mode to prevent content overflow.
-    const Node = props.inline ? Text : Pressable;
-    return (
-        <Node
-            ref={props.forwardedRef}
-            onPress={props.onPress}
-            onPressIn={props.onPressIn}
-            onLongPress={event => handleLongPress(event, props)}
-            onPressOut={props.onPressOut}
-            // eslint-disable-next-line react/jsx-props-no-spreading
-            {...(_.omit(props, 'onLongPress'))}
-        >
-            {props.children}
-        </Node>
-    );
-};
-
-PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes;
-PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps;
-PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction';
-
-export default forwardRef((props, ref) => (
-    // eslint-disable-next-line react/jsx-props-no-spreading
-    <PressableWithSecondaryInteraction {...props} forwardedRef={ref} />
-));
diff --git a/src/components/PressableWithSecondaryInteraction/index.ios.js b/src/components/PressableWithSecondaryInteraction/index.native.js
similarity index 88%
rename from src/components/PressableWithSecondaryInteraction/index.ios.js
rename to src/components/PressableWithSecondaryInteraction/index.native.js
index 60b8ffb8374..650333e2c46 100644
--- a/src/components/PressableWithSecondaryInteraction/index.ios.js
+++ b/src/components/PressableWithSecondaryInteraction/index.native.js
@@ -1,9 +1,9 @@
 import _ from 'underscore';
 import React, {forwardRef} from 'react';
-import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
 import {Pressable} from 'react-native';
 import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes';
 import Text from '../Text';
+import HapticFeedback from '../../libs/HapticFeedback';
 
 /**
  * This is a special Pressable that calls onSecondaryInteraction when LongPressed.
@@ -21,9 +21,7 @@ const PressableWithSecondaryInteraction = (props) => {
             onPressIn={props.onPressIn}
             onLongPress={(e) => {
                 e.preventDefault();
-                ReactNativeHapticFeedback.trigger('selection', {
-                    enableVibrateFallback: true,
-                });
+                HapticFeedback.trigger();
                 props.onSecondaryInteraction(e);
             }}
             onPressOut={props.onPressOut}
diff --git a/src/libs/HapticFeedback/index.android.js b/src/libs/HapticFeedback/index.android.js
new file mode 100644
index 00000000000..e0e077a3513
--- /dev/null
+++ b/src/libs/HapticFeedback/index.android.js
@@ -0,0 +1,18 @@
+import {Platform} from 'react-native';
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
+
+function trigger() {
+    // The constant effectHeavyClick is added in API level 29.
+    // Docs: https://developer.android.com/reference/android/os/VibrationEffect#EFFECT_HEAVY_CLICK
+    // We use keyboardTap added in API level 8 as a fallback.
+    // Docs: https://developer.android.com/reference/android/view/HapticFeedbackConstants#KEYBOARD_TAP
+    if (Platform.Version >= 29) {
+        ReactNativeHapticFeedback.trigger('effectHeavyClick');
+        return;
+    }
+    ReactNativeHapticFeedback.trigger('keyboardTap');
+}
+
+export default {
+    trigger,
+};
diff --git a/src/libs/HapticFeedback/index.ios.js b/src/libs/HapticFeedback/index.ios.js
new file mode 100644
index 00000000000..d9b002621eb
--- /dev/null
+++ b/src/libs/HapticFeedback/index.ios.js
@@ -0,0 +1,12 @@
+
+import ReactNativeHapticFeedback from 'react-native-haptic-feedback';
+
+function trigger() {
+    ReactNativeHapticFeedback.trigger('selection', {
+        enableVibrateFallback: true,
+    });
+}
+
+export default {
+    trigger,
+};
diff --git a/src/libs/HapticFeedback/index.js b/src/libs/HapticFeedback/index.js
new file mode 100644
index 00000000000..39dbfb3c17a
--- /dev/null
+++ b/src/libs/HapticFeedback/index.js
@@ -0,0 +1,6 @@
+/**
+ * Web does not support Haptic feedback
+ */
+export default {
+    trigger: () => {},
+};