diff --git a/src/components/AppButton.vue b/src/components/AppButton.vue
new file mode 100644
index 0000000..22e0bc7
--- /dev/null
+++ b/src/components/AppButton.vue
@@ -0,0 +1,84 @@
+<template>
+	<button :style="styles" @click="handleClick">
+		<!-- @slot Use this slot to place the button content -->
+		<slot></slot>
+	</button>
+</template>
+
+<script>
+import sizeMixin from './sizeMixin'
+export default {
+	name: 'app-button',
+	mixins: [sizeMixin],
+	props: {
+		/**
+		 * Sets the button font color
+		 */
+		color: {
+			type: String,
+			default: 'black'
+		},
+		/** Sets background color of the button
+		 * @since 1.2.0
+		 */
+		background: {
+			type: String,
+			default: 'white'
+		},
+		/** @deprecated Use color instead */
+		oldColor: String
+	},
+	computed: {
+		styles() {
+			return {
+				'font-size': this.size,
+				color: this.color,
+				background: this.background
+			}
+		}
+	},
+	methods: {
+		handleClick(e) {
+			/** Triggered when button is clicked
+			 * @event click
+			 * @type {Event}
+			 */
+			this.$emit('click', e)
+
+			/** Event for Alligator's example
+			 * @event gator
+			 * @type {Event}
+			 */
+			this.$emit('gator', e)
+		}
+	}
+}
+</script>
+
+<docs lang="md">
+This button is amazing, use it responsibly.
+
+## Examples
+
+Orange button:
+
+```jsx
+<app-button color="orange">Push Me</app-button>
+```
+
+Ugly button with pink font and blue background:
+
+```jsx
+<app-button color="pink" background="blue">
+	Ugly button
+</app-button>
+```
+
+Button containing custom tags:
+
+```jsx
+<app-button>
+	Text with <b>bold</b>
+</app-button>
+```
+</docs>
diff --git a/src/components/sizeMixin.js b/src/components/sizeMixin.js
new file mode 100644
index 0000000..476248b
--- /dev/null
+++ b/src/components/sizeMixin.js
@@ -0,0 +1,14 @@
+/**
+ * @mixin
+ */
+module.exports = {
+	props: {
+		/**
+		 * Set size of the element
+		 */
+		size: {
+			type: String,
+			default: '14px'
+		}
+	}
+}