From d429465730ee2140e013614655eb89a63d531380 Mon Sep 17 00:00:00 2001
From: BaptisteC <b.couavoux@hookto.fr>
Date: Tue, 7 Oct 2025 17:40:40 +0200
Subject: [PATCH] feat(variants): support custom background colors for btn and
 chip

---
 packages/vuetify/src/components/VBtn/VBtn.tsx   |  9 ++++++++-
 packages/vuetify/src/components/VChip/VChip.tsx | 10 +++++++++-
 packages/vuetify/src/composables/variant.tsx    | 14 +++++++++-----
 3 files changed, 26 insertions(+), 7 deletions(-)

diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
index 2fd288e784a..2bbdba61f07 100644
--- a/packages/vuetify/src/components/VBtn/VBtn.tsx
+++ b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -137,9 +137,15 @@ export const VBtn = genericComponent<VBtnSlots>()({
       return ({
         color: showColor ? color.value ?? props.baseColor : props.baseColor,
         variant: props.variant,
+        bgColor: props.bgColor,
       })
     })
-    const { colorClasses, colorStyles, variantClasses } = useVariant(variantProps)
+    const {
+      colorClasses,
+      colorStyles,
+      variantClasses,
+      backgroundColorClasses,
+      backgroundColorStyles, } = useVariant(variantProps)
 
     const isDisabled = computed(() => group?.disabled.value || props.disabled)
     const isElevated = toRef(() => {
@@ -208,6 +214,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
             themeClasses.value,
             borderClasses.value,
             colorClasses.value,
+            backgroundColorClasses.value,
             densityClasses.value,
             elevationClasses.value,
             loaderClasses.value,
diff --git a/packages/vuetify/src/components/VChip/VChip.tsx b/packages/vuetify/src/components/VChip/VChip.tsx
index c6edf8f5734..226a9b929b3 100644
--- a/packages/vuetify/src/components/VChip/VChip.tsx
+++ b/packages/vuetify/src/components/VChip/VChip.tsx
@@ -154,11 +154,18 @@ export const VChip = genericComponent<VChipSlots>()({
       },
     }))
 
-    const { colorClasses, colorStyles, variantClasses } = useVariant(() => {
+    const {
+      colorClasses,
+      colorStyles,
+      backgroundColorClasses,
+      backgroundColorStyles,
+      variantClasses
+    } = useVariant(() => {
       const showColor = !group || group.isSelected.value
       return ({
         color: showColor ? props.color ?? props.baseColor : props.baseColor,
         variant: props.variant,
+        bgColor: showColor ? props.bgColor : undefined,
       })
     })
 
@@ -202,6 +209,7 @@ export const VChip = genericComponent<VChipSlots>()({
             themeClasses.value,
             borderClasses.value,
             colorClasses.value,
+            backgroundColorClasses.value,
             densityClasses.value,
             elevationClasses.value,
             roundedClasses.value,
diff --git a/packages/vuetify/src/composables/variant.tsx b/packages/vuetify/src/composables/variant.tsx
index c8997c56bc4..caec73966b2 100644
--- a/packages/vuetify/src/composables/variant.tsx
+++ b/packages/vuetify/src/composables/variant.tsx
@@ -1,5 +1,5 @@
 // Composables
-import { useColor } from '@/composables/color'
+import { useBackgroundColor, useColor } from '@/composables/color'
 
 // Utilities
 import { toRef, toValue } from 'vue'
@@ -22,6 +22,7 @@ export type Variant = typeof allowedVariants[number]
 export interface VariantProps {
   color?: string
   variant: Variant
+  bgColor?: string
 }
 
 export function genOverlays (isClickable: boolean, name: string) {
@@ -41,23 +42,26 @@ export const makeVariantProps = propsFactory({
     default: 'elevated',
     validator: (v: any) => allowedVariants.includes(v),
   },
+  bgColor: String,
 }, 'variant')
 
 export function useVariant (
   props: MaybeRefOrGetter<VariantProps>,
   name = getCurrentInstanceName(),
 ) {
+  const {variant, color, bgColor} = toValue(props)
+
   const variantClasses = toRef(() => {
-    const { variant } = toValue(props)
     return `${name}--variant-${variant}`
   })
 
   const { colorClasses, colorStyles } = useColor(() => {
-    const { variant, color } = toValue(props)
     return {
-      [['elevated', 'flat'].includes(variant) ? 'background' : 'text']: color,
+      [['elevated'].includes(variant) ? 'background' : 'text']: color,
     }
   })
 
-  return { colorClasses, colorStyles, variantClasses }
+  const {backgroundColorClasses, backgroundColorStyles} = useBackgroundColor(bgColor)
+
+  return { colorClasses, colorStyles, backgroundColorClasses, backgroundColorStyles, variantClasses }
 }