{children}
diff --git a/react/features/conference/components/web/RaisedHandsCountLabel.js b/react/features/conference/components/web/RaisedHandsCountLabel.js
new file mode 100644
index 000000000..19753ae56
--- /dev/null
+++ b/react/features/conference/components/web/RaisedHandsCountLabel.js
@@ -0,0 +1,45 @@
+import { makeStyles } from '@material-ui/styles';
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { IconRaisedHand } from '../../../base/icons';
+import { Label } from '../../../base/label';
+import { Tooltip } from '../../../base/tooltip';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
+import { open as openParticipantsPane } from '../../../participants-pane/actions';
+
+const useStyles = makeStyles(theme => {
+ return {
+ label: {
+ backgroundColor: theme.palette.warning02,
+ color: theme.palette.uiBackground,
+ marginRight: theme.spacing(1)
+ }
+ };
+});
+
+const RaisedHandsCountLabel = () => {
+ const styles = useStyles();
+ const dispatch = useDispatch();
+ const raisedHandsCount = useSelector(state =>
+ (state['features/base/participants'].raisedHandsQueue || []).length);
+ const { t } = useTranslation();
+ const onClick = useCallback(() => {
+ dispatch(openParticipantsPane());
+ }, []);
+
+ return raisedHandsCount > 0 && (
+
+ );
+};
+
+export default RaisedHandsCountLabel;