diff --git a/webapp/assets/_new/styles/mixins/buttonStates.scss b/webapp/assets/_new/styles/mixins/buttonStates.scss
index bce2fc927..b8e1509a6 100644
--- a/webapp/assets/_new/styles/mixins/buttonStates.scss
+++ b/webapp/assets/_new/styles/mixins/buttonStates.scss
@@ -12,10 +12,10 @@
   color: $main-color;
   border-color: $main-color;
   background-color: transparent;
-  transition: background-color 0.1s;
+  transition: background-color $duration-short;
 
   &:focus {
-    outline: 1px dashed $main-color;
+    outline: $border-size-base dashed $main-color;
   }
 
   &:enabled {
@@ -38,10 +38,6 @@
     cursor: default;
   }
 
-  &.--loading {
-    color: $color-neutral-80;
-  }
-
   @if $filled {
     color: $color-neutral-100;
     border-color: $main-color;
@@ -61,7 +57,7 @@
     }
 
     &:disabled {
-      color: $color-neutral-80;
+      color: $color-neutral-100;
       background-color: $color-neutral-60;
       border-color: $color-neutral-60;
     }
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 30a859980..29ba0286d 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -250,6 +250,14 @@ $size-avatar-base: 44px;
 $size-avatar-large: 64px;
 $size-avatar-x-large: 114px;
 
+/**
+ * @tokens Size Buttons
+ * @presenter Spacing
+ */
+
+ $size-button-base: 36px;
+ $size-button-small: 26px;
+
 /**
  * @tokens Shadow
  * @presenter Shadow
diff --git a/webapp/components/_new/generic/BaseButton/BaseButton.vue b/webapp/components/_new/generic/BaseButton/BaseButton.vue
index 3cbe38ab2..b616995c5 100644
--- a/webapp/components/_new/generic/BaseButton/BaseButton.vue
+++ b/webapp/components/_new/generic/BaseButton/BaseButton.vue
@@ -84,11 +84,11 @@ export default {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  height: 36px;
-  padding: 0 12px;
+  height: $size-button-base;
+  padding: 0 $space-x-small;
   vertical-align: bottom;
-  border: 1px solid;
-  border-radius: 6px;
+  border: $border-size-base solid;
+  border-radius: $border-radius-x-large;
   overflow: hidden;
   font-weight: $font-weight-bold;
   cursor: pointer;
@@ -106,7 +106,7 @@ export default {
   }
 
   &.--circle {
-    width: 36px;
+    width: $size-button-base;
     border-radius: 50%;
   }
 
@@ -115,21 +115,25 @@ export default {
   }
 
   &.--small {
-    height: 26px;
+    height: $size-button-small;
     font-size: $font-size-small;
 
     &.--circle {
-      width: 26px;
+      width: $size-button-small;
     }
   }
 
   &:not(.--icon-only) > .base-icon {
-    margin-right: 6px;
+    margin-right: $space-xx-small;
+  }
+
+  &:disabled.--loading {
+    color: $color-neutral-80;
   }
 
   > .loading-spinner {
     position: absolute;
-    height: 26px;
+    height: $size-button-small;
     color: $color-neutral-60;
   }