diff --git a/src/badge/README.md b/src/badge/README.md
index fb30c4663..6cc4b3e63 100644
--- a/src/badge/README.md
+++ b/src/badge/README.md
@@ -15,7 +15,7 @@ app.use(Badge);
 ### Basic Usage
 
 ```html
-<van-badge :content="5">
+<van-badge content="5">
   <div class="child" />
 </van-badge>
 <van-badge dot>
@@ -35,10 +35,10 @@ app.use(Badge);
 ### Max
 
 ```html
-<van-badge :content="20" :max="9">
+<van-badge content="20" max="9">
   <div class="child" />
 </van-badge>
-<van-badge :content="200" :max="99">
+<van-badge content="200" max="99">
   <div class="child" />
 </van-badge>
 ```
@@ -46,7 +46,7 @@ app.use(Badge);
 ### Custom Color
 
 ```html
-<van-badge :content="5" color="#1989fa">
+<van-badge content="5" color="#1989fa">
   <div class="child" />
 </van-badge>
 <van-badge dot color="#1989fa">
@@ -57,7 +57,7 @@ app.use(Badge);
 ### Standaline
 
 ```html
-<van-badge :content="200" :max="99" />
+<van-badge content="200" max="99" />
 ```
 
 ## API
@@ -66,10 +66,10 @@ app.use(Badge);
 
 | Attribute | Description | Type | Default |
 | --- | --- | --- | --- |
-| content | Badge content | _string \| number_ | - |
+| content | Badge content | _number \| string_ | - |
 | color | Background color | _string_ | `#ee0a24` |
 | dot | Whether to show dot | _boolean_ | `false` |
-| max | Max value，show `{max}+` when exceed，only works when content is number type | _number_ | - |
+| max | Max value，show `{max}+` when exceed，only works when content is number | _number \| string_ | - |
 
 ### Slots
 
diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md
index b76626f25..0bea13e48 100644
--- a/src/badge/README.zh-CN.md
+++ b/src/badge/README.zh-CN.md
@@ -43,10 +43,10 @@ app.use(Badge);
 设置 `max` 属性后，当 `content` 的数值超过最大值时，会自动显示为 `{max}+`。
 
 ```html
-<van-badge :content="20" :max="9">
+<van-badge :content="20" max="9">
   <div class="child" />
 </van-badge>
-<van-badge :content="200" :max="99">
+<van-badge :content="200" max="99">
   <div class="child" />
 </van-badge>
 ```
@@ -69,7 +69,7 @@ app.use(Badge);
 当 Badge 没有子元素时，会作为一个独立的元素进行展示。
 
 ```html
-<van-badge :content="200" :max="99" />
+<van-badge :content="200" max="99" />
 ```
 
 ## API
@@ -78,10 +78,10 @@ app.use(Badge);
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| content | 徽标内容 | _string \| number_ | - |
+| content | 徽标内容 | _number \| string_ | - |
 | color | 徽标背景颜色 | _string_ | `#ee0a24` |
 | dot | 是否展示为小红点 | _boolean_ | `false` |
-| max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为 number 类型时有效 | _number_ | - |
+| max | 最大值，超过最大值会显示 `{max}+`，仅当 content 为数字时有效 | _number \| string_ | - |
 
 ### Slots
 
diff --git a/src/badge/demo/index.vue b/src/badge/demo/index.vue
index 762632cbd..c7558afc4 100644
--- a/src/badge/demo/index.vue
+++ b/src/badge/demo/index.vue
@@ -1,7 +1,7 @@
 <template>
   <demo-section>
     <demo-block :title="t('basicUsage')">
-      <van-badge :content="5">
+      <van-badge content="5">
         <div class="child" />
       </van-badge>
       <van-badge dot>
@@ -10,16 +10,16 @@
     </demo-block>
 
     <demo-block :title="t('max')">
-      <van-badge :content="20" :max="9">
+      <van-badge content="20" max="9">
         <div class="child" />
       </van-badge>
-      <van-badge :content="200" :max="99">
+      <van-badge content="200" max="99">
         <div class="child" />
       </van-badge>
     </demo-block>
 
     <demo-block :title="t('customColor')">
-      <van-badge :content="5" :color="BLUE">
+      <van-badge content="5" :color="BLUE">
         <div class="child" />
       </van-badge>
       <van-badge dot :color="BLUE">
@@ -28,7 +28,7 @@
     </demo-block>
 
     <demo-block :title="t('standalone')">
-      <van-badge :content="200" :max="99" style="margin-left: 16px;" />
+      <van-badge content="200" max="99" style="margin-left: 16px;" />
     </demo-block>
   </demo-section>
 </template>
diff --git a/src/badge/index.tsx b/src/badge/index.tsx
index 6fa8be2ca..596820199 100644
--- a/src/badge/index.tsx
+++ b/src/badge/index.tsx
@@ -1,12 +1,13 @@
 import type { PropType } from 'vue';
 import { isDef, createNamespace } from '../utils';
+import { isNumeric } from '../utils/validate/number';
 
 const [createComponent, bem] = createNamespace('badge');
 
 export default createComponent({
   props: {
-    max: Number,
     dot: Boolean,
+    max: [Number, String],
     color: String,
     content: [Number, String],
     tag: {
@@ -27,7 +28,7 @@ export default createComponent({
           return slots.content();
         }
 
-        if (isDef(max) && typeof content === 'number' && content > max) {
+        if (isDef(max) && isNumeric(content!) && +content > max) {
           return `${max}+`;
         }
 
diff --git a/src/utils/format/unit.ts b/src/utils/format/unit.ts
index 9a15c5bde..a08f22dfe 100644
--- a/src/utils/format/unit.ts
+++ b/src/utils/format/unit.ts
@@ -6,8 +6,7 @@ export function addUnit(value?: string | number): string | undefined {
     return undefined;
   }
 
-  value = String(value);
-  return isNumeric(value) ? `${value}px` : value;
+  return isNumeric(value) ? `${value}px` : String(value);
 }
 
 export function getSizeStyle(originSize?: string | number) {
diff --git a/src/utils/test/index.spec.js b/src/utils/test/index.spec.js
index 2dd16e4d4..186dc2176 100644
--- a/src/utils/test/index.spec.js
+++ b/src/utils/test/index.spec.js
@@ -91,6 +91,7 @@ test('isMobile', () => {
 });
 
 test('isNumeric', () => {
+  expect(isNumeric(1)).toBeTruthy();
   expect(isNumeric('1')).toBeTruthy();
   expect(isNumeric('1.2')).toBeTruthy();
   expect(isNumeric('1..2')).toBeFalsy();
diff --git a/src/utils/validate/number.ts b/src/utils/validate/number.ts
index 8d77e0eee..c6efcf5e9 100644
--- a/src/utils/validate/number.ts
+++ b/src/utils/validate/number.ts
@@ -1,5 +1,5 @@
-export function isNumeric(val: string): boolean {
-  return /^\d+(\.\d+)?$/.test(val);
+export function isNumeric(val: string | number): val is string {
+  return typeof val === 'number' || /^\d+(\.\d+)?$/.test(val);
 }
 
 export function isNaN(val: number): val is typeof NaN {