Button component implemented

src/common/Button/Button.js

@@ -0,0 +1,47 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { Focusable } from 'stremio-common';
+
+class Button extends PureComponent {
+    onClick = (event) => {
+        if (this.props.stopPropagation) {
+            event.stopPropagation();
+        }
+
+        if (typeof this.props.onClick === 'function') {
+            this.props.onClick(event);
+        }
+    }
+
+    onKeyUp = (event) => {
+        if (event.which === 13) { // Enter key code
+            this.onClick(event);
+        }
+    }
+
+    render() {
+        const { stopPropagation, forwardedRef, ...props } = this.props;
+        return (
+            <Focusable ref={forwardedRef}>
+                <div
+                    {...props}
+                    onClick={this.onClick}
+                    onKeyUp={this.onKeyUp}
+                />
+            </Focusable>
+        );
+    }
+}
+
+Button.propTypes = {
+    stopPropagation: PropTypes.bool.isRequired
+};
+Button.defaultProps = {
+    stopPropagation: true
+};
+
+const ButtonWithForwardedRef = React.forwardRef((props, ref) => (
+    <Button {...props} forwardedRef={ref} />
+));
+
+export default ButtonWithForwardedRef;

src/common/Button/index.js

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export default Button;

src/common/index.js

@@ -10,6 +10,7 @@ import ShareAddon from './ShareAddon';
 import UserPanel from './UserPanel';
 import Slider from './Slider';
 import { Focusable, FocusableProvider } from './Focusable';
+import Button from './Button';
 
 export {
     Checkbox,
@@ -24,5 +25,6 @@ export {
     UserPanel,
     Slider,
     Focusable,
-    FocusableProvider
+    FocusableProvider,
+    Button
 };