1 files changed, 51 insertions, 2 deletions
diff --git a/packages/frontend/src/components/MkButton.stories.impl.ts b/packages/frontend/src/components/MkButton.stories.impl.ts
index e1c1c54d10..982a8b3be1 100644
--- a/packages/frontend/src/components/MkButton.stories.impl.ts
+++ b/packages/frontend/src/components/MkButton.stories.impl.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable import/no-default-export */
-/* eslint-disable import/no-duplicates */
+import { action } from '@storybook/addon-actions';
 import { StoryObj } from '@storybook/vue3';
 import MkButton from './MkButton.vue';
 export const Default = {
@@ -20,11 +20,60 @@ export const Default = {
 						...this.args,
 					};
 				},
+				events() {
+					return {
+						click: action('click'),
+					};
+				},
 			},
-			template: '<MkButton v-bind="props">Text</MkButton>',
+			template: '<MkButton v-bind="props" v-on="events">Text</MkButton>',
 		};
 	},
+	args: {
+	},
 	parameters: {
 		layout: 'centered',
 	},
 } satisfies StoryObj<typeof MkButton>;
+export const Primary = {
+	...Default,
+	args: {
+		...Default.args,
+		primary: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Gradate = {
+	...Default,
+	args: {
+		...Default.args,
+		gradate: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Rounded = {
+	...Default,
+	args: {
+		...Default.args,
+		rounded: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Danger = {
+	...Default,
+	args: {
+		...Default.args,
+		danger: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Small = {
+	...Default,
+	args: {
+		...Default.args,
+		small: true,
+	},
+} satisfies StoryObj<typeof MkButton>;
+export const Large = {
+	...Default,
+	args: {
+		...Default.args,
+		large: true,
+	},
+} satisfies StoryObj<typeof MkButton>;