diff --git a/react/features/chat/components/index.native.js b/react/features/chat/components/index.native.js
index 570300891e..a32ec60612 100644
--- a/react/features/chat/components/index.native.js
+++ b/react/features/chat/components/index.native.js
@@ -1,4 +1,3 @@
 // @flow
 
 export * from './native';
-export { default as PrivateMessageButton } from './PrivateMessageButton';
diff --git a/react/features/chat/components/index.web.js b/react/features/chat/components/index.web.js
index 39c5711db4..40d5f46528 100644
--- a/react/features/chat/components/index.web.js
+++ b/react/features/chat/components/index.web.js
@@ -1,5 +1,3 @@
 // @flow
 
 export * from './web';
-
-export { default as PrivateMessageButton } from './PrivateMessageButton';
diff --git a/react/features/chat/components/native/ChatMessage.js b/react/features/chat/components/native/ChatMessage.js
index de530537c5..46a2eb3583 100644
--- a/react/features/chat/components/native/ChatMessage.js
+++ b/react/features/chat/components/native/ChatMessage.js
@@ -12,8 +12,8 @@ import { type StyleType } from '../../../base/styles';
 import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../../constants';
 import { replaceNonUnicodeEmojis } from '../../functions';
 import AbstractChatMessage, { type Props as AbstractProps } from '../AbstractChatMessage';
-import PrivateMessageButton from '../PrivateMessageButton';
 
+import PrivateMessageButton from './PrivateMessageButton';
 import styles from './styles';
 
 type Props = AbstractProps & {
diff --git a/react/features/chat/components/PrivateMessageButton.js b/react/features/chat/components/native/PrivateMessageButton.js
similarity index 82%
rename from react/features/chat/components/PrivateMessageButton.js
rename to react/features/chat/components/native/PrivateMessageButton.js
index bb698d5622..5eb348085e 100644
--- a/react/features/chat/components/PrivateMessageButton.js
+++ b/react/features/chat/components/native/PrivateMessageButton.js
@@ -1,13 +1,13 @@
 // @flow
 
-import { CHAT_ENABLED, getFeatureFlag } from '../../base/flags';
-import { translate } from '../../base/i18n';
-import { IconMessage, IconReply } from '../../base/icons';
-import { getParticipantById } from '../../base/participants';
-import { connect } from '../../base/redux';
-import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox/components';
-import { navigate } from '../../conference/components/native/ConferenceNavigationContainerRef';
-import { screen } from '../../conference/components/native/routes';
+import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
+import { translate } from '../../../base/i18n';
+import { IconMessage, IconReply } from '../../../base/icons';
+import { getParticipantById } from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+import { navigate } from '../../../conference/components/native/ConferenceNavigationContainerRef';
+import { screen } from '../../../conference/components/native/routes';
 
 export type Props = AbstractButtonProps & {
 
@@ -26,11 +26,6 @@ export type Props = AbstractButtonProps & {
      */
     t: Function,
 
-    /**
-     * The Redux dispatch function.
-     */
-    dispatch: Function,
-
     /**
      * True if the polls feature is disabled.
      */
diff --git a/react/features/chat/components/web/ChatMessage.js b/react/features/chat/components/web/ChatMessage.js
index 45cfaf6237..66315e1256 100644
--- a/react/features/chat/components/web/ChatMessage.js
+++ b/react/features/chat/components/web/ChatMessage.js
@@ -3,14 +3,12 @@
 import React from 'react';
 import { toArray } from 'react-emoji-render';
 
-
 import { translate } from '../../../base/i18n';
 import { Linkify } from '../../../base/react';
 import { MESSAGE_TYPE_LOCAL } from '../../constants';
-import AbstractChatMessage, {
-    type Props
-} from '../AbstractChatMessage';
-import PrivateMessageButton from '../PrivateMessageButton';
+import AbstractChatMessage, { type Props } from '../AbstractChatMessage';
+
+import PrivateMessageButton from './PrivateMessageButton';
 
 /**
  * Renders a single chat message.
diff --git a/react/features/chat/components/web/PrivateMessageButton.js b/react/features/chat/components/web/PrivateMessageButton.js
new file mode 100644
index 0000000000..698db43c5d
--- /dev/null
+++ b/react/features/chat/components/web/PrivateMessageButton.js
@@ -0,0 +1,90 @@
+// @flow
+
+import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
+import { translate } from '../../../base/i18n';
+import { IconMessage, IconReply } from '../../../base/icons';
+import { getParticipantById } from '../../../base/participants';
+import { connect } from '../../../base/redux';
+import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
+import { openChat } from '../../actions';
+
+export type Props = AbstractButtonProps & {
+
+    /**
+     * The ID of the participant that the message is to be sent.
+     */
+    participantID: string,
+
+    /**
+     * True if the button is rendered as a reply button.
+     */
+    reply: boolean,
+
+    /**
+     * Function to be used to translate i18n labels.
+     */
+    t: Function,
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: Function,
+
+    /**
+     * The participant object retrieved from Redux.
+     */
+    _participant: Object,
+};
+
+/**
+ * Class to render a button that initiates the sending of a private message through chet.
+ */
+class PrivateMessageButton extends AbstractButton<Props, any> {
+    accessibilityLabel = 'toolbar.accessibilityLabel.privateMessage';
+    icon = IconMessage;
+    label = 'toolbar.privateMessage';
+    toggledIcon = IconReply;
+
+    /**
+     * Handles clicking / pressing the button, and kicks the participant.
+     *
+     * @private
+     * @returns {void}
+     */
+    _handleClick() {
+        const { _participant, dispatch } = this.props;
+
+        dispatch(openChat(_participant));
+    }
+
+    /**
+     * Helper function to be implemented by subclasses, which must return a
+     * {@code boolean} value indicating if this button is toggled or not.
+     *
+     * @protected
+     * @returns {boolean}
+     */
+    _isToggled() {
+        return this.props.reply;
+    }
+
+}
+
+/**
+ * Maps part of the Redux store to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Props} ownProps - The own props of the component.
+ * @returns {Props}
+ */
+export function _mapStateToProps(state: Object, ownProps: Props): $Shape<Props> {
+    const enabled = getFeatureFlag(state, CHAT_ENABLED, true);
+    const { visible = enabled } = ownProps;
+
+    return {
+        _participant: getParticipantById(state, ownProps.participantID),
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(PrivateMessageButton));
diff --git a/react/features/video-menu/components/web/PrivateMessageMenuButton.js b/react/features/video-menu/components/web/PrivateMessageMenuButton.js
index 511a38668b..4d7270518a 100644
--- a/react/features/video-menu/components/web/PrivateMessageMenuButton.js
+++ b/react/features/video-menu/components/web/PrivateMessageMenuButton.js
@@ -9,7 +9,7 @@ import { openChat } from '../../../chat/';
 import {
     _mapStateToProps as _abstractMapStateToProps,
     type Props as AbstractProps
-} from '../../../chat/components/PrivateMessageButton';
+} from '../../../chat/components/web/PrivateMessageButton';
 import { isButtonEnabled } from '../../../toolbox/functions.web';
 
 import VideoMenuButton from './VideoMenuButton';