3 files changed, 170 insertions, 114 deletions
diff --git a/src/components/atoms/buttons/button-link/button-link.mdx b/src/components/atoms/buttons/button-link/button-link.mdx
new file mode 100644
index 0000000..e22471e
--- /dev/null
+++ b/src/components/atoms/buttons/button-link/button-link.mdx
@@ -0,0 +1,71 @@
+import { ArgTypes, Canvas, Meta, Primary } from '@storybook/blocks';
+import * as ButtonLinkStories from './button-link.stories';
+
+<Meta of={ButtonLinkStories} />
+
+# Button
+
+<Primary />
+
+## Kind
+
+The button appearance can change depending on its kind.
+
+### Primary
+
+<Canvas of={ButtonLinkStories.Primary} />
+
+### Secondary (default)
+
+<Canvas of={ButtonLinkStories.Secondary} />
+
+### Tertiary
+
+<Canvas of={ButtonLinkStories.Tertiary} />
+
+## States
+
+It can be:
+* enabled,
+* disabled
+* external.
+
+### Enabled (default)
+
+<Canvas of={ButtonLinkStories.Enabled} />
+
+### Disabled
+
+<Canvas of={ButtonLinkStories.Disabled} />
+
+### External
+
+<Canvas of={ButtonLinkStories.ExternalLink} />
+
+## Shapes
+
+It can either:
+* be a circle,
+* be a rectangle
+* be a square,
+* or have an automatic shape.
+
+### Circle
+
+<Canvas of={ButtonLinkStories.Circle} />
+
+### Rectangle (default)
+
+<Canvas of={ButtonLinkStories.Rectangle} />
+
+### Square
+
+<Canvas of={ButtonLinkStories.Square} />
+
+### Auto
+
+<Canvas of={ButtonLinkStories.Auto} />
+
+## Props
+
+<ArgTypes of={ButtonLinkStories} />
diff --git a/src/components/atoms/buttons/button-link/button-link.stories.ts b/src/components/atoms/buttons/button-link/button-link.stories.ts
new file mode 100644
index 0000000..bbf940c
--- /dev/null
+++ b/src/components/atoms/buttons/button-link/button-link.stories.ts
@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ButtonLink } from './button-link';
+
+const meta = {
+  component: ButtonLink,
+  title: 'Atoms/Buttons/ButtonLink',
+} satisfies Meta<typeof ButtonLink>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    children: 'Button Link',
+    isDisabled: false,
+    to: '#',
+  },
+};
+
+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 Enabled: Story = {
+  name: 'State: Enabled',
+  args: {
+    ...Default.args,
+    isDisabled: false,
+  },
+};
+
+export const Disabled: Story = {
+  name: 'State: Disabled',
+  args: {
+    ...Default.args,
+    isDisabled: true,
+  },
+};
+
+export const ExternalLink: Story = {
+  name: 'State: External',
+  args: {
+    ...Default.args,
+    isExternal: 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 Auto: Story = {
+  name: 'Shape: Auto',
+  args: {
+    ...Default.args,
+    shape: 'auto',
+  },
+};
diff --git a/src/components/atoms/buttons/button-link/button-link.stories.tsx b/src/components/atoms/buttons/button-link/button-link.stories.tsx
deleted file mode 100644
index f048ce9..0000000
--- a/src/components/atoms/buttons/button-link/button-link.stories.tsx
+++ /dev/null
@@ -1,114 +0,0 @@
-import type { ComponentMeta, ComponentStory } from '@storybook/react';
-import { ButtonLink } from './button-link';
-
-/**
- * ButtonLink - Storybook Meta
- */
-export default {
-  title: 'Atoms/Buttons/ButtonLink',
-  component: ButtonLink,
-  args: {
-    isExternal: false,
-    shape: 'rectangle',
-  },
-  argTypes: {
-    children: {
-      control: {
-        type: 'text',
-      },
-      description: 'The link body.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-    isExternal: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Determine if the link is an external link.',
-      table: {
-        category: 'Options',
-        defaultValue: { summary: false },
-      },
-      type: {
-        name: 'boolean',
-        required: false,
-      },
-    },
-    kind: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link kind.',
-      options: ['primary', 'secondary', 'tertiary'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'secondary' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    shape: {
-      control: {
-        type: 'select',
-      },
-      description: 'The link shape.',
-      options: ['circle', 'rectangle', 'square'],
-      table: {
-        category: 'Options',
-        defaultValue: { summary: 'rectangle' },
-      },
-      type: {
-        name: 'string',
-        required: false,
-      },
-    },
-    to: {
-      control: {
-        type: 'text',
-      },
-      description: 'The link target.',
-      type: {
-        name: 'string',
-        required: true,
-      },
-    },
-  },
-} as ComponentMeta<typeof ButtonLink>;
-
-const Template: ComponentStory<typeof ButtonLink> = (args) => (
-  <ButtonLink {...args} />
-);
-
-/**
- * ButtonLink Story - Primary
- */
-export const Primary = Template.bind({});
-Primary.args = {
-  children: 'Link',
-  kind: 'primary',
-  to: '#',
-};
-
-/**
- * ButtonLink Story - Secondary
- */
-export const Secondary = Template.bind({});
-Secondary.args = {
-  children: 'Link',
-  kind: 'secondary',
-  to: '#',
-};
-
-/**
- * ButtonLink Story - Tertiary
- */
-export const Tertiary = Template.bind({});
-Tertiary.args = {
-  children: 'Link',
-  kind: 'tertiary',
-  to: '#',
-};