diff --git a/packages/coreui-vue/src/components/button/CButton.ts b/packages/coreui-vue/src/components/button/CButton.ts
index 70f7e90d..ebb3d8c0 100644
--- a/packages/coreui-vue/src/components/button/CButton.ts
+++ b/packages/coreui-vue/src/components/button/CButton.ts
@@ -93,8 +93,9 @@ export const CButton = defineComponent({
         {
           class: [
             'btn',
-            props.variant && props.color ? `btn-${props.variant}-${props.color}` : `btn-${props.variant}`,
             {
+              [`btn-${props.variant}-${props.color}`]: props.color && props.variant,
+              [`btn-${props.variant}`]: !props.color && props.variant,
               [`btn-${props.color}`]: props.color && !props.variant,
               [`btn-${props.size}`]: props.size,
               active: props.active,