diff --git a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png
index 395f4c625..609e4f545 100644
Binary files a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png and b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-chromium-linux.png differ
diff --git a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png
index eca03a672..f7a377cdf 100644
Binary files a/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png and b/examples/nuxt-app/tests/smoke.spec.ts-snapshots/renders-an-example-page-1-firefox-linux.png differ
diff --git a/packages/component-library/src/components/feedback-indicator/mt-toast/mt-toast-notification.vue b/packages/component-library/src/components/feedback-indicator/mt-toast/mt-toast-notification.vue
index 16b60192b..f1c98ccec 100644
--- a/packages/component-library/src/components/feedback-indicator/mt-toast/mt-toast-notification.vue
+++ b/packages/component-library/src/components/feedback-indicator/mt-toast/mt-toast-notification.vue
@@ -32,7 +32,7 @@
       </div>
 
       <div class="mt-toast-notification__content-right">
-        <mt-button v-if="toast.action" @click="onActionClick" size="small">
+        <mt-button v-if="toast.action" @click="onActionClick" variant="secondary" size="small">
           {{ toast.action.label }}
         </mt-button>
       </div>
diff --git a/packages/component-library/src/components/form/mt-button/mt-button.interactive.stories.ts b/packages/component-library/src/components/form/mt-button/mt-button.interactive.stories.ts
index 226416702..a8e86b66d 100644
--- a/packages/component-library/src/components/form/mt-button/mt-button.interactive.stories.ts
+++ b/packages/component-library/src/components/form/mt-button/mt-button.interactive.stories.ts
@@ -74,14 +74,6 @@ export const VisualTestCriticalGhostVariant: MtButtonStory = {
   },
 };
 
-export const VisualTestActionVariant: MtButtonStory = {
-  name: "Render the action variant",
-  args: {
-    default: "Action button",
-    variant: "action",
-  },
-};
-
 export const VisualTestSmallSize: MtButtonStory = {
   name: "Render the small size",
   args: {
diff --git a/packages/component-library/src/components/form/mt-button/mt-button.vue b/packages/component-library/src/components/form/mt-button/mt-button.vue
index a0906adb6..d8d202e75 100644
--- a/packages/component-library/src/components/form/mt-button/mt-button.vue
+++ b/packages/component-library/src/components/form/mt-button/mt-button.vue
@@ -21,142 +21,59 @@
     v-bind="$attrs"
   >
     <mt-loader v-if="isLoading" size="16px" class="mt-button__loader" />
-    <span class="mt-button__content" :class="contentVisibilityClass">
+    <span
+      :class="[
+        'mt-button__content',
+        {
+          'mt-button__content--hidden': !!isLoading,
+        },
+      ]"
+    >
       <slot />
     </span>
   </button>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue";
+<script setup lang="ts">
+import { computed } from "vue";
 import MtLoader from "../../feedback-indicator/mt-loader/mt-loader.vue";
-import type { PropType } from "vue";
 
-export default defineComponent({
-  name: "MtButton",
-
-  components: {
-    "mt-loader": MtLoader,
+const props = withDefaults(
+  defineProps<{
+    disabled?: boolean;
+    variant?: "primary" | "secondary" | "critical";
+    ghost?: boolean;
+    size?: "x-small" | "small" | "default" | "large";
+    square?: boolean;
+    block?: boolean;
+    link?: string;
+    isLoading?: boolean;
+  }>(),
+  {
+    variant: "primary",
+    size: "default",
   },
+);
 
-  props: {
-    /**
-     * Disables the button
-     */
-    disabled: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Change the look of the button
-     * Values: primary, secondary, critical, action
-     * @values primary, secondary, critical, action
-     */
-    variant: {
-      type: String as PropType<"primary" | "secondary" | "critical" | "action">,
-      required: false,
-      default: "",
-      validator(value: string) {
-        if (!value.length) {
-          return true;
-        }
-        return ["primary", "secondary", "critical", "action"].includes(value);
-      },
-    },
-    ghost: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Change the size of the button
-     * @values x-small, small, default, large
-     */
-    size: {
-      type: String,
-      required: false,
-      default: "small",
-      validator(value: string) {
-        if (!value.length) {
-          return true;
-        }
-        return ["x-small", "small", "default", "large"].includes(value);
-      },
-    },
-    /**
-     * The button will be rendered as a square. You need to consider the text length
-     * if you activate this property.
-     */
-    square: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * Renders the button as a block element instead of an inline-block element. The button
-     * fills up all horizontal space.
-     */
-    block: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    /**
-     * If a link is provided then the user gets redirected to a new tab on a click.
-     */
-    link: {
-      type: String,
-      required: false,
-      default: null,
-    },
-    /**
-     * Shows a loading indicator instead of the text.
-     */
-    isLoading: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-  },
+const allowGhostVariant = computed(() => props.ghost && props.variant !== "secondary");
 
-  computed: {
-    buttonClasses() {
-      return {
-        [`mt-button--${this.variant}${this.allowGhostVariant ? "-ghost" : ""}`]: !!this.variant,
-        [`mt-button--${this.size}`]: !!this.size,
-        "mt-button--block": this.block,
-        "mt-button--disabled": this.disabled,
-        "mt-button--square": this.square,
-      };
-    },
-
-    allowGhostVariant() {
-      return this.ghost && this.variant !== "secondary";
-    },
-
-    contentVisibilityClass() {
-      return {
-        "mt-button__content--hidden": this.isLoading,
-      };
-    },
+const buttonClasses = computed(() => [
+  `mt-button--${props.variant}${allowGhostVariant.value ? "-ghost" : ""}`,
+  `mt-button--${props.size}`,
+  {
+    "mt-button--block": props.block,
+    "mt-button--disabled": props.disabled,
+    "mt-button--square": props.square,
   },
-});
+]);
 </script>
 
-<style lang="scss">
-$mt-button-transition: all 0.15s ease-out;
-
+<style scoped>
 .mt-button {
-  border: 1px solid $color-gray-400;
-  background: $color-gray-50;
-  color: $color-darkgray-200;
-  transition: $mt-button-transition;
+  transition: all 0.15s ease-out;
   display: inline-block;
   border-radius: var(--border-radius-button);
-  padding: 2px 24px;
   font-size: var(--font-size-xs);
-  line-height: 34px;
   outline: none;
   font-weight: var(--font-weight-semibold);
   font-family: var(--font-family-body);
@@ -168,255 +85,219 @@ $mt-button-transition: all 0.15s ease-out;
   user-select: none;
   margin: 0;
   position: relative;
+  border: 1px solid transparent;
+}
 
-  .mt-button__content {
-    display: grid;
-    grid-auto-flow: column;
-    align-items: center;
-    grid-gap: 0 8px;
+.mt-button__content {
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  grid-gap: 0 8px;
+}
+
+.mt-button__content--hidden {
+  visibility: hidden;
+}
+
+.mt-button--primary {
+  background: var(--color-interaction-primary-default);
+  color: var(--color-text-static-default);
+  border-color: var(--color-interaction-primary-default);
+
+  & .mt-icon {
+    color: var(--color-icon-static-default);
   }
 
-  .mt-button__content--hidden {
-    visibility: hidden;
+  &:is(:hover, :focus-visible, :active) {
+    background: var(--color-interaction-primary-hover);
+    border-color: var(--color-interaction-primary-hover);
   }
 
-  &:hover:not(.mt-button--disabled),
-  &:hover:not([disabled]) {
-    background: $color-gray-100;
+  &:focus-visible {
+    border-color: var(--color-border-brand-selected);
+    box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
   }
 
   &:disabled,
   &.mt-button--disabled {
-    color: $color-gray-500;
-    border-color: $color-gray-200;
-    cursor: not-allowed;
-
-    .mt-icon {
-      color: $color-gray-400;
-    }
-  }
-
-  .mt-icon {
-    color: $color-gray-800;
+    background: var(--color-interaction-primary-disabled);
+    border-color: var(--color-interaction-primary-disabled);
   }
+}
 
-  &.mt-button--primary {
-    background: var(--color-interaction-primary-default);
-    color: var(--color-text-static-default);
-    line-height: 36px;
-    border-color: var(--color-interaction-primary-default);
-
-    .mt-icon {
-      color: var(--color-icon-static-default);
-    }
-
-    &:is(:hover, :focus-visible, :active) {
-      background: var(--color-interaction-primary-hover);
-      border-color: var(--color-interaction-primary-hover);
-    }
+.mt-button--primary-ghost {
+  background: transparent;
+  border-color: var(--color-border-brand-selected);
+  color: var(--color-text-brand-default);
 
-    &:focus-visible {
-      border-color: var(--color-border-brand-selected);
-      box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
-    }
+  &:is(:hover, :focus-visible, :active) {
+    background: var(--color-background-brand-default);
+  }
 
-    &:disabled,
-    &.mt-button--disabled {
-      background: var(--color-interaction-primary-disabled);
-      border-color: var(--color-interaction-primary-disabled);
-    }
+  &:focus-visible {
+    box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
   }
 
-  &.mt-button--primary-ghost {
+  &:disabled,
+  &.mt-button--disabled {
+    color: var(--color-text-brand-disabled);
+    border-color: var(--color-border-brand-disabled);
     background: transparent;
-    border-color: var(--color-border-brand-selected);
-    color: var(--color-text-brand-default);
-
-    &:is(:hover, :focus-visible, :active) {
-      background: var(--color-background-brand-default);
-    }
-
-    &:focus-visible {
-      box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
-    }
-
-    &:disabled,
-    &.mt-button--disabled {
-      color: var(--color-text-brand-disabled);
-      border-color: var(--color-border-brand-disabled);
-      background: transparent;
-
-      .mt-icon {
-        color: var(--color-icon-brand-disabled);
-      }
-    }
 
-    .mt-icon {
-      color: var(--color-icon-brand-default);
+    & .mt-icon {
+      color: var(--color-icon-brand-disabled);
     }
   }
 
-  &.mt-button--secondary {
-    background: var(--color-interaction-secondary-default);
-    color: var(--color-text-primary-default);
-    line-height: 36px;
-    border-color: var(--color-border-primary-default);
+  & .mt-icon {
+    color: var(--color-icon-brand-default);
+  }
+}
 
-    &:is(:hover, :focus-visible, :active) {
-      background: var(--color-interaction-secondary-hover);
-    }
+.mt-button--secondary {
+  background: var(--color-interaction-secondary-default);
+  color: var(--color-text-primary-default);
+  border-color: var(--color-border-primary-default);
 
-    &:focus-visible {
-      border-color: var(--color-border-brand-selected);
-      box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
-    }
+  &:is(:hover, :focus-visible, :active) {
+    background: var(--color-interaction-secondary-hover);
+  }
 
-    &:disabled,
-    &.mt-button--disabled {
-      color: var(--color-text-primary-disabled);
-      background: var(--color-interaction-secondary-disabled);
+  &:focus-visible {
+    border-color: var(--color-border-brand-selected);
+    box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
+  }
 
-      .mt-icon {
-        color: var(--color-icon-primary-disabled);
-      }
-    }
+  &:disabled,
+  &.mt-button--disabled {
+    color: var(--color-text-primary-disabled);
+    background: var(--color-interaction-secondary-disabled);
 
-    .mt-icon {
-      color: var(--color-icon-primary-default);
+    & .mt-icon {
+      color: var(--color-icon-primary-disabled);
     }
   }
 
-  &.mt-button--critical {
-    background: var(--color-interaction-critical-default);
-    color: var(--color-text-static-default);
-    line-height: 36px;
-    border-color: var(--color-interaction-critical-default);
+  & .mt-icon {
+    color: var(--color-icon-primary-default);
+  }
+}
 
-    &:is(:hover, :focus-visible, :active) {
-      background: var(--color-interaction-critical-hover);
-      border-color: var(--color-interaction-critical-hover);
-    }
+.mt-button--critical {
+  background: var(--color-interaction-critical-default);
+  color: var(--color-text-static-default);
+  border-color: var(--color-interaction-critical-default);
 
-    &:focus-visible {
-      border-color: var(--color-border-brand-selected);
-      box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
-    }
+  &:is(:hover, :focus-visible, :active) {
+    background: var(--color-interaction-critical-hover);
+    border-color: var(--color-interaction-critical-hover);
+  }
 
-    &:disabled,
-    &.mt-button--disabled {
-      background: var(--color-interaction-critical-disabled);
-      border-color: var(--color-interaction-critical-disabled);
+  &:focus-visible {
+    border-color: var(--color-border-brand-selected);
+    box-shadow: 0 0 4px 0 rgba(24, 158, 255, 0.3);
+  }
 
-      .mt-icon {
-        color: var(--color-icon-static-default);
-      }
-    }
+  &:disabled,
+  &.mt-button--disabled {
+    background: var(--color-interaction-critical-disabled);
+    border-color: var(--color-interaction-critical-disabled);
 
-    .mt-icon {
+    & .mt-icon {
       color: var(--color-icon-static-default);
     }
   }
 
-  &.mt-button--critical-ghost {
-    background: transparent;
-    border-color: var(--color-border-critical-default);
-    color: var(--color-text-critical-default);
+  & .mt-icon {
+    color: var(--color-icon-static-default);
+  }
+}
 
-    &:is(:hover, :focus-visible, :active) {
-      background-color: var(--color-background-critical-dark);
-    }
+.mt-button--critical-ghost {
+  background: transparent;
+  border-color: var(--color-border-critical-default);
+  color: var(--color-text-critical-default);
 
-    &:focus-visible {
-      border-color: var(--color-border-brand-selected);
-      box-shadow: 0 0 4px 0 rgba(255, 0, 0, 0.3);
-    }
+  &:is(:hover, :focus-visible, :active) {
+    background-color: var(--color-background-critical-dark);
+  }
 
-    &:disabled,
-    &.mt-button--disabled {
-      color: var(--color-text-critical-disabled);
-      border-color: var(--color-border-critical-disabled);
+  &:focus-visible {
+    border-color: var(--color-border-brand-selected);
+    box-shadow: 0 0 4px 0 rgba(255, 0, 0, 0.3);
+  }
 
-      .mt-icon {
-        color: var(--color-icon-critical-disabled);
-      }
-    }
+  &:disabled,
+  &.mt-button--disabled {
+    color: var(--color-text-critical-disabled);
+    border-color: var(--color-border-critical-disabled);
 
-    .mt-icon {
-      color: var(--color-icon-critical-default);
+    & .mt-icon {
+      color: var(--color-icon-critical-disabled);
     }
   }
 
-  &.mt-button--action {
-    border: 1px solid $color-gray-300;
-    background-color: $color-white;
-    color: $color-black;
-
-    .mt-icon {
-      color: $color-darkgray-800;
-    }
+  & .mt-icon {
+    color: var(--color-icon-critical-default);
+  }
+}
 
-    &:hover {
-      background-color: $color-gray-100;
-      color: $color-darkgray-200;
-    }
+.mt-button--block {
+  display: block;
+  width: 100%;
+}
 
-    &:disabled {
-      background-color: $color-gray-50;
-      color: $color-gray-500;
-    }
-  }
+.mt-button--large {
+  padding-inline: 28px;
+  font-size: var(--font-size-2xs);
+  height: 3rem;
 
-  &.mt-button--block {
-    display: block;
-    width: 100%;
+  &.mt-button--square {
+    width: 48px;
   }
+}
 
-  &.mt-button--x-small {
-    padding-left: 10px;
-    padding-right: 10px;
-    font-size: var(--font-size-2xs);
-    line-height: 18px;
+.mt-button--default {
+  padding-inline: 15px;
+  height: 2.5rem;
 
-    &.mt-button--square {
-      width: 24px;
-    }
+  &.mt-button--square {
+    width: 2.5rem;
   }
+}
 
-  &.mt-button--small {
-    padding-left: 15px;
-    padding-right: 15px;
-    font-size: var(--font-size-2xs);
-    line-height: 26px;
+.mt-button--small {
+  padding-inline: 13px;
+  height: 2rem;
+  font-size: var(--font-size-2xs);
 
-    &.mt-button--square {
-      width: 32px;
-    }
+  &.mt-button--square {
+    width: 2rem;
   }
+}
 
-  &.mt-button--large {
-    padding-left: 28px;
-    padding-right: 28px;
-    line-height: 42px;
-    font-size: var(--font-size-2xs);
+.mt-button--x-small {
+  padding-inline: 10px;
+  font-size: var(--font-size-2xs);
 
-    &.mt-button--square {
-      width: 48px;
-    }
+  &.mt-button--square {
+    width: 1.5rem;
   }
+}
 
-  &.mt-button--square {
-    width: 40px;
-    padding-left: 0;
-    padding-right: 0;
-    text-align: center;
+.mt-button--square {
+  width: 40px;
+  padding: 0;
+  text-align: center;
+  aspect-ratio: 1 / 1;
 
-    .mt-button__content {
-      display: inline;
-    }
+  & .mt-button__content {
+    display: grid;
+    place-items: center;
   }
+}
 
-  .mt-button__loader {
-    border-radius: var(--border-radius-xs);
-  }
+.mt-button__loader {
+  border-radius: var(--border-radius-xs);
 }
 </style>
diff --git a/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue b/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue
index 01d662d57..7dace6518 100644
--- a/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue
+++ b/packages/component-library/src/components/layout/mt-empty-state/mt-empty-state.vue
@@ -20,6 +20,7 @@
       v-if="buttonText"
       class="mt-empty-state__button"
       variant="primary"
+      size="small"
       @click="$emit('button-click')"
     >
       <mt-icon name="solid-plus-circle-s" />
diff --git a/packages/component-library/src/components/overlay/mt-modal/mt-modal.stories.ts b/packages/component-library/src/components/overlay/mt-modal/mt-modal.stories.ts
index 6512e85c0..ff6e86564 100644
--- a/packages/component-library/src/components/overlay/mt-modal/mt-modal.stories.ts
+++ b/packages/component-library/src/components/overlay/mt-modal/mt-modal.stories.ts
@@ -28,7 +28,7 @@ export default {
 
     <template #footer>
       <div style='width: 100%; display: flex; justify-content: flex-end;'>
-        <mt-button variant='primary'>Continue</mt-button>
+        <mt-button variant='primary' size='small'>Continue</mt-button>
       </div>
     </template>
   </mt-modal>
diff --git a/packages/component-library/src/components/overlay/mt-popover/mt-popover.vue b/packages/component-library/src/components/overlay/mt-popover/mt-popover.vue
index fea05c194..90723035d 100644
--- a/packages/component-library/src/components/overlay/mt-popover/mt-popover.vue
+++ b/packages/component-library/src/components/overlay/mt-popover/mt-popover.vue
@@ -16,6 +16,7 @@
           v-if="currentView.name !== 'base'"
           class="mt-popover__back-button"
           variant="secondary"
+          size="small"
           @click="goViewBack"
         >
           <mt-icon name="solid-long-arrow-left" />
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.stories.ts b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.stories.ts
index 3c5fc966b..33f6db6b7 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.stories.ts
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.stories.ts
@@ -690,6 +690,7 @@ export default {
           <mt-button
               v-if="!args._remove_primary_toolbar_button_"
               variant="primary"
+              size="small"
               @click="reloadHandler"
           >
             Primary
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
index b64352841..5746e20e9 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/mt-data-table.vue
@@ -13,7 +13,7 @@
 
         <mt-popover v-if="filters.length > 0" title="Filters" :child-views="filterChildViews">
           <template #trigger="{ toggleFloatingUi }">
-            <mt-button variant="secondary" @click="toggleFloatingUi">
+            <mt-button variant="secondary" size="small" @click="toggleFloatingUi">
               <mt-icon name="solid-filter-s" aria-hidden="true" />
 
               <span>{{ $t("mt-data-table.filter.addFilter") }}</span>
diff --git a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
index a300ac5bf..a66f2d192 100644
--- a/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
+++ b/packages/component-library/src/components/table-and-list/mt-data-table/sub-components/mt-data-table-settings/mt-data-table-settings.vue
@@ -13,6 +13,7 @@
         }"
         variant="secondary"
         square
+        size="small"
         :aria-label="t('mt-data-table-settings.aria-toggle-table-settings')"
         @click="toggleFloatingUi"
       >