diff --git a/lib/components/base/Button.vue b/lib/components/base/Button.vue
index a40b9fb76..80ab3e31d 100644
--- a/lib/components/base/Button.vue
+++ b/lib/components/base/Button.vue
@@ -8,7 +8,18 @@ const props = withDefaults(
     link?: string
     external: boolean
     action?: (event: MouseEvent) => void
-    color: 'default' | 'danger'| 'primary'| 'red'| 'orange'| 'green'| 'blue'| 'purple'| 'gray' | 'secondary' | 'highlight'
+    color:
+      | 'default'
+      | 'danger'
+      | 'primary'
+      | 'red'
+      | 'orange'
+      | 'green'
+      | 'blue'
+      | 'purple'
+      | 'gray'
+      | 'secondary'
+      | 'highlight'
     iconOnly: boolean
     large: boolean
     outline: boolean
@@ -42,21 +53,12 @@ const accentedButton = computed(() =>
     :class="{
       'icon-only': iconOnly,
       'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
       'btn-transparent': transparent,
       'btn-hover-filled': hoverFilled,
       'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
+      ['btn-' + props.color]: true,
     }"
     :to="link"
     :target="external ? '_blank' : '_self'"
@@ -71,21 +73,12 @@ const accentedButton = computed(() =>
     :class="{
       'icon-only': iconOnly,
       'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
       'btn-transparent': transparent,
       'btn-hover-filled': hoverFilled,
       'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
+      ['btn-' + props.color]: true,
     }"
     :href="link"
     :target="external ? '_blank' : '_self'"
@@ -100,21 +93,12 @@ const accentedButton = computed(() =>
     :class="{
       'icon-only': iconOnly,
       'btn-large': large,
-      'btn-danger': color === 'danger',
-      'btn-primary': color === 'primary',
-      'btn-secondary': color === 'secondary',
-      'btn-highlight': color === 'highlight',
-      'btn-red': color === 'red',
-      'btn-orange': color === 'orange',
-      'btn-green': color === 'green',
-      'btn-blue': color === 'blue',
-      'btn-purple': color === 'purple',
-      'btn-gray': color === 'gray',
       'btn-transparent': transparent,
       'btn-hover-filled': hoverFilled,
       'btn-hover-filled-only': hoverFilledOnly,
       'btn-outline': outline,
       'color-accent-contrast': accentedButton,
+      ['btn-' + props.color]: true,
     }"
     @click="action"
   >