3 files changed, 192 insertions, 172 deletions
diff --git a/src/components/atoms/buttons/button/button.mdx b/src/components/atoms/buttons/button/button.mdx
new file mode 100644
index 0000000..d90156e
--- /dev/null
+++ b/src/components/atoms/buttons/button/button.mdx
@@ -0,0 +1,80 @@
+import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks';
+import * as ButtonStories from './button.stories';
+
+<Meta of={ButtonStories} />
+
+# Button
+
+<Primary />
+
+## Kind
+
+The button appearance can change depending on its kind.
+
+### Primary
+
+<Canvas of={ButtonStories.Primary} />
+
+### Secondary (default)
+
+<Canvas of={ButtonStories.Secondary} />
+
+### Tertiary
+
+<Canvas of={ButtonStories.Tertiary} />
+
+### Neutral
+
+<Canvas of={ButtonStories.Neutral} />
+
+## States
+
+It can either:
+* be enabled,
+* be disabled
+* indicate a loading state,
+* indicate a pressed state.
+
+### Enabled (default)
+
+<Canvas of={ButtonStories.Enabled} />
+
+### Disabled
+
+<Canvas of={ButtonStories.Disabled} />
+
+### Loading
+
+<Canvas of={ButtonStories.Loading} />
+
+### Pressed
+
+<Canvas of={ButtonStories.Pressed} />
+
+## Shapes
+
+It can either:
+* be a circle,
+* be a rectangle
+* be a square,
+* or conserves its initial shape.
+
+### Circle
+
+<Canvas of={ButtonStories.Circle} />
+
+### Rectangle (default)
+
+<Canvas of={ButtonStories.Rectangle} />
+
+### Square
+
+<Canvas of={ButtonStories.Square} />
+
+### Initial
+
+<Canvas of={ButtonStories.Initial} />
+
+## Props
+
+<ArgTypes of={ButtonStories} />
diff --git a/src/components/atoms/buttons/button/button.stories.ts b/src/components/atoms/buttons/button/button.stories.ts
new file mode 100644
index 0000000..25fb9f8
--- /dev/null
+++ b/src/components/atoms/buttons/button/button.stories.ts
@@ -0,0 +1,112 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from './button';
+
+const meta = {
+  component: Button,
+  title: 'Atoms/Buttons/Button',
+} satisfies Meta<typeof Button>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button',
+  },
+};
+
+export const Primary: Story = {
+  name: 'Kind: Primary',
+  args: {
+    ...Default.args,
+    kind: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  name: 'Kind: Secondary',
+  args: {
+    ...Default.args,
+    kind: 'secondary',
+  },
+};
+
+export const Tertiary: Story = {
+  name: 'Kind: Tertiary',
+  args: {
+    ...Default.args,
+    kind: 'tertiary',
+  },
+};
+
+export const Neutral: Story = {
+  name: 'Kind: Neutral',
+  args: {
+    ...Default.args,
+    kind: 'neutral',
+  },
+};
+
+export const Enabled: Story = {
+  name: 'State: Enabled',
+  args: {
+    ...Default.args,
+  },
+};
+
+export const Disabled: Story = {
+  name: 'State: Disabled',
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+};
+
+export const Loading: Story = {
+  name: 'State: Loading',
+  args: {
+    ...Default.args,
+    isLoading: true,
+  },
+};
+
+export const Pressed: Story = {
+  name: 'State: Pressed',
+  args: {
+    ...Default.args,
+    isPressed: true,
+  },
+};
+
+export const Circle: Story = {
+  name: 'Shape: Circle',
+  args: {
+    ...Default.args,
+    shape: 'circle',
+  },
+};
+
+export const Rectangle: Story = {
+  name: 'Shape: Rectangle',
+  args: {
+    ...Default.args,
+    shape: 'rectangle',
+  },
+};
+
+export const Square: Story = {
+  name: 'Shape: Square',
+  args: {
+    ...Default.args,
+    shape: 'square',
+  },
+};
+
+export const Initial: Story = {
+  name: 'Shape: Initial',
+  args: {
+    ...Default.args,
+    shape: 'initial',
+  },
+};
diff --git a/src/components/atoms/buttons/button/button.stories.tsx b/src/components/atoms/buttons/button/button.stories.tsx
deleted file mode 100644
index 5ce28fb..0000000
--- a/src/components/atoms/buttons/button/button.stories.tsx
+++ /dev/null
@@ -1,172 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Button } from './button';
-
-/**
- * Button - Storybook Meta
- */
-export default {
-  title: 'Atoms/Buttons/Button',
-  component: Button,
-  args: {
-    type: 'button',
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The button body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isDisabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Should the button be disabled?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isLoading: {
-      control: {
-        type: 'boolean',
-      },
-      description:
-        'Should the button be disabled because it is loading something?',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    isPressed: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Define if the button is currently pressed.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'Button kind.',
-      options: ['primary', 'secondary', 'tertiary', 'neutral'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'secondary' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    onClick: {
-      control: {
-        type: null,
-      },
-      description: 'A callback function to handle click.',
-      table: {
-        category: 'Events',
-      },
-      type: {
-        name: 'function',
-        required: false,
-      },
-    },
-    shape: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link shape.',
-      options: ['circle', 'rectangle', 'square', 'initial'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'rectangle' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    type: {
-      control: {
-        type: 'select',
-      },
-      description: 'Button type attribute.',
-      options: ['button', 'reset', 'submit'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'button' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-  },
-} as ComponentMeta<typeof Button>;
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />;
-
-const logClick = () => {
-  console.log('Button has been clicked!');
-};
-
-/**
- * Button Story - Primary
- */
-export const Primary = Template.bind({});
-Primary.args = {
-  children: 'Click on the button',
-  kind: 'primary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Secondary
- */
-export const Secondary = Template.bind({});
-Secondary.args = {
-  children: 'Click on the button',
-  kind: 'secondary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Tertiary
- */
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  children: 'Click on the button',
-  kind: 'tertiary',
-  onClick: logClick,
-};
-
-/**
- * Button Story - Neutral
- */
-export const Neutral = Template.bind({});
-Neutral.args = {
-  children: 'Click on the button',
-  kind: 'neutral',
-  onClick: logClick,
-};