diff --git a/src/components/Button/Button.mdx b/src/components/Button/Button.mdx
index bf0596bcd..4f390f4eb 100644
--- a/src/components/Button/Button.mdx
+++ b/src/components/Button/Button.mdx
@@ -1,30 +1,13 @@
 import {ArgTypes, Canvas, Meta, Story} from '@storybook/blocks';
 
-import * as ButtonStories from './Button.stories';
 import * as UtrechtButtonStories from './UtrechtButton.stories';
 
-<Meta of={ButtonStories} />
+<Meta of={UtrechtButtonStories} />
 
 # Buttons
 
-Any additional props are passed down to the button component (or custom component, if using that).
-
-<Canvas of={ButtonStories.ExtraProps} name="Docs" />
-
 ## Variants
 
-<Canvas>
-  <Story of={ButtonStories.Default} />
-  <Story of={ButtonStories.Primary} />
-  <Story of={ButtonStories.Secondary} />
-  <Story of={ButtonStories.Danger} />
-  <Story of={ButtonStories.Anchor} />
-  <Story of={ButtonStories.AnchorButton} />
-  <Story of={ButtonStories.AnchorA} />
-</Canvas>
-
-### Utrecht variants
-
 More information on the Utrecht buttons can be found
 [here](https://nl-design-system.github.io/themes/?path=/docs/button--gemeente-utrecht).
 
@@ -39,13 +22,6 @@ More information on the Utrecht buttons can be found
 
 ## Icon buttons
 
-<Canvas>
-  <Story of={ButtonStories.IconOnly} />
-  <Story of={ButtonStories.IconOnlyDanger} />
-</Canvas>
-
-### Utrecht variants
-
 <Canvas>
   <Story of={UtrechtButtonStories.UtrechtIconButton} />
   <Story of={UtrechtButtonStories.UtrechtIconButtonDanger} />
@@ -55,25 +31,8 @@ More information on the Utrecht buttons can be found
 
 Passing the `disabled` prop sets the appropriate `aria-disabled` attribute.
 
-<Canvas of={ButtonStories.Disabled} />
-
-### Utrecht variants
-
 <Canvas of={UtrechtButtonStories.UtrechtButtonDisabled} />
 
-## Replacing the HTML element
-
-You can pass an alternative `component` to render instead of the default `a` tag. This may be
-either:
-
-- built in HTML tags, passing a string (e.g. `span`)
-- custom React components (e.g. `component={MyComponent}`)
-
-<Canvas>
-  <Story of={ButtonStories.CustomComponent} />
-  <Story of={ButtonStories.Link} />
-</Canvas>
-
 ## Props
 
-<ArgTypes of={ButtonStories} />
+<ArgTypes of={UtrechtButtonStories} />
diff --git a/src/components/Button/Button.stories.js b/src/components/Button/Button.stories.js
deleted file mode 100644
index 4439e641e..000000000
--- a/src/components/Button/Button.stories.js
+++ /dev/null
@@ -1,144 +0,0 @@
-import {default as AnchorComponent} from 'components/Anchor';
-import Button, {VARIANTS} from 'components/Button';
-import FAIcon from 'components/FAIcon';
-
-export default {
-  title: 'Pure React components / Button',
-  component: Button,
-  argTypes: {
-    variant: {
-      options: VARIANTS,
-      control: {
-        type: 'radio',
-      },
-    },
-    extraVariants: {
-      type: {name: 'array'},
-    },
-    children: {table: {disable: true}},
-    onDisabledClick: {table: {disable: true}},
-  },
-  parameters: {
-    controls: {sort: 'requiredFirst'},
-  },
-};
-
-const render = ({label, ...args}) => <Button {...args}>{label}</Button>;
-
-export const ExtraProps = {
-  name: 'Extra props',
-  render,
-  args: {
-    title: 'Title attribute',
-    label: 'Hover me',
-  },
-};
-
-export const Default = {
-  render,
-  args: {label: 'Default'},
-};
-
-export const Primary = {
-  render,
-  args: {
-    label: 'Primary',
-    variant: 'primary',
-  },
-};
-
-export const Secondary = {
-  render,
-  args: {
-    label: 'Secondary',
-    variant: 'secondary',
-  },
-};
-
-export const Danger = {
-  render,
-  args: {
-    label: 'Danger',
-    variant: 'danger',
-  },
-};
-
-export const Anchor = {
-  render,
-  args: {
-    label: 'UtrechtButton',
-    variant: 'anchor',
-  },
-};
-
-export const AnchorButton = {
-  name: 'Anchor/button',
-  render,
-  args: {
-    label: 'button tag',
-    variant: 'anchor',
-    component: 'button',
-  },
-};
-
-export const AnchorA = {
-  name: 'Anchor/a',
-  render,
-  args: {
-    label: 'anchor tag',
-    variant: 'anchor',
-    component: 'a',
-    href: '#',
-  },
-};
-
-export const IconOnly = {
-  name: 'Icon only',
-  args: {
-    title: 'Icon only',
-    variant: 'icon-only',
-    icon: 'pen',
-  },
-  render: ({icon, ...args}) => (
-    <Button {...args}>
-      <FAIcon icon={icon} />
-    </Button>
-  ),
-};
-
-export const IconOnlyDanger = {
-  name: 'Icon only danger',
-  render: IconOnly.render,
-  args: {
-    ...IconOnly.args,
-    title: 'Icon only danger',
-    variant: 'icon-only',
-    extraVariants: ['danger'],
-  },
-};
-
-export const Disabled = {
-  render,
-  args: {
-    label: 'Button',
-    disabled: true,
-    onDisabledClick: () => alert('clicked disabled button'),
-  },
-};
-
-export const CustomComponent = {
-  render,
-  args: {
-    label: 'Button',
-    component: 'div',
-    value: 'div element',
-  },
-};
-
-export const Link = {
-  render,
-  args: {
-    label: 'Link',
-    component: AnchorComponent,
-  },
-};
diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss
index 043ec5a3e..7ffd7d414 100644
--- a/src/scss/components/_button.scss
+++ b/src/scss/components/_button.scss
@@ -1,233 +1,8 @@
-/**
- * TODO: properly refactor these components, the styles are bonkers...
- */
-@use 'sass:math';
 @use 'microscope-sass/lib/bem';
 
-@import '~microscope-sass/lib/grid';
-@import '~microscope-sass/lib/typography';
-
 @import '@utrecht/components/dist/button/css/index.css';
 @import '@utrecht/components/dist/button-link/css/index.css';
 
-@import '../mixins/prefix';
-
-$button-line-height: $typography-line-height-text-big * $typography-font-size-text-big;
-$button-line-height-px: math.div($button-line-height, ($button-line-height * 0 + 1)) * 16px;
-$button-padding-v: math.div(($grid-row-height - $button-line-height-px), 2) -
-  $typography-size-border;
-$button-padding-h: $grid-margin-2;
-
-@mixin button-theme(
-  $name,
-  $color,
-  $color-background,
-  $color-border: var(--of-color-bg),
-  $color-background-hover: null,
-  $color-border-hover: null,
-  $color-active: null,
-  $color-background-active: null,
-  $color-border-active: null,
-  $force-colors: false,
-  $color-border-focus: null
-) {
-  // build the selector either as just the parent or the parent with modifier,
-  // based on the theme name
-  $sel: #{&};
-
-  @if $name != '' {
-    $sel: '#{&}--#{$name}';
-  }
-
-  // now output the actual CSS rules
-  @at-root #{$sel} {
-    @if $force-colors {
-      color: $color !important;
-      background-color: $color-background !important;
-    } @else {
-      color: $color;
-      background-color: $color-background;
-    }
-
-    // TODO: can be removed once there are utrecht design tokens for the bottom/right
-    // border color
-    border-right-color: $color-border !important;
-    border-bottom-color: $color-border !important;
-
-    &:focus,
-    &:focus-visible {
-      // TODO: can be removed once there are utrecht design tokens for the bottom/right border color
-      // issue: https: //github.com/nl-design-system/utrecht/issues/1406
-      border-color: $color-border-focus !important;
-      border-right-color: $color-border-focus !important;
-      border-bottom-color: $color-border-focus !important;
-      // TODO: can be removed once there are utrecht design tokens for the border-width
-      border-width: 2px !important;
-    }
-
-    &:not([aria-disabled='true']):hover {
-      @if $color-background-hover {
-        background-color: $color-background-hover;
-      }
-
-      @if $color-border-hover {
-        // TODO: can be removed once there are utrecht design tokens for the bottom/right
-        // border color
-        border-right-color: $color-border-hover !important;
-        border-bottom-color: $color-border-hover !important;
-      }
-    }
-
-    &:active {
-      // TODO: can be removed once there are utrecht design tokens for the bottom/right
-      // border color
-      @if $color-active {
-        color: $color-active !important;
-      }
-
-      @if $color-background-active {
-        background-color: $color-background-active !important;
-      }
-
-      @if $color-border-active {
-        // TODO: can be removed once there are utrecht design tokens for the bottom/right
-        // border color
-        border-top-color: $color-border-active !important;
-        border-right-color: transparent !important;
-        border-left-color: $color-border-active !important;
-        border-bottom-color: transparent !important;
-      }
-    }
-  }
-}
-
-.#{prefix(button)} {
-  @include body;
-  @include body--big;
-  @include border(all, $color: transparent, $size: 2px);
-  @include button-theme(
-    '',
-    $typography-color-text,
-    $color-background,
-    $color-border,
-    $color-background-hover: var(--of-button-hover-bg),
-    $color-border-hover: var(--of-button-hover-color-border),
-    $color-active: var(--of-button-active-fg),
-    $color-background-active:
-      var(--of-button-active-bg, var(--utrecht-button-active-background-color)),
-    $color-border-active:
-      var(--of-button-active-color-border, var(--utrecht-button-active-border-color)),
-    $color-border-focus:
-      var(--of-button-focus-color-border, var(--utrecht-button-focus-border-color))
-  );
-  @include button-theme(
-    'primary',
-    var(--of-button-primary-fg),
-    var(--of-button-primary-bg),
-    var(--of-button-primary-color-border),
-    $color-background-hover: var(--of-button-primary-hover-bg),
-    $color-border-hover: var(--of-button-primary-hover-color-border),
-    $color-active: var(--of-button-primary-active-fg),
-    $color-background-active: var(--of-button-primary-active-bg),
-    $color-border-active: var(--of-button-primary-active-color-border),
-    $color-border-focus:
-      var(
-        --of-button-primary-focus-color-border,
-        var(--utrecht-button-primary-action-focus-border-color)
-      )
-  );
-  @include button-theme(
-    'danger',
-    var(--of-button-danger-fg),
-    var(--of-button-danger-bg),
-    var(--of-button-danger-color-border),
-    $color-background-hover: var(--of-button-danger-hover-bg),
-    $color-border-hover: var(--of-button-danger-hover-color-border),
-    $color-active: var(--of-button-danger-active-fg),
-    $color-background-active: var(--of-button-danger-active-bg),
-    $color-border-active: var(--of-button-danger-active-color-border),
-    $color-border-focus:
-      var(
-        --of-button-danger-focus-color-border,
-        var(--utrecht-button-primary-action-danger-focus-border-color)
-      )
-  );
-
-  appearance: none;
-  border-radius: 0;
-  display: flex;
-  align-items: center;
-  padding: $button-padding-v $button-padding-h;
-  text-decoration: none;
-  float: left;
-
-  @media print {
-    display: none;
-  }
-
-  &:not([aria-disabled='true']) {
-    cursor: pointer;
-  }
-
-  // styling for disabled button
-  &[aria-disabled='true'] {
-    cursor: not-allowed;
-    filter: saturate(0);
-    opacity: 0.5;
-  }
-
-  .fa-icon:not(:last-child) {
-    margin-right: $button-padding-h;
-  }
-
-  @include bem.modifier('icon-only') {
-    color: var(--of-button-fg);
-    background-color: transparent;
-    border-style: none;
-    --utrecht-button-hover-background-color: transparent;
-
-    &:hover,
-    &:active {
-      --utrecht-button-hover-color: var(--of-button-fg);
-      color: var(--of-button-fg);
-      background-color: transparent;
-      border-style: none;
-    }
-
-    &.#{prefix(button)}--danger {
-      color: var(--of-button-danger-bg);
-    }
-  }
-
-  // anchor variants, these map to utrecht components:
-  // * UtrechtButton (the default)
-  // * UtrechtButtonLink (`a` component)
-  // * UtrechtLinkButton (`button` component)
-  @include bem.modifier('anchor') {
-    @include button-theme(
-      '',
-      var(--of-button-anchor-fg, var(--utrecht-link-color)),
-      var(--of-button-anchor-bg),
-      var(--of-button-anchor-color-border),
-      $color-background-hover: var(--of-button-anchor-hover-bg, var(--utrecht-link-hover-color)),
-      $color-border-hover: var(--of-button-anchor-hover-color-border),
-      $color-active: var(--of-button-anchor-active-fg),
-      $color-background-active: var(--of-button-anchor-active-bg),
-      $color-border-active: var(--of-button-anchor-active-color-border),
-      $color-border-focus:
-        var(--of-button-anchor-focus-color-border, var(--utrecht-button-focus-border-color)),
-      $force-colors: true // there will not be an anchor variant
-    );
-
-    // the OPPOSITE of what we normally do
-    text-decoration: var(--utrecht-link-hover-text-decoration, none);
-    &:hover {
-      --of-button-anchor-fg: var(--utrecht-link-hover-color);
-      text-decoration: var(--utrecht-link-text-decoration, underline);
-    }
-  }
-}
-
 // TODO: can be removed once there are utrecht design tokens for the bottom/right border color
 // issue: https: //github.com/nl-design-system/utrecht/issues/1406
 .utrecht-button {
diff --git a/src/scss/components/_file-upload.scss b/src/scss/components/_file-upload.scss
index 5ea2aa93c..66fc72283 100644
--- a/src/scss/components/_file-upload.scss
+++ b/src/scss/components/_file-upload.scss
@@ -153,8 +153,6 @@ we don't have strict BEM naming here.
 
   button[ref='takePictureButton'],
   button[ref='toggleCameraMode'] {
-    @extend .#{prefix('button')};
-    @extend .#{prefix('button--primary')};
     display: inline-block;
     float: none;
     @include mobile-only {