diff --git a/packages/vant-cli/site/desktop/components/Content.vue b/packages/vant-cli/site/desktop/components/Content.vue
index efab1e91e..ec0ee2ff0 100644
--- a/packages/vant-cli/site/desktop/components/Content.vue
+++ b/packages/vant-cli/site/desktop/components/Content.vue
@@ -73,7 +73,7 @@ export default {
   > h6 {
     color: @van-doc-black;
     font-weight: normal;
-    line-height: 1.5;
+    line-height: 1.6;
 
     &[id] {
       cursor: pointer;
@@ -83,19 +83,19 @@ export default {
   > h3 {
     margin-bottom: 16px;
     font-weight: 600;
-    font-size: 19px;
+    font-size: 20px;
   }
 
   > h4 {
     margin: 24px 0 12px;
     font-weight: 600;
-    font-size: 16px;
+    font-size: 18px;
   }
 
   > h5 {
     margin: 24px 0 12px;
     font-weight: 600;
-    font-size: 15px;
+    font-size: 16px;
   }
 
   > p,
@@ -206,7 +206,6 @@ export default {
     font-family: inherit;
     font-weight: 600;
     word-break: keep-all;
-    background-color: @van-doc-background-color;
     border-radius: 4px;
     -webkit-font-smoothing: antialiased;
   }
@@ -248,13 +247,13 @@ export default {
 
     h1 {
       margin: 0 0 30px;
-      font-size: 30px;
+      font-size: 34px;
       cursor: default;
     }
 
     h2 {
       margin: 45px 0 20px;
-      font-size: 25px;
+      font-size: 26px;
     }
   }
 
diff --git a/packages/vant/src/action-sheet/ActionSheet.tsx b/packages/vant/src/action-sheet/ActionSheet.tsx
index b2d7ae8dd..23ee7cae8 100644
--- a/packages/vant/src/action-sheet/ActionSheet.tsx
+++ b/packages/vant/src/action-sheet/ActionSheet.tsx
@@ -8,6 +8,7 @@ import {
   makeArrayProp,
   makeStringProp,
   createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 
 // Components
@@ -73,7 +74,7 @@ export default defineComponent({
             {props.closeable && (
               <Icon
                 name={props.closeIcon}
-                class={bem('close')}
+                class={[bem('close'), HAPTICS_FEEDBACK]}
                 onClick={onCancel}
               />
             )}
diff --git a/packages/vant/src/action-sheet/README.md b/packages/vant/src/action-sheet/README.md
index 551d9558f..ee342726d 100644
--- a/packages/vant/src/action-sheet/README.md
+++ b/packages/vant/src/action-sheet/README.md
@@ -256,7 +256,6 @@ The component provides the following CSS variables, which can be used to customi
 | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - |
 | --van-action-sheet-close-icon-size | _22px_ | - |
 | --van-action-sheet-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-action-sheet-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - |
 | --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - |
 | --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - |
diff --git a/packages/vant/src/action-sheet/README.zh-CN.md b/packages/vant/src/action-sheet/README.zh-CN.md
index fa398bf36..23996337f 100644
--- a/packages/vant/src/action-sheet/README.zh-CN.md
+++ b/packages/vant/src/action-sheet/README.zh-CN.md
@@ -268,7 +268,6 @@ import type { ActionSheetProps, ActionSheetAction } from 'vant';
 | --van-action-sheet-subname-line-height | _var(--van-line-height-sm)_ | - |
 | --van-action-sheet-close-icon-size | _22px_ | - |
 | --van-action-sheet-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-action-sheet-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-action-sheet-close-icon-padding | _0 var(--van-padding-md)_ | - |
 | --van-action-sheet-cancel-text-color | _var(--van-gray-7)_ | - |
 | --van-action-sheet-cancel-padding-top | _var(--van-padding-xs)_ | - |
diff --git a/packages/vant/src/action-sheet/index.less b/packages/vant/src/action-sheet/index.less
index e561bd720..21f852d85 100644
--- a/packages/vant/src/action-sheet/index.less
+++ b/packages/vant/src/action-sheet/index.less
@@ -18,7 +18,6 @@
   --van-action-sheet-subname-line-height: @action-sheet-subname-line-height;
   --van-action-sheet-close-icon-size: @action-sheet-close-icon-size;
   --van-action-sheet-close-icon-color: @action-sheet-close-icon-color;
-  --van-action-sheet-close-icon-active-color: @action-sheet-close-icon-active-color;
   --van-action-sheet-close-icon-padding: @action-sheet-close-icon-padding;
   --van-action-sheet-cancel-text-color: @action-sheet-cancel-text-color;
   --van-action-sheet-cancel-padding-top: @action-sheet-cancel-padding-top;
@@ -129,9 +128,5 @@
     color: var(--van-action-sheet-close-icon-color);
     font-size: var(--van-action-sheet-close-icon-size);
     line-height: inherit;
-
-    &:active {
-      color: var(--van-action-sheet-close-icon-active-color);
-    }
   }
 }
diff --git a/packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap
index af1a4b4b0..4de50d3d3 100644
--- a/packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/action-sheet/test/__snapshots__/index.spec.ts.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should allow to custom close icon with closeIcon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close">
+<i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close van-haptics-feedback">
 </i>
 `;
 
@@ -22,7 +22,7 @@ exports[`should render default slot correctly 1`] = `
   <div class="van-popup van-popup--round van-popup--bottom van-safe-area-bottom van-action-sheet">
     <div class="van-action-sheet__header">
       Title
-      <i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close">
+      <i class="van-badge__wrapper van-icon van-icon-cross van-action-sheet__close van-haptics-feedback">
       </i>
     </div>
     <div class="van-action-sheet__content">
diff --git a/packages/vant/src/action-sheet/var.less b/packages/vant/src/action-sheet/var.less
index a0c4f5f54..81ae3fc51 100644
--- a/packages/vant/src/action-sheet/var.less
+++ b/packages/vant/src/action-sheet/var.less
@@ -16,7 +16,6 @@
 @action-sheet-subname-line-height: var(--van-line-height-sm);
 @action-sheet-close-icon-size: 22px;
 @action-sheet-close-icon-color: var(--van-gray-5);
-@action-sheet-close-icon-active-color: var(--van-gray-6);
 @action-sheet-close-icon-padding: 0 var(--van-padding-md);
 @action-sheet-cancel-text-color: var(--van-gray-7);
 @action-sheet-cancel-padding-top: var(--van-padding-xs);
diff --git a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
index 516dfa9e2..fb2b85d81 100644
--- a/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/area/test/__snapshots__/demo.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-area">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -13,7 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -180,7 +180,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-area">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -188,7 +188,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -346,7 +346,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-area">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -354,7 +354,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -425,7 +425,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-area">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -433,7 +433,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
diff --git a/packages/vant/src/area/test/__snapshots__/index.spec.js.snap b/packages/vant/src/area/test/__snapshots__/index.spec.js.snap
index 02a2c08d9..ba7b435e5 100644
--- a/packages/vant/src/area/test/__snapshots__/index.spec.js.snap
+++ b/packages/vant/src/area/test/__snapshots__/index.spec.js.snap
@@ -4,12 +4,12 @@ exports[`should render columns-top、columns-bottom slot correctly 1`] = `
 <div class="van-picker van-area">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -52,13 +52,13 @@ exports[`should render columns-top、columns-bottom slot correctly 1`] = `
 exports[`should render title slot correctly 1`] = `
 <div class="van-picker__toolbar">
   <button type="button"
-          class="van-picker__cancel"
+          class="van-picker__cancel van-haptics-feedback"
   >
     Cancel
   </button>
   Custom Title
   <button type="button"
-          class="van-picker__confirm"
+          class="van-picker__confirm van-haptics-feedback"
   >
     Confirm
   </button>
@@ -69,12 +69,12 @@ exports[`should render two columns when columns-num prop is two 1`] = `
 <div class="van-picker van-area">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
diff --git a/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap
index 6c7201065..313e618ca 100644
--- a/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/calendar/test/__snapshots__/index.spec.ts.snap
@@ -633,7 +633,7 @@ exports[`popup wrapper 2`] = `
         </button>
       </div>
     </div>
-    <i class="van-badge__wrapper van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right"
+    <i class="van-badge__wrapper van-icon van-icon-cross van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"
        role="button"
        tabindex="0"
     >
diff --git a/packages/vant/src/cascader/Cascader.tsx b/packages/vant/src/cascader/Cascader.tsx
index 6c72f845f..7e61d423b 100644
--- a/packages/vant/src/cascader/Cascader.tsx
+++ b/packages/vant/src/cascader/Cascader.tsx
@@ -13,6 +13,7 @@ import {
   makeArrayProp,
   makeStringProp,
   createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 
 // Components
@@ -192,7 +193,7 @@ export default defineComponent({
         {props.closeable ? (
           <Icon
             name={props.closeIcon}
-            class={bem('close-icon')}
+            class={[bem('close-icon'), HAPTICS_FEEDBACK]}
             onClick={onClose}
           />
         ) : null}
diff --git a/packages/vant/src/cascader/README.md b/packages/vant/src/cascader/README.md
index 7b5aa0429..b13b16450 100644
--- a/packages/vant/src/cascader/README.md
+++ b/packages/vant/src/cascader/README.md
@@ -306,7 +306,6 @@ The component provides the following CSS variables, which can be used to customi
 | --van-cascader-title-line-height | _20px_ | - |
 | --van-cascader-close-icon-size | _22px_ | - |
 | --van-cascader-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-cascader-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-cascader-selected-icon-size | _18px_ | - |
 | --van-cascader-tabs-height | _48px_ | - |
 | --van-cascader-active-color | _var(--van-danger-color)_ | - |
diff --git a/packages/vant/src/cascader/README.zh-CN.md b/packages/vant/src/cascader/README.zh-CN.md
index 1aa92d8b7..e697f3e3d 100644
--- a/packages/vant/src/cascader/README.zh-CN.md
+++ b/packages/vant/src/cascader/README.zh-CN.md
@@ -318,7 +318,6 @@ import type { CascaderProps, CascaderOption, CascaderFieldNames } from 'vant';
 | --van-cascader-title-line-height | _20px_ | - |
 | --van-cascader-close-icon-size | _22px_ | - |
 | --van-cascader-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-cascader-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-cascader-selected-icon-size | _18px_ | - |
 | --van-cascader-tabs-height | _48px_ | - |
 | --van-cascader-active-color | _var(--van-danger-color)_ | - |
diff --git a/packages/vant/src/cascader/index.less b/packages/vant/src/cascader/index.less
index 4f2daa4e9..02f2b19d5 100644
--- a/packages/vant/src/cascader/index.less
+++ b/packages/vant/src/cascader/index.less
@@ -7,7 +7,6 @@
   --van-cascader-title-line-height: @cascader-title-line-height;
   --van-cascader-close-icon-size: @cascader-close-icon-size;
   --van-cascader-close-icon-color: @cascader-close-icon-color;
-  --van-cascader-close-icon-active-color: @cascader-close-icon-active-color;
   --van-cascader-selected-icon-size: @cascader-selected-icon-size;
   --van-cascader-tabs-height: @cascader-tabs-height;
   --van-cascader-active-color: @cascader-active-color;
@@ -35,10 +34,6 @@
   &__close-icon {
     color: var(--van-cascader-close-icon-color);
     font-size: var(--van-cascader-close-icon-size);
-
-    &:active {
-      color: var(--van-cascader-close-icon-active-color);
-    }
   }
 
   &__tabs {
diff --git a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
index 7190d9610..c1459b0ac 100644
--- a/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/cascader/test/__snapshots__/index.spec.ts.snap
@@ -21,7 +21,7 @@ exports[` should allow more custom content 1`] = `
 `;
 
 exports[`should change close icon when using close-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon">
+<i class="van-badge__wrapper van-icon van-icon-success van-cascader__close-icon van-haptics-feedback">
 </i>
 `;
 
@@ -52,7 +52,7 @@ exports[`should update tabs when previous tab is clicked 1`] = `
   <div class="van-cascader__header">
     <h2 class="van-cascader__title">
     </h2>
-    <i class="van-badge__wrapper van-icon van-icon-cross van-cascader__close-icon">
+    <i class="van-badge__wrapper van-icon van-icon-cross van-cascader__close-icon van-haptics-feedback">
     </i>
   </div>
   <div class="van-tabs van-tabs--line van-cascader__tabs">
diff --git a/packages/vant/src/cascader/var.less b/packages/vant/src/cascader/var.less
index ddaf6b47b..5d631841b 100644
--- a/packages/vant/src/cascader/var.less
+++ b/packages/vant/src/cascader/var.less
@@ -6,7 +6,6 @@
 @cascader-title-line-height: 20px;
 @cascader-close-icon-size: 22px;
 @cascader-close-icon-color: var(--van-gray-5);
-@cascader-close-icon-active-color: var(--van-gray-6);
 @cascader-selected-icon-size: 18px;
 @cascader-tabs-height: 48px;
 @cascader-active-color: var(--van-danger-color);
diff --git a/packages/vant/src/config-provider/README.md b/packages/vant/src/config-provider/README.md
index d961abd5e..7a584151a 100644
--- a/packages/vant/src/config-provider/README.md
+++ b/packages/vant/src/config-provider/README.md
@@ -159,7 +159,7 @@ There are all **Basic Variables** below, for component CSS Variables, please ref
 --van-text-color-secondary: var(--van-gray-6);
 --van-text-link-color: #576b95;
 --van-active-color: var(--van-gray-2);
---van-active-opacity: 0.7;
+--van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;
 --van-background-color: var(--van-gray-1);
 --van-background-color-light: var(--van-white);
diff --git a/packages/vant/src/config-provider/README.zh-CN.md b/packages/vant/src/config-provider/README.zh-CN.md
index 4e8fdf3aa..72d2c4d7a 100644
--- a/packages/vant/src/config-provider/README.zh-CN.md
+++ b/packages/vant/src/config-provider/README.zh-CN.md
@@ -161,7 +161,7 @@ Vant 中的 CSS 变量分为 **基础变量** 和 **组件变量**。组件变
 --van-text-color-secondary: var(--van-gray-6);
 --van-text-link-color: #576b95;
 --van-active-color: var(--van-gray-2);
---van-active-opacity: 0.7;
+--van-active-opacity: 0.6;
 --van-disabled-opacity: 0.5;
 --van-background-color: var(--van-gray-1);
 --van-background-color-light: var(--van-white);
diff --git a/packages/vant/src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap b/packages/vant/src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap
index d91ccc28b..b954bb734 100644
--- a/packages/vant/src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap
+++ b/packages/vant/src/datetime-picker/test/__snapshots__/date-picker.spec.ts.snap
@@ -4,12 +4,12 @@ exports[`filter prop 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -297,12 +297,12 @@ exports[`formatter prop 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
diff --git a/packages/vant/src/datetime-picker/test/__snapshots__/datetime-picker.spec.tsx.snap b/packages/vant/src/datetime-picker/test/__snapshots__/datetime-picker.spec.tsx.snap
index fc667abdc..3b614dcc8 100644
--- a/packages/vant/src/datetime-picker/test/__snapshots__/datetime-picker.spec.tsx.snap
+++ b/packages/vant/src/datetime-picker/test/__snapshots__/datetime-picker.spec.tsx.snap
@@ -3,13 +3,13 @@
 exports[`should render title slot correctly 1`] = `
 <div class="van-picker__toolbar">
   <button type="button"
-          class="van-picker__cancel"
+          class="van-picker__cancel van-haptics-feedback"
   >
     Cancel
   </button>
   Custom title
   <button type="button"
-          class="van-picker__confirm"
+          class="van-picker__confirm van-haptics-feedback"
   >
     Confirm
   </button>
@@ -20,12 +20,12 @@ exports[`time type 1`] = `
 <div class="van-picker van-datetime-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
diff --git a/packages/vant/src/datetime-picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/datetime-picker/test/__snapshots__/demo.spec.ts.snap
index 8270a2d00..024c2f429 100644
--- a/packages/vant/src/datetime-picker/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/datetime-picker/test/__snapshots__/demo.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-datetime-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -13,7 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
         Choose Date
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -495,7 +495,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-datetime-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -503,7 +503,7 @@ exports[`should render demo and match snapshot 1`] = `
         Choose Year-Month
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -700,7 +700,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-datetime-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -708,7 +708,7 @@ exports[`should render demo and match snapshot 1`] = `
         Choose Month-Day
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -1130,7 +1130,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-datetime-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -1138,7 +1138,7 @@ exports[`should render demo and match snapshot 1`] = `
         Choose Time
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -1812,7 +1812,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-datetime-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -1820,7 +1820,7 @@ exports[`should render demo and match snapshot 1`] = `
         Choose DateTime
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -3070,7 +3070,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-datetime-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -3078,7 +3078,7 @@ exports[`should render demo and match snapshot 1`] = `
         Choose DateHour
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -3782,7 +3782,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-datetime-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -3790,7 +3790,7 @@ exports[`should render demo and match snapshot 1`] = `
         Option Filter
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -4149,7 +4149,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker van-datetime-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -4157,7 +4157,7 @@ exports[`should render demo and match snapshot 1`] = `
         Columns Order
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
diff --git a/packages/vant/src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap b/packages/vant/src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap
index 3a8e0ebad..5a51b2f41 100644
--- a/packages/vant/src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap
+++ b/packages/vant/src/datetime-picker/test/__snapshots__/time-picker.spec.tsx.snap
@@ -4,12 +4,12 @@ exports[`filter prop 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -144,12 +144,12 @@ exports[`format initial value 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -221,12 +221,12 @@ exports[`formatter prop 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -361,12 +361,12 @@ exports[`max-hour & max-minute 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
diff --git a/packages/vant/src/dropdown-menu/DropdownMenu.tsx b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
index f0e74dc80..8890a16a6 100644
--- a/packages/vant/src/dropdown-menu/DropdownMenu.tsx
+++ b/packages/vant/src/dropdown-menu/DropdownMenu.tsx
@@ -15,6 +15,7 @@ import {
   makeStringProp,
   makeNumericProp,
   createNamespace,
+  HAPTICS_FEEDBACK,
   ComponentInstance,
 } from '../utils';
 
@@ -115,7 +116,7 @@ export default defineComponent({
         <div
           role="button"
           tabindex={disabled ? -1 : 0}
-          class={bem('item', { disabled })}
+          class={[bem('item', { disabled }), { [HAPTICS_FEEDBACK]: !disabled }]}
           onClick={() => {
             if (!disabled) {
               toggleItem(index);
diff --git a/packages/vant/src/dropdown-menu/index.less b/packages/vant/src/dropdown-menu/index.less
index 628fb46ed..c5ac3aae7 100644
--- a/packages/vant/src/dropdown-menu/index.less
+++ b/packages/vant/src/dropdown-menu/index.less
@@ -38,15 +38,7 @@
     min-width: 0; // hack for flex ellipsis
     cursor: pointer;
 
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
-
     &--disabled {
-      &:active {
-        opacity: 1;
-      }
-
       .van-dropdown-menu__title {
         color: var(--van-dropdown-menu-title-disabled-text-color);
       }
diff --git a/packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
index 2aaca74b1..10c3b16f0 100644
--- a/packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/dropdown-menu/test/__snapshots__/demo.spec.ts.snap
@@ -6,7 +6,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-dropdown-menu__bar">
       <div role="button"
            tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
       >
         <span class="van-dropdown-menu__title">
           <div class="van-ellipsis">
@@ -16,7 +16,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="button"
            tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
       >
         <span class="van-dropdown-menu__title">
           <div class="van-ellipsis">
@@ -48,7 +48,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-dropdown-menu__bar">
       <div role="button"
            tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
       >
         <span class="van-dropdown-menu__title">
           <div class="van-ellipsis">
@@ -58,7 +58,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="button"
            tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
       >
         <span class="van-dropdown-menu__title">
           <div class="van-ellipsis">
@@ -90,7 +90,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-dropdown-menu__bar">
       <div role="button"
            tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
       >
         <span class="van-dropdown-menu__title">
           <div class="van-ellipsis">
@@ -100,7 +100,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="button"
            tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
       >
         <span class="van-dropdown-menu__title">
           <div class="van-ellipsis">
@@ -132,7 +132,7 @@ exports[`should render demo and match snapshot 1`] = `
     <div class="van-dropdown-menu__bar">
       <div role="button"
            tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
       >
         <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
           <div class="van-ellipsis">
@@ -142,7 +142,7 @@ exports[`should render demo and match snapshot 1`] = `
       </div>
       <div role="button"
            tabindex="0"
-           class="van-dropdown-menu__item"
+           class="van-dropdown-menu__item van-haptics-feedback"
       >
         <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
           <div class="van-ellipsis">
diff --git a/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
index e0966e274..d7f76204b 100644
--- a/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/dropdown-menu/test/__snapshots__/index.spec.tsx.snap
@@ -5,7 +5,7 @@ exports[`click option 1`] = `
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -15,7 +15,7 @@ exports[`click option 1`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -82,7 +82,7 @@ exports[`close-on-click-outside 1`] = `
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -92,7 +92,7 @@ exports[`close-on-click-outside 1`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -159,7 +159,7 @@ exports[`destroy one item 1`] = `
   <div class="van-dropdown-menu__bar">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -184,7 +184,7 @@ exports[`direction up 1`] = `
   <div class="van-dropdown-menu__bar">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
         <div class="van-ellipsis">
@@ -194,7 +194,7 @@ exports[`direction up 1`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
         <div class="van-ellipsis">
@@ -227,7 +227,7 @@ exports[`direction up 2`] = `
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title van-dropdown-menu__title--active">
         <div class="van-ellipsis">
@@ -237,7 +237,7 @@ exports[`direction up 2`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title van-dropdown-menu__title--down">
         <div class="van-ellipsis">
@@ -304,7 +304,7 @@ exports[`disable close-on-click-outside 1`] = `
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
         <div class="van-ellipsis">
@@ -314,7 +314,7 @@ exports[`disable close-on-click-outside 1`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -406,7 +406,7 @@ exports[`render option icon 1`] = `
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
         <div class="van-ellipsis">
@@ -416,7 +416,7 @@ exports[`render option icon 1`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -487,7 +487,7 @@ exports[`show dropdown item 1`] = `
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
         <div class="van-ellipsis">
@@ -497,7 +497,7 @@ exports[`show dropdown item 1`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -564,7 +564,7 @@ exports[`show dropdown item 2`] = `
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -574,7 +574,7 @@ exports[`show dropdown item 2`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title van-dropdown-menu__title--down van-dropdown-menu__title--active">
         <div class="van-ellipsis">
@@ -675,7 +675,7 @@ exports[`show dropdown item 3`] = `
   <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -685,7 +685,7 @@ exports[`show dropdown item 3`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -786,7 +786,7 @@ exports[`title prop 1`] = `
   <div class="van-dropdown-menu__bar">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -796,7 +796,7 @@ exports[`title prop 1`] = `
     </div>
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
@@ -829,7 +829,7 @@ exports[`title slot 1`] = `
   <div class="van-dropdown-menu__bar">
     <div role="button"
          tabindex="0"
-         class="van-dropdown-menu__item"
+         class="van-dropdown-menu__item van-haptics-feedback"
     >
       <span class="van-dropdown-menu__title">
         <div class="van-ellipsis">
diff --git a/packages/vant/src/image-preview/ImagePreview.tsx b/packages/vant/src/image-preview/ImagePreview.tsx
index 8e076dcb9..1c82d2734 100644
--- a/packages/vant/src/image-preview/ImagePreview.tsx
+++ b/packages/vant/src/image-preview/ImagePreview.tsx
@@ -21,6 +21,7 @@ import {
   makeNumericProp,
   callInterceptor,
   createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 
 // Composables
@@ -165,7 +166,10 @@ export default defineComponent({
           <Icon
             role="button"
             name={props.closeIcon}
-            class={bem('close-icon', props.closeIconPosition)}
+            class={[
+              bem('close-icon', props.closeIconPosition),
+              HAPTICS_FEEDBACK,
+            ]}
             onClick={emitClose}
           />
         );
diff --git a/packages/vant/src/image-preview/README.md b/packages/vant/src/image-preview/README.md
index 12bdd27ba..ea9519612 100644
--- a/packages/vant/src/image-preview/README.md
+++ b/packages/vant/src/image-preview/README.md
@@ -245,6 +245,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-image-preview-overlay-background-color | _rgba(0, 0, 0, 0.9)_ | - |
 | --van-image-preview-close-icon-size | _22px_ | - |
 | --van-image-preview-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-image-preview-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-image-preview-close-icon-margin | _var(--van-padding-md)_ | - |
 | --van-image-preview-close-icon-z-index | _1_ | - |
diff --git a/packages/vant/src/image-preview/README.zh-CN.md b/packages/vant/src/image-preview/README.zh-CN.md
index 696e63002..4036e471e 100644
--- a/packages/vant/src/image-preview/README.zh-CN.md
+++ b/packages/vant/src/image-preview/README.zh-CN.md
@@ -297,7 +297,6 @@ imagePreviewRef.value?.swipeTo(1);
 | --van-image-preview-overlay-background-color | _rgba(0, 0, 0, 0.9)_ | - |
 | --van-image-preview-close-icon-size | _22px_ | - |
 | --van-image-preview-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-image-preview-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-image-preview-close-icon-margin | _var(--van-padding-md)_ | - |
 | --van-image-preview-close-icon-z-index | _1_ | - |
 
diff --git a/packages/vant/src/image-preview/index.less b/packages/vant/src/image-preview/index.less
index d80f12967..d91124545 100644
--- a/packages/vant/src/image-preview/index.less
+++ b/packages/vant/src/image-preview/index.less
@@ -8,7 +8,6 @@
   --van-image-preview-overlay-background-color: @image-preview-overlay-background-color;
   --van-image-preview-close-icon-size: @image-preview-close-icon-size;
   --van-image-preview-close-icon-color: @image-preview-close-icon-color;
-  --van-image-preview-close-icon-active-color: @image-preview-close-icon-active-color;
   --van-image-preview-close-icon-margin: @image-preview-close-icon-margin;
   --van-image-preview-close-icon-z-index: @image-preview-close-icon-z-index;
 }
@@ -91,10 +90,6 @@
     font-size: var(--van-image-preview-close-icon-size);
     cursor: pointer;
 
-    &:active {
-      color: var(--van-image-preview-close-icon-active-color);
-    }
-
     &--top-left {
       top: var(--van-image-preview-close-icon-margin);
       left: var(--van-image-preview-close-icon-margin);
diff --git a/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap
index c717c4639..af5819660 100644
--- a/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/image-preview/test/__snapshots__/index.spec.ts.snap
@@ -27,14 +27,14 @@ exports[`render image 1`] = `
 `;
 
 exports[`should change close icon position when using close-icon-position prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-clear van-image-preview__close-icon van-image-preview__close-icon--top-left"
+<i class="van-badge__wrapper van-icon van-icon-clear van-image-preview__close-icon van-image-preview__close-icon--top-left van-haptics-feedback"
    role="button"
 >
 </i>
 `;
 
 exports[`should change close icon when using close-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-success van-image-preview__close-icon van-image-preview__close-icon--top-right"
+<i class="van-badge__wrapper van-icon van-icon-success van-image-preview__close-icon van-image-preview__close-icon--top-right van-haptics-feedback"
    role="button"
 >
 </i>
diff --git a/packages/vant/src/image-preview/var.less b/packages/vant/src/image-preview/var.less
index a6cb62cd5..03434365c 100644
--- a/packages/vant/src/image-preview/var.less
+++ b/packages/vant/src/image-preview/var.less
@@ -7,6 +7,5 @@
 @image-preview-overlay-background-color: rgba(0, 0, 0, 0.9);
 @image-preview-close-icon-size: 22px;
 @image-preview-close-icon-color: var(--van-gray-5);
-@image-preview-close-icon-active-color: var(--van-gray-6);
 @image-preview-close-icon-margin: var(--van-padding-md);
 @image-preview-close-icon-z-index: 1;
diff --git a/packages/vant/src/nav-bar/NavBar.tsx b/packages/vant/src/nav-bar/NavBar.tsx
index d66ea0d1c..3469df1e0 100644
--- a/packages/vant/src/nav-bar/NavBar.tsx
+++ b/packages/vant/src/nav-bar/NavBar.tsx
@@ -7,6 +7,7 @@ import {
   BORDER_BOTTOM,
   getZIndexStyle,
   createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 
 // Composables
@@ -82,7 +83,10 @@ export default defineComponent({
         >
           <div class={bem('content')}>
             {hasLeft && (
-              <div class={bem('left')} onClick={onClickLeft}>
+              <div
+                class={[bem('left'), HAPTICS_FEEDBACK]}
+                onClick={onClickLeft}
+              >
                 {renderLeft()}
               </div>
             )}
@@ -90,7 +94,10 @@ export default defineComponent({
               {slots.title ? slots.title() : title}
             </div>
             {hasRight && (
-              <div class={bem('right')} onClick={onClickRight}>
+              <div
+                class={[bem('right'), HAPTICS_FEEDBACK]}
+                onClick={onClickRight}
+              >
                 {renderRight()}
               </div>
             )}
diff --git a/packages/vant/src/nav-bar/index.less b/packages/vant/src/nav-bar/index.less
index 11f327f15..3a4e664fa 100644
--- a/packages/vant/src/nav-bar/index.less
+++ b/packages/vant/src/nav-bar/index.less
@@ -65,10 +65,6 @@
     padding: 0 var(--van-padding-md);
     font-size: var(--van-font-size-md);
     cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
   }
 
   &__left {
diff --git a/packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap
index 70048081d..8f5a99324 100644
--- a/packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/nav-bar/test/__snapshots__/demo.spec.ts.snap
@@ -13,7 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-nav-bar van-hairline--bottom">
     <div class="van-nav-bar__content">
-      <div class="van-nav-bar__left">
+      <div class="van-nav-bar__left van-haptics-feedback">
         <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
         </i>
         <span class="van-nav-bar__text">
@@ -29,7 +29,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-nav-bar van-hairline--bottom">
     <div class="van-nav-bar__content">
-      <div class="van-nav-bar__left">
+      <div class="van-nav-bar__left van-haptics-feedback">
         <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
         </i>
         <span class="van-nav-bar__text">
@@ -39,7 +39,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-nav-bar__title van-ellipsis">
         Title
       </div>
-      <div class="van-nav-bar__right">
+      <div class="van-nav-bar__right van-haptics-feedback">
         <span class="van-nav-bar__text">
           Button
         </span>
@@ -50,7 +50,7 @@ exports[`should render demo and match snapshot 1`] = `
 <div>
   <div class="van-nav-bar van-hairline--bottom">
     <div class="van-nav-bar__content">
-      <div class="van-nav-bar__left">
+      <div class="van-nav-bar__left van-haptics-feedback">
         <i class="van-badge__wrapper van-icon van-icon-arrow-left van-nav-bar__arrow">
         </i>
         <span class="van-nav-bar__text">
@@ -60,7 +60,7 @@ exports[`should render demo and match snapshot 1`] = `
       <div class="van-nav-bar__title van-ellipsis">
         Title
       </div>
-      <div class="van-nav-bar__right">
+      <div class="van-nav-bar__right van-haptics-feedback">
         <i class="van-badge__wrapper van-icon van-icon-search"
            style="font-size: 18px;"
         >
diff --git a/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap
index 8229574e7..09d8a7d95 100644
--- a/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/nav-bar/test/__snapshots__/index.spec.ts.snap
@@ -1,13 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should render left slot correctly 1`] = `
-<div class="van-nav-bar__left">
+<div class="van-nav-bar__left van-haptics-feedback">
   Custom Left
 </div>
 `;
 
 exports[`should render left slot correctly 2`] = `
-<div class="van-nav-bar__right">
+<div class="van-nav-bar__right van-haptics-feedback">
   Custom Right
 </div>
 `;
diff --git a/packages/vant/src/number-keyboard/NumberKeyboard.tsx b/packages/vant/src/number-keyboard/NumberKeyboard.tsx
index 825c0ffef..f32bca960 100644
--- a/packages/vant/src/number-keyboard/NumberKeyboard.tsx
+++ b/packages/vant/src/number-keyboard/NumberKeyboard.tsx
@@ -20,6 +20,7 @@ import {
   makeNumericProp,
   stopPropagation,
   createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 
 // Composables
@@ -181,7 +182,11 @@ export default defineComponent({
           {leftSlot && <span class={bem('title-left')}>{leftSlot()}</span>}
           {title && <h2 class={bem('title')}>{title}</h2>}
           {showClose && (
-            <button type="button" class={bem('close')} onClick={onClose}>
+            <button
+              type="button"
+              class={[bem('close'), HAPTICS_FEEDBACK]}
+              onClick={onClose}
+            >
               {closeButtonText}
             </button>
           )}
diff --git a/packages/vant/src/number-keyboard/index.less b/packages/vant/src/number-keyboard/index.less
index 8fbdf476d..b42d69e6f 100644
--- a/packages/vant/src/number-keyboard/index.less
+++ b/packages/vant/src/number-keyboard/index.less
@@ -75,10 +75,6 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
   }
 
   &__sidebar {
diff --git a/packages/vant/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap
index 6acbc6a49..6c7864012 100644
--- a/packages/vant/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/number-keyboard/test/__snapshots__/demo.spec.ts.snap
@@ -341,7 +341,7 @@ exports[`should render demo and match snapshot 1`] = `
   >
     <div class="van-number-keyboard__header">
       <button type="button"
-              class="van-number-keyboard__close"
+              class="van-number-keyboard__close van-haptics-feedback"
       >
         Close
       </button>
@@ -464,7 +464,7 @@ exports[`should render demo and match snapshot 1`] = `
         Keyboard Title
       </h2>
       <button type="button"
-              class="van-number-keyboard__close"
+              class="van-number-keyboard__close van-haptics-feedback"
       >
         Close
       </button>
diff --git a/packages/vant/src/number-keyboard/test/__snapshots__/index.spec.ts.snap b/packages/vant/src/number-keyboard/test/__snapshots__/index.spec.ts.snap
index 36bedb46c..72e23db66 100644
--- a/packages/vant/src/number-keyboard/test/__snapshots__/index.spec.ts.snap
+++ b/packages/vant/src/number-keyboard/test/__snapshots__/index.spec.ts.snap
@@ -24,7 +24,7 @@ exports[`should render title and close button correctly 1`] = `
     Title
   </h2>
   <button type="button"
-          class="van-number-keyboard__close"
+          class="van-number-keyboard__close van-haptics-feedback"
   >
     Close
   </button>
diff --git a/packages/vant/src/picker/Picker.tsx b/packages/vant/src/picker/Picker.tsx
index 8b4fa1dc4..b084dbc50 100644
--- a/packages/vant/src/picker/Picker.tsx
+++ b/packages/vant/src/picker/Picker.tsx
@@ -17,6 +17,7 @@ import {
   makeStringProp,
   makeNumericProp,
   createNamespace,
+  HAPTICS_FEEDBACK,
   BORDER_UNSET_TOP_BOTTOM,
 } from '../utils';
 
@@ -298,7 +299,11 @@ export default defineComponent({
     const renderCancel = () => {
       const text = props.cancelButtonText || t('cancel');
       return (
-        <button type="button" class={bem('cancel')} onClick={cancel}>
+        <button
+          type="button"
+          class={[bem('cancel'), HAPTICS_FEEDBACK]}
+          onClick={cancel}
+        >
           {slots.cancel ? slots.cancel() : text}
         </button>
       );
@@ -307,7 +312,11 @@ export default defineComponent({
     const renderConfirm = () => {
       const text = props.confirmButtonText || t('confirm');
       return (
-        <button type="button" class={bem('confirm')} onClick={confirm}>
+        <button
+          type="button"
+          class={[bem('confirm'), HAPTICS_FEEDBACK]}
+          onClick={confirm}
+        >
           {slots.confirm ? slots.confirm() : text}
         </button>
       );
diff --git a/packages/vant/src/picker/index.less b/packages/vant/src/picker/index.less
index 118d3273b..603af7d7d 100644
--- a/packages/vant/src/picker/index.less
+++ b/packages/vant/src/picker/index.less
@@ -37,10 +37,6 @@
     background-color: transparent;
     border: none;
     cursor: pointer;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
   }
 
   &__confirm {
diff --git a/packages/vant/src/picker/test/__snapshots__/cascade.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/cascade.spec.ts.snap
index 4c66459a4..0fc3969c5 100644
--- a/packages/vant/src/picker/test/__snapshots__/cascade.spec.ts.snap
+++ b/packages/vant/src/picker/test/__snapshots__/cascade.spec.ts.snap
@@ -16,12 +16,12 @@ exports[`should move to first option when all options are disabled 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -93,12 +93,12 @@ exports[`should move to next option when default option is disabled 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
diff --git a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
index 5c77a051f..605d2856f 100644
--- a/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
+++ b/packages/vant/src/picker/test/__snapshots__/demo.spec.ts.snap
@@ -5,7 +5,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -13,7 +13,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -87,7 +87,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -95,7 +95,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -169,7 +169,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -177,7 +177,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -284,7 +284,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -292,7 +292,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -387,7 +387,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -395,7 +395,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -451,7 +451,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -459,7 +459,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -557,7 +557,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -565,7 +565,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
@@ -704,7 +704,7 @@ exports[`should render demo and match snapshot 1`] = `
   <div class="van-picker">
     <div class="van-picker__toolbar">
       <button type="button"
-              class="van-picker__cancel"
+              class="van-picker__cancel van-haptics-feedback"
       >
         Cancel
       </button>
@@ -712,7 +712,7 @@ exports[`should render demo and match snapshot 1`] = `
         Title
       </div>
       <button type="button"
-              class="van-picker__confirm"
+              class="van-picker__confirm van-haptics-feedback"
       >
         Confirm
       </button>
diff --git a/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap b/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap
index ccda34943..01a80faf5 100644
--- a/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap
+++ b/packages/vant/src/picker/test/__snapshots__/index.spec.tsx.snap
@@ -148,12 +148,12 @@ exports[`columns-top、columns-bottom prop 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -185,12 +185,12 @@ exports[`not allow html 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -229,12 +229,12 @@ exports[`render option slot with object columns 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -282,12 +282,12 @@ exports[`render option slot with simple columns 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -331,12 +331,12 @@ exports[`set rem item-height 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -384,12 +384,12 @@ exports[`should render confirm/cancel slot correctly 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Custom Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Custom Confirm
     </button>
@@ -419,13 +419,13 @@ exports[`should render title slot correctly 1`] = `
 <div class="van-picker">
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     Custom title
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
@@ -499,12 +499,12 @@ exports[`toolbar-position prop 1`] = `
   </div>
   <div class="van-picker__toolbar">
     <button type="button"
-            class="van-picker__cancel"
+            class="van-picker__cancel van-haptics-feedback"
     >
       Cancel
     </button>
     <button type="button"
-            class="van-picker__confirm"
+            class="van-picker__confirm van-haptics-feedback"
     >
       Confirm
     </button>
diff --git a/packages/vant/src/popup/Popup.tsx b/packages/vant/src/popup/Popup.tsx
index d81daf252..485e5c404 100644
--- a/packages/vant/src/popup/Popup.tsx
+++ b/packages/vant/src/popup/Popup.tsx
@@ -21,6 +21,7 @@ import {
   makeStringProp,
   callInterceptor,
   createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 
 // Composables
@@ -164,7 +165,10 @@ export default defineComponent({
             role="button"
             tabindex={0}
             name={props.closeIcon}
-            class={bem('close-icon', props.closeIconPosition)}
+            class={[
+              bem('close-icon', props.closeIconPosition),
+              HAPTICS_FEEDBACK,
+            ]}
             classPrefix={props.iconPrefix}
             onClick={onClickCloseIcon}
           />
diff --git a/packages/vant/src/popup/README.md b/packages/vant/src/popup/README.md
index 467dfbc2e..361a4e6c8 100644
--- a/packages/vant/src/popup/README.md
+++ b/packages/vant/src/popup/README.md
@@ -167,6 +167,5 @@ The component provides the following CSS variables, which can be used to customi
 | --van-popup-round-border-radius | _16px_ | - |
 | --van-popup-close-icon-size | _22px_ | - |
 | --van-popup-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-popup-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-popup-close-icon-margin | _16px_ | - |
 | --van-popup-close-icon-z-index | _1_ | - |
diff --git a/packages/vant/src/popup/README.zh-CN.md b/packages/vant/src/popup/README.zh-CN.md
index 975cc3e50..37a3cbba3 100644
--- a/packages/vant/src/popup/README.zh-CN.md
+++ b/packages/vant/src/popup/README.zh-CN.md
@@ -173,6 +173,5 @@ import type { PopupProps, PopupPosition, PopupCloseIconPosition } from 'vant';
 | --van-popup-round-border-radius | _16px_ | - |
 | --van-popup-close-icon-size | _22px_ | - |
 | --van-popup-close-icon-color | _var(--van-gray-5)_ | - |
-| --van-popup-close-icon-active-color | _var(--van-gray-6)_ | - |
 | --van-popup-close-icon-margin | _16px_ | - |
 | --van-popup-close-icon-z-index | _1_ | - |
diff --git a/packages/vant/src/popup/index.less b/packages/vant/src/popup/index.less
index 048ab6b1a..d5cfabec0 100644
--- a/packages/vant/src/popup/index.less
+++ b/packages/vant/src/popup/index.less
@@ -6,7 +6,6 @@
   --van-popup-round-border-radius: @popup-round-border-radius;
   --van-popup-close-icon-size: @popup-close-icon-size;
   --van-popup-close-icon-color: @popup-close-icon-color;
-  --van-popup-close-icon-active-color: @popup-close-icon-active-color;
   --van-popup-close-icon-margin: @popup-close-icon-margin;
   --van-popup-close-icon-z-index: @popup-close-icon-z-index;
 }
@@ -119,10 +118,6 @@
       font-size: var(--van-popup-close-icon-size);
       cursor: pointer;
 
-      &:active {
-        color: var(--van-popup-close-icon-active-color);
-      }
-
       &--top-left {
         top: var(--van-popup-close-icon-margin);
         left: var(--van-popup-close-icon-margin);
diff --git a/packages/vant/src/popup/test/__snapshots__/index.spec.js.snap b/packages/vant/src/popup/test/__snapshots__/index.spec.js.snap
index 33f1a12a4..bd82e2956 100644
--- a/packages/vant/src/popup/test/__snapshots__/index.spec.js.snap
+++ b/packages/vant/src/popup/test/__snapshots__/index.spec.js.snap
@@ -7,7 +7,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
 </transition-stub>
 <transition-stub>
   <div class="van-popup van-popup--center">
-    <i class="van-badge__wrapper my-icon my-icon-cross van-popup__close-icon van-popup__close-icon--top-right"
+    <i class="van-badge__wrapper my-icon my-icon-cross van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"
        role="button"
        tabindex="0"
     >
@@ -17,7 +17,7 @@ exports[`should change icon class prefix when using icon-prefix prop 1`] = `
 `;
 
 exports[`should render correct close icon when using close-icon prop 1`] = `
-<i class="van-badge__wrapper van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right"
+<i class="van-badge__wrapper van-icon van-icon-success van-popup__close-icon van-popup__close-icon--top-right van-haptics-feedback"
    role="button"
    tabindex="0"
 >
diff --git a/packages/vant/src/popup/var.less b/packages/vant/src/popup/var.less
index 4b17f23ff..662bab2f0 100644
--- a/packages/vant/src/popup/var.less
+++ b/packages/vant/src/popup/var.less
@@ -5,6 +5,5 @@
 @popup-round-border-radius: 16px;
 @popup-close-icon-size: 22px;
 @popup-close-icon-color: var(--van-gray-5);
-@popup-close-icon-active-color: var(--van-gray-6);
 @popup-close-icon-margin: 16px;
 @popup-close-icon-z-index: 1;
diff --git a/packages/vant/src/share-sheet/ShareSheet.tsx b/packages/vant/src/share-sheet/ShareSheet.tsx
index 4a4c0103c..95404e032 100644
--- a/packages/vant/src/share-sheet/ShareSheet.tsx
+++ b/packages/vant/src/share-sheet/ShareSheet.tsx
@@ -7,6 +7,7 @@ import {
   truthProp,
   makeArrayProp,
   createNamespace,
+  HAPTICS_FEEDBACK,
 } from '../utils';
 import { popupSharedProps, popupSharedPropKeys } from '../popup/shared';
 
@@ -103,7 +104,7 @@ export default defineComponent({
         <div
           role="button"
           tabindex={0}
-          class={[bem('option'), className]}
+          class={[bem('option'), className, HAPTICS_FEEDBACK]}
           onClick={() => onSelect(option, index)}
         >
           <img src={getIconURL(icon)} class={bem('icon')} />
diff --git a/packages/vant/src/share-sheet/index.less b/packages/vant/src/share-sheet/index.less
index e4d0b6c66..26b45088d 100644
--- a/packages/vant/src/share-sheet/index.less
+++ b/packages/vant/src/share-sheet/index.less
@@ -64,10 +64,6 @@
     align-items: center;
     cursor: pointer;
     user-select: none;
-
-    &:active {
-      opacity: var(--van-active-opacity);
-    }
   }
 
   &__icon {
diff --git a/packages/vant/src/style/base.less b/packages/vant/src/style/base.less
index 9ffd5e7eb..3fd06565f 100644
--- a/packages/vant/src/style/base.less
+++ b/packages/vant/src/style/base.less
@@ -31,6 +31,10 @@
   padding-bottom: env(safe-area-inset-bottom);
 }
 
+.van-haptics-feedback:active {
+  opacity: var(--van-active-opacity);
+}
+
 [class*='van-hairline'] {
   &::after {
     .hairline();
diff --git a/packages/vant/src/style/var.less b/packages/vant/src/style/var.less
index 0a0754a15..dfd1e11f2 100644
--- a/packages/vant/src/style/var.less
+++ b/packages/vant/src/style/var.less
@@ -29,7 +29,7 @@
 @text-color-secondary: var(--van-gray-6);
 @text-link-color: #576b95;
 @active-color: var(--van-gray-2);
-@active-opacity: 0.7;
+@active-opacity: 0.6;
 @disabled-opacity: 0.5;
 @background-color: var(--van-gray-1);
 @background-color-light: var(--van-white);
diff --git a/packages/vant/src/utils/constant.ts b/packages/vant/src/utils/constant.ts
index bdd58a3a8..2904abe0c 100644
--- a/packages/vant/src/utils/constant.ts
+++ b/packages/vant/src/utils/constant.ts
@@ -9,4 +9,6 @@ export const BORDER_SURROUND = `${BORDER}--surround`;
 export const BORDER_TOP_BOTTOM = `${BORDER}--top-bottom`;
 export const BORDER_UNSET_TOP_BOTTOM = `${BORDER}-unset--top-bottom`;
 
+export const HAPTICS_FEEDBACK = 'van-haptics-feedback';
+
 export const FORM_KEY: InjectionKey<FormProvide> = Symbol('van-form');