fix(VBtn): apply center ripple when using the icon prop (#19577)

fixes #17376
vuetifyjs · Apr 10, 2024 · e1e6065 · e1e6065
1 parent ddfe69a
commit e1e6065
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/packages/vuetify/src/components/VBtn/VBtn.tsx b/packages/vuetify/src/components/VBtn/VBtn.tsx
@@ -30,7 +30,7 @@ import { genOverlays, makeVariantProps, useVariant } from '@/composables/variant
 import { Ripple } from '@/directives/ripple'
 
 // Utilities
-import { computed } from 'vue'
+import { computed, withDirectives } from 'vue'
 import { genericComponent, propsFactory, useRender } from '@/util'
 
 // Types
@@ -89,8 +89,6 @@ export const makeVBtnProps = propsFactory({
 export const VBtn = genericComponent<VBtnSlots>()({
   name: 'VBtn',
 
-  directives: { Ripple },
-
   props: makeVBtnProps(),
 
   emits: {
@@ -163,7 +161,7 @@ export const VBtn = genericComponent<VBtnSlots>()({
         (!group || link.isActive?.value)
       )
 
-      return (
+      return withDirectives(
         <Tag
           type={ Tag === 'a' ? undefined : 'button' }
           class={[
@@ -203,11 +201,6 @@ export const VBtn = genericComponent<VBtnSlots>()({
           disabled={ isDisabled.value || undefined }
           href={ link.href.value }
           tabindex={ props.loading ? -1 : undefined }
-          v-ripple={[
-            !isDisabled.value && props.ripple,
-            null,
-            props.icon ? ['center'] : null,
-          ]}
           onClick={ onClick }
           value={ valueAttr.value }
         >
@@ -289,7 +282,13 @@ export const VBtn = genericComponent<VBtnSlots>()({
               )}
             </span>
           )}
-        </Tag>
+        </Tag>,
+        [[
+          Ripple,
+          !isDisabled.value && !!props.ripple,
+          '',
+          { center: !!props.icon },
+        ]]
       )
     })