diff --git a/client/components/Button/Button.stories.jsx b/client/components/Button/Button.stories.jsx
new file mode 100644
index 00000000..1ae8d9f1
--- /dev/null
+++ b/client/components/Button/Button.stories.jsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
+
+import Button from '.';
+
+export default {
+ title: 'Common/Button (JS)',
+ component: Button
+};
+
+export const AllFeatures = () => (
+
+);
+
+export const SubmitButton = () => (
+
+);
+
+export const PrimaryButton = () => ;
+
+export const DisabledButton = () => ;
diff --git a/client/components/Button/Button.stories.mdx b/client/components/Button/Button.stories.mdx
new file mode 100644
index 00000000..28c48300
--- /dev/null
+++ b/client/components/Button/Button.stories.mdx
@@ -0,0 +1,32 @@
+import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { action } from '@storybook/addon-actions';
+import { boolean, text } from '@storybook/addon-knobs';
+
+import Button from './';
+
+
+
+# Button
+
+A button is used to perform an action.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/client/components/Button/index.js b/client/components/Button/index.js
new file mode 100644
index 00000000..89e9d3b7
--- /dev/null
+++ b/client/components/Button/index.js
@@ -0,0 +1,34 @@
+import React from "react";
+import PropTypes from "prop-types";
+import styled from 'styled-components';
+
+const StyledButton = styled.button`
+ margin: 0;
+ padding: 0;
+ border: none;
+ background: none;
+`;
+
+/**
+ * This text will be used for the description in the story
+ */
+const Button = ({ children, label, ...props }) => {
+ return {children};
+}
+
+Button.propTypes = {
+ /**
+ * The visible part of the button
+ */
+ children: PropTypes.element.isRequired,
+ /**
+ If the button can be clicked or not
+ */
+ disabled: PropTypes.boolean,
+ /*
+ * An ARIA Label used for accessibility
+ */
+ label: PropTypes.string.isRequired,
+};
+
+export default Button;
diff --git a/client/index.stories.mdx b/client/index.stories.mdx
new file mode 100644
index 00000000..50a676d1
--- /dev/null
+++ b/client/index.stories.mdx
@@ -0,0 +1,7 @@
+import { Meta } from '@storybook/addon-docs/blocks';
+
+
+
+# Welcome to the P5.js Web Editor Style Guide
+
+This guide will contain all the components in the project, with examples of how they can be reused.