diff --git a/.storybook/preview.js b/.storybook/preview.js
index d2eedb67b..17e8a0957 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,5 +1,5 @@
 import { addDecorator, addParameters } from '@storybook/vue'
-
+import Vue from 'vue'
 import 'focus-visible'
 import 'svgxuse'
 
@@ -8,6 +8,9 @@ import { withKnobs } from '@storybook/addon-knobs'
 
 // Wrap every story in Alpaca App component
 import AApp from '../src/atoms/app/App.vue'
+import AButton from '../src/atoms/button/Button.vue'
+
+Vue.component('AButton', AButton)
 
 addDecorator(withA11y)
 addDecorator(withKnobs)
diff --git a/src/atoms/button/Button.stories.js b/src/atoms/button/Button.stories.mdx
similarity index 99%
rename from src/atoms/button/Button.stories.js
rename to src/atoms/button/Button.stories.mdx
index f6a17035a..3aa7a3dbd 100644
--- a/src/atoms/button/Button.stories.js
+++ b/src/atoms/button/Button.stories.mdx
@@ -5,7 +5,6 @@ import getClassKnobsConfig from '@utils/helpers/get-class-knobs-config.js'
 import selectorsConfig from './Button.selectors.json'
 
 import AButton from './Button.vue'
-
 const classKnobsConfig = getClassKnobsConfig(selectorsConfig)
 
 export default {