diff --git a/src/components/button/ButtonIcon.stories.mdx b/src/components/button/ButtonIcon.stories.mdx
deleted file mode 100644
index 22ad5cb0..00000000
--- a/src/components/button/ButtonIcon.stories.mdx
+++ /dev/null
@@ -1,175 +0,0 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { Theme } from '../../../.storybook/components'
-import { Tone, Mode, Size } from '../types'
-import { ButtonVariant } from './types'
-import { ButtonIcon } from './ButtonIcon'
-
-<Meta title="Components/Button/ButtonIcon" component={ButtonIcon} />
-
-# ButtonIcon
-
-export const Template = ({ ...args }) => <ButtonIcon {...args} />
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{
-      disabled: false,
-      mode: Mode.Light,
-      variant: ButtonVariant.Solid,
-      size: Size.Md,
-      tone: Tone.Primary,
-      icon: 'Add',
-    }}
-    argTypes={{
-      mode: {
-        options: Object.values(Mode),
-        control: { type: 'radio' },
-      },
-      variant: {
-        options: Object.values(ButtonVariant),
-        control: { type: 'radio' },
-      },
-      size: {
-        options: Object.values(Size),
-        control: { type: 'radio' },
-      },
-      tone: {
-        options: Object.values(Tone),
-        control: { type: 'select' },
-      },
-      icon: {
-        options: ['Add', 'Info'],
-        mapping: { Add: IconAdd, Info: IconInfo },
-        control: { type: 'select' },
-      },
-      onClick: {
-        control: false,
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-All the other externally defined props are
-
-```
-React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
-```
-
-
-
-<Theme component="button" items={['buttonIcon']} />
-
-Additionally, all the `button.modeVariantTone` themes are used. See [Button](/docs/components-button-button--docs#theme).
-
-## Mode
-
-The `Mode` determines if the component is placed on LIGHT or DARK background.
-
-<Canvas>
-  <Story name="ModeLight">
-    <ButtonIcon icon={IconAdd} mode={Mode.Light} />
-  </Story>
-  <Story name="ModeDark">
-    <div className="p-5 bg-neutral-700">
-      <ButtonIcon icon={IconAdd} mode={Mode.Dark} />
-    </div>
-  </Story>
-</Canvas>
-
-## Variants
-
-The `Variant` determine if there is a background fill and a border. The `transparent` variant, while being transparent, still keep the same size as the other variants.
-
-<Canvas>
-  <Story name="VariantSolid">
-    <ButtonIcon icon={IconAdd} variant={ButtonVariant.Solid} />
-  </Story>
-  <Story name="VariantGhost">
-    <ButtonIcon icon={IconAdd} variant={ButtonVariant.Ghost} />
-  </Story>
-  <Story name="VariantTransparent">
-    <ButtonIcon icon={IconAdd} variant={ButtonVariant.Transparent} />
-  </Story>
-</Canvas>
-
-## Size
-
-The size determine the padding between the button text and its border.
-
-<Canvas>
-  <Story name="SizeSm">
-    <ButtonIcon icon={IconAdd} size={Size.Sm} />
-  </Story>
-  <Story name="SizeMd">
-    <ButtonIcon icon={IconAdd} size={Size.Md} />
-  </Story>
-  <Story name="SizeLg">
-    <ButtonIcon icon={IconAdd} size={Size.Lg} />
-  </Story>
-</Canvas>
-
-## Tone
-
-The tone of the button determine it's background color. Given the prop, the component will look at the Tailwind config to determine its color.
-
-For additional information about Tailwind config, please refer to the [Tailwind documentation on colors](https://tailwindcss.com/docs/customizing-colors).
-
-<Canvas>
-  <Story name="Primary">
-    <ButtonIcon icon={IconAdd} tone={Tone.Primary} />
-  </Story>
-  <Story name="Neutral">
-    <ButtonIcon icon={IconAdd} tone={Tone.Neutral} />
-  </Story>
-  <Story name="Warning">
-    <ButtonIcon icon={IconAdd} tone={Tone.Warning} />
-  </Story>
-  <Story name="Critical">
-    <ButtonIcon icon={IconAdd} tone={Tone.Critical} />
-  </Story>
-  <Story name="Success">
-    <ButtonIcon icon={IconAdd} tone={Tone.Success} />
-  </Story>
-  <Story name="Informative">
-    <ButtonIcon icon={IconAdd} tone={Tone.Informative} />
-  </Story>
-</Canvas>
-
-## Tone Custom
-
-If the provided colors are not satisfying the needs of a project, it is possible to add your own colors. In the following example, it is moderated what needs to be added to the `reactui.config.js`. See [ReactUI Integrations](https://github.com/aboutbits/react-ui-integrations) for more information.
-
-```js
-module.exports = {
-  button: {
-    variantTone: {
-      SOLID: {
-        purple:
-          'bg-purple-500 hover:bg-purple-600 text-white outline-purple-500',
-      },
-      GHOST: {
-        purple:
-          'hover:bg-purple-50 focus:bg-purple-50 border-purple-500 focus:border-transparent text-purple-500 outline-purple-500',
-      },
-      TRANSPARENT: {
-        purple: 'hover:bg-purple-50 text-purple-500 focus:outline-purple-500',
-      },
-    },
-  },
-}
-```
-
-<Canvas>
-  <Story name="CustomPurple">
-    <ButtonIcon icon={IconAdd} tone="purple" />
-  </Story>
-</Canvas>
diff --git a/src/components/button/ButtonIconLink.stories.mdx b/src/components/button/ButtonIconLink.stories.mdx
deleted file mode 100644
index 0ac6cf9f..00000000
--- a/src/components/button/ButtonIconLink.stories.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { Tone, Mode, Size } from '../types'
-import { ButtonVariant } from './types'
-import { ButtonIconLink } from './ButtonIconLink'
-
-<Meta title="Components/Button/ButtonIconLink" component={ButtonIconLink} />
-
-# ButtonIconLink
-
-export const Template = ({ ...args }) => <ButtonIconLink {...args} />
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{
-      href: '#',
-      disabled: false,
-      mode: Mode.Light,
-      variant: ButtonVariant.Solid,
-      size: Size.Md,
-      tone: Tone.Primary,
-      icon: 'Add',
-    }}
-    argTypes={{
-      mode: {
-        options: Object.values(Mode),
-        control: { type: 'radio' },
-      },
-      variant: {
-        options: Object.values(ButtonVariant),
-        control: { type: 'radio' },
-      },
-      size: {
-        options: Object.values(Size),
-        control: { type: 'radio' },
-      },
-      tone: {
-        options: Object.values(Tone),
-        control: { type: 'select' },
-      },
-      icon: {
-        options: ['Add', 'Info'],
-        mapping: { Add: IconAdd, Info: IconInfo },
-        control: { type: 'select' },
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-
-
-All themes are the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
-
-## Mode
-
-The mode is the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
-
-## Variants
-
-The variants are the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
-
-## Size
-
-The size is the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
-
-## Tone
-
-The tone is the same as for the [ButtonIcon](/docs/components-button-buttonicon--docs#theme).
diff --git a/src/components/button/ButtonLink.stories.mdx b/src/components/button/ButtonLink.stories.mdx
deleted file mode 100644
index 8397108c..00000000
--- a/src/components/button/ButtonLink.stories.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
-import IconAdd from '@aboutbits/react-material-icons/dist/IconAdd'
-import IconInfo from '@aboutbits/react-material-icons/dist/IconInfo'
-import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs'
-import { Tone, Mode, Size } from '../types'
-import { ButtonVariant } from './types'
-import { ButtonLink } from './ButtonLink'
-
-<Meta title="Components/Button/ButtonLink" component={ButtonLink} />
-
-# ButtonLink
-
-The ButtonLink component has the looks of a Button, but is an anchor tag under the hood.
-You can define the type of link in the ReactUIProvider. By default, it will be a plain HTML anchor tag.
-
-export const Template = ({ children, ...args }) => (
-  <ButtonLink {...args}>{children}</ButtonLink>
-)
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{
-      children: 'Default Button',
-      href: '#ButtonLink',
-      disabled: false,
-      internal: true,
-      mode: Mode.Light,
-      variant: ButtonVariant.Solid,
-      size: Size.Md,
-      tone: Tone.Primary,
-      iconStart: 'None',
-      iconEnd: 'None',
-    }}
-    argTypes={{
-      mode: {
-        options: Object.values(Mode),
-        control: { type: 'radio' },
-      },
-      variant: {
-        options: Object.values(ButtonVariant),
-        control: { type: 'radio' },
-      },
-      size: {
-        options: Object.values(Size),
-        control: { type: 'radio' },
-      },
-      tone: {
-        options: Object.values(Tone),
-        control: { type: 'select' },
-      },
-      iconStart: {
-        options: ['None', 'Add', 'Info'],
-        mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
-        control: { type: 'select' },
-      },
-      iconEnd: {
-        options: ['None', 'Add', 'Info'],
-        mapping: { None: undefined, Add: IconAdd, Info: IconInfo },
-        control: { type: 'select' },
-      },
-    }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Props
-
-<ArgsTable story="Default" />
-
-All the other externally defined props are
-
-```
-AnchorHTMLAttributes<HTMLAnchorElement>
-```
-
-
-
-All themes are the same as for the [Button](/docs/components-button-button--docs#theme).
-
-## Examples
-
-<Canvas>
-  <Story name="External link">
-    <ButtonLink href="/" internal={false}>
-      External link
-    </ButtonLink>
-  </Story>
-</Canvas>
-
-## Mode
-
-The mode is the same as for the [Button](/docs/components-button-button--docs#size).
-
-## Variants
-
-The variants are the same as for the [Button](/docs/components-button-button--docs#variants).
-
-## Size
-
-The size is the same as for the [Button](/docs/components-button-button--docs#size).
-
-## Tone
-
-The tone is the same as for the [Button](/docs/components-button-button--docs#tone).
diff --git a/src/components/button/SubmitButton.stories.mdx b/src/components/button/SubmitButton.stories.mdx
deleted file mode 100644
index 9a9f4da6..00000000
--- a/src/components/button/SubmitButton.stories.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'
-import { action } from '@storybook/addon-actions'
-import { Form, useForm } from 'react-hook-form'
-import { SubmitButton } from './SubmitButton'
-
-<Meta
-  title="Components/Button/SubmitButton"
-  component={SubmitButton}
-  decorators={[
-    (Story) => {
-      const form = useForm()
-      return (
-        <Form form={form} onSubmit={action('onSubmit')}>
-          <Story />
-        </Form>
-      )
-    },
-  ]}
-/>
-
-export const Template = ({ children, ...args }) => (
-  <SubmitButton {...args}>{children}</SubmitButton>
-)
-
-# SubmitButton
-
-The **_default values_** for variant, size, and tone can be found in the [Button Section](/docs/components-button-button--docs).
-
-The submit button uses `React Hook Form` to automatically disable during submitting.
-
-When the submit button is not placed inside a form (i.e. it has no form context), you can use the `formControl` prop to pass the control of the form.
-
-## Usage
-
-```jsx
-const form = useForm({ defaultValues: { name: '', email: '' }})
-<Form
-  form={form}
-  onSubmit={async (values) => {
-    await new Promise((resolve) => setTimeout(resolve, 1000))
-    alert(JSON.stringify(values, null, 2))
-  }}
->
-  <Input name="email" type="email" />
-  <SubmitButton>Submit</SubmitButton>
-</Form>
-```
-
-<Canvas>
-  <Story
-    name="Default"
-    args={{ children: 'Submit' }}
-    argTypes={{ onClick: { control: false } }}
-  >
-    {Template.bind({})}
-  </Story>
-</Canvas>
-
-### Props:
-
-<ArgsTable story="Default" />
-
-All the other externally defined props are:
-
-```
-React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & ButtonProps
-```
-
-## Disabled
-
-<Canvas>
-  <Story name="Disabled" args={{ children: 'Submit', disabled: true }}>
-    {Template.bind({})}
-  </Story>
-</Canvas>