bootstrap-vue-next · VividLemon · Apr 9, 2025 · Apr 9, 2025 · Apr 9, 2025
diff --git a/apps/docs/src/data/components/button.data.ts b/apps/docs/src/data/components/button.data.ts
@@ -55,7 +55,7 @@ export default {
                 default: 'secondary',
               },
             }),
-            ['bgVariant', 'size', 'tag', 'textVariant', 'variant']
+            ['size', 'tag', 'variant']
           ),
         } satisfies Record<
           Exclude<keyof BvnComponentProps['BButton'], keyof typeof linkProps>,

diff --git a/apps/docs/src/docs/components/button.md b/apps/docs/src/docs/components/button.md
@@ -67,12 +67,6 @@ padding and size of a button.
 
 **Tip:** remove the hover underline from a link variant button by setting `underline-opacity="0"`.
 
-::: warning Interactions between Variant props
-`BButton` implements `bg-variant` and `text-variant` to provide finer control of colors, they take
-precedence over the `variant` prop. See the
-[Color Variant Reference](/docs/reference/color-variants#variant-interactions) for details.
-:::
-
 ## Block level buttons
 
 Create responsive stacks of full-width, “block buttons” by wrapping the button(s) in a div and specifying

diff --git a/apps/docs/src/docs/reference/color-variants.md b/apps/docs/src/docs/reference/color-variants.md
@@ -245,6 +245,12 @@ $dark: $gray-900;
   </template>
 </HighlightCard>
 
+<script setup lang="ts">
+import {BCard} from 'bootstrap-vue-next'
+import HighlightCard from '../../components/HighlightCard.vue'
+
+</script>
+
 <style lang="scss">
 .bg-body-tertiary [class^="border"] {
   display: inline-block;

diff --git a/packages/bootstrap-vue-next/src/components/BButton/BButton.vue b/packages/bootstrap-vue-next/src/components/BButton/BButton.vue
@@ -41,8 +41,7 @@ import {useLinkClasses} from '../../composables/useLinkClasses'
 import {onKeyStroke} from '@vueuse/core'
 import type {BButtonProps} from '../../types/ComponentProps'
 import {useDefaults} from '../../composables/useDefaults'
-import type {BorderColorVariant, ColorExtendables, ColorVariant} from '../../types/ColorTypes'
-import {useColorVariantClasses} from '../../composables/useColorVariantClasses'
+import type {ColorVariant} from '../../types/ColorTypes'
 
 defineSlots<{
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -142,14 +141,10 @@ const linkValueClasses = useLinkClasses(
       : undefined),
   }))
 )
-const colorClasses = useColorVariantClasses(
-  props as ColorExtendables & {borderVariant?: BorderColorVariant | null}
-)
-
 const computedClasses = computed(() => [
   variantIsLinkType.value === true && computedLink.value === false
     ? linkValueClasses.value
-    : colorClasses.value,
+    : undefined,
   [`btn-${props.size}`],
   {
     [`btn-${props.variant}`]: props.variant !== null && variantIsLinkTypeSubset.value === false,

diff --git a/packages/bootstrap-vue-next/src/types/ComponentProps.ts b/packages/bootstrap-vue-next/src/types/ComponentProps.ts
@@ -837,9 +837,7 @@ type CustomLinkVariant = {
   [K in ColorVariant as `link-${K}`]: unknown
 }
 
-export interface BButtonProps
-  extends Omit<BLinkProps, 'variant'>,
-    Omit<ColorExtendables, 'variant'> {
+export interface BButtonProps extends Omit<BLinkProps, 'variant'> {
   loading?: boolean
   loadingFill?: boolean
   loadingText?: string