diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
index 37ae9f41ed..70a014c13d 100644
--- a/src/packages/badge/badge.scss
+++ b/src/packages/badge/badge.scss
@@ -53,6 +53,10 @@
     z-index: 1;
   }
 
+  &-disabled {
+    background: $badge-background-disabled-color;
+  }
+
   &-number {
     font-family: 'JD';
   }
diff --git a/src/packages/badge/badge.taro.tsx b/src/packages/badge/badge.taro.tsx
index f15f4aa81f..5615685b03 100644
--- a/src/packages/badge/badge.taro.tsx
+++ b/src/packages/badge/badge.taro.tsx
@@ -22,6 +22,7 @@ const defaultProps = {
   right: 0,
   fill: 'solid',
   size: 'large',
+  disabled: false,
 } as TaroBadgeProps
 export const Badge: FunctionComponent<Partial<TaroBadgeProps>> = (props) => {
   const rtl = useRtl()
@@ -36,6 +37,7 @@ export const Badge: FunctionComponent<Partial<TaroBadgeProps>> = (props) => {
     right,
     fill,
     size,
+    disabled,
   } = { ...defaultProps, ...props }
 
   const classPrefix = 'nut-badge'
@@ -73,6 +75,7 @@ export const Badge: FunctionComponent<Partial<TaroBadgeProps>> = (props) => {
     [`${classPrefix}-dot-${size}`]: dot,
     [`${classPrefix}-${fill}`]: fill === 'outline',
     [`${classPrefix}-content`]: children,
+    [`${classPrefix}-disabled`]: disabled,
   })
 
   useEffect(() => {
diff --git a/src/packages/badge/badge.tsx b/src/packages/badge/badge.tsx
index 556e4a494c..b0b1b1757f 100644
--- a/src/packages/badge/badge.tsx
+++ b/src/packages/badge/badge.tsx
@@ -13,6 +13,7 @@ const defaultProps = {
   right: 0,
   fill: 'solid',
   size: 'large',
+  disabled: false,
 } as WebBadgeProps
 
 export const Badge: FunctionComponent<Partial<WebBadgeProps>> = (props) => {
@@ -28,6 +29,7 @@ export const Badge: FunctionComponent<Partial<WebBadgeProps>> = (props) => {
     right,
     fill,
     size,
+    disabled,
   } = { ...defaultProps, ...props }
 
   const classPrefix = 'nut-badge'
@@ -62,6 +64,7 @@ export const Badge: FunctionComponent<Partial<WebBadgeProps>> = (props) => {
     [`${classPrefix}-dot-${size}`]: dot,
     [`${classPrefix}-${fill}`]: fill === 'outline',
     [`${classPrefix}-content`]: children,
+    [`${classPrefix}-disabled`]: disabled,
   })
 
   const getPositionStyle = (): CSSProperties => ({
diff --git a/src/packages/badge/demo.taro.tsx b/src/packages/badge/demo.taro.tsx
index af1d319a5f..eb469b41e4 100644
--- a/src/packages/badge/demo.taro.tsx
+++ b/src/packages/badge/demo.taro.tsx
@@ -11,6 +11,7 @@ import Demo5 from './demos/taro/demo5'
 import Demo6 from './demos/taro/demo6'
 import Demo7 from './demos/taro/demo7'
 import Demo8 from './demos/taro/demo8'
+import Demo9 from './demos/taro/demo9'
 
 const BadgeDemo = () => {
   const [translated] = useTranslate({
@@ -23,6 +24,7 @@ const BadgeDemo = () => {
       '915d7b01': '自定义位置',
       f1089312: '独立展示',
       a8237653: '填充模式',
+      disabled: '禁用',
     },
     'zh-TW': {
       '8ab98966': '默认用法',
@@ -33,6 +35,7 @@ const BadgeDemo = () => {
       '915d7b01': '自定义位置',
       f1089312: '独立展示',
       a8237653: '填充模式',
+      disabled: '禁用',
     },
     'en-US': {
       '8ab98966': 'Basic usage',
@@ -43,6 +46,7 @@ const BadgeDemo = () => {
       '915d7b01': 'Custom Position',
       f1089312: 'Display Alone',
       a8237653: 'Fill Mode',
+      disabled: 'Disabled',
     },
   })
   return (
@@ -53,6 +57,8 @@ const BadgeDemo = () => {
         <Demo1 />
         <View className="h2">{translated['1e7a2282']}</View>
         <Demo2 />
+        <View className="h2">{translated.disabled}</View>
+        <Demo9 />
         <View className="h2">{translated.customColor}</View>
         <Demo3 />
         <View className="h2">{translated['1c730245']}</View>
diff --git a/src/packages/badge/demo.tsx b/src/packages/badge/demo.tsx
index fe7a26d1f1..ac3495b1a9 100644
--- a/src/packages/badge/demo.tsx
+++ b/src/packages/badge/demo.tsx
@@ -8,6 +8,7 @@ import Demo5 from './demos/h5/demo5'
 import Demo6 from './demos/h5/demo6'
 import Demo7 from './demos/h5/demo7'
 import Demo8 from './demos/h5/demo8'
+import Demo9 from './demos/h5/demo9'
 
 const BadgeDemo = () => {
   const [translated] = useTranslate({
@@ -20,6 +21,7 @@ const BadgeDemo = () => {
       '915d7b01': '自定义位置',
       f1089312: '独立展示',
       a8237653: '填充模式',
+      disabled: '禁用',
     },
     'zh-TW': {
       '8ab98966': '默认用法',
@@ -30,6 +32,7 @@ const BadgeDemo = () => {
       '915d7b01': '自定义位置',
       f1089312: '独立展示',
       a8237653: '填充模式',
+      disabled: '禁用',
     },
     'en-US': {
       '8ab98966': 'Basic usage',
@@ -40,6 +43,7 @@ const BadgeDemo = () => {
       '915d7b01': 'Custom Position',
       f1089312: 'Display Alone',
       a8237653: 'Fill Mode',
+      disabled: 'Disabled',
     },
   })
 
@@ -48,6 +52,8 @@ const BadgeDemo = () => {
       <div className="demo">
         <h2>{translated['8ab98966']}</h2>
         <Demo1 />
+        <h2>{translated.disabled}</h2>
+        <Demo9 />
         <h2>{translated['1e7a2282']}</h2>
         <Demo2 />
         <h2>{translated.customColor}</h2>
diff --git a/src/packages/badge/demos/h5/demo9.tsx b/src/packages/badge/demos/h5/demo9.tsx
new file mode 100644
index 0000000000..956796e4d5
--- /dev/null
+++ b/src/packages/badge/demos/h5/demo9.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { User } from '@nutui/icons-react'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react'
+
+const Demo9 = () => {
+  return (
+    <Cell style={{ justifyContent: 'space-around' }}>
+      <Badge dot disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge value={8} disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge value="内容" disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+    </Cell>
+  )
+}
+export default Demo9
diff --git a/src/packages/badge/demos/taro/demo9.tsx b/src/packages/badge/demos/taro/demo9.tsx
new file mode 100644
index 0000000000..85892e6af4
--- /dev/null
+++ b/src/packages/badge/demos/taro/demo9.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+import { User } from '@nutui/icons-react-taro'
+import { Avatar, Badge, Cell } from '@nutui/nutui-react-taro'
+
+const Demo9 = () => {
+  return (
+    <Cell style={{ justifyContent: 'space-around' }}>
+      <Badge dot disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge value={8} disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+      <Badge value="内容" disabled>
+        <Avatar icon={<User />} shape="square" />
+      </Badge>
+    </Cell>
+  )
+}
+export default Demo9
diff --git a/src/packages/badge/doc.en-US.md b/src/packages/badge/doc.en-US.md
index c999d87faf..ebb423c09d 100644
--- a/src/packages/badge/doc.en-US.md
+++ b/src/packages/badge/doc.en-US.md
@@ -18,6 +18,14 @@ import { Badge } from '@nutui/nutui-react'
 
 :::
 
+### Disabled
+
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
+:::
+
 ### Max Size
 
 :::demo
@@ -88,6 +96,7 @@ import { Badge } from '@nutui/nutui-react'
 | top | Up and down offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` |
 | right | Left and right offset, can be set to: "0" or 0, etc. | `string` \| `number` | `0` |
 | fill | Fill Mode | `solid` \| `outline` | `solid` |
+| disabled | Whether to disable | `boolean` | `false` |
 
 ## Theming
 
@@ -99,6 +108,7 @@ The component provides the following CSS variables, which can be used to customi
 | --- | --- | --- |
 | \--nutui-badge-height | The height of the badge | `14px` |
 | \--nutui-badge-background-color | badge background color | `$color-primary` |
+| \--nutui-badge-background-disabled-color | badge disables background color | `$color-text-disabled` |
 | \--nutui-badge-color | badge content color value | `$color-primary-text)` |
 | \--nutui-badge-font-size | badge content font size | `$font-size-xxs` |
 | \--nutui-badge-border | badge border | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.md b/src/packages/badge/doc.md
index 92936706da..a10f788a8e 100644
--- a/src/packages/badge/doc.md
+++ b/src/packages/badge/doc.md
@@ -18,6 +18,14 @@ import { Badge } from '@nutui/nutui-react'
 
 :::
 
+### 禁用
+
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
+:::
+
 ### 最大值
 
 :::demo
@@ -87,6 +95,7 @@ import { Badge } from '@nutui/nutui-react'
 | top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` |
 | right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `0` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
+| disabled | 是否禁用 | `boolean` | `false` |
 
 ## 主题定制
 
@@ -98,6 +107,7 @@ import { Badge } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-badge-height | badge 的高度 | `14px` |
 | \--nutui-badge-background-color | badge 背景色 | `$color-primary` |
+| \--nutui-badge-background-disabled-color | badge 禁用背景色 | `$color-text-disabled` |
 | \--nutui-badge-color | badge 内容色值 | `$color-primary-text` |
 | \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` |
 | \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.taro.md b/src/packages/badge/doc.taro.md
index 1d8000b464..e7442706c4 100644
--- a/src/packages/badge/doc.taro.md
+++ b/src/packages/badge/doc.taro.md
@@ -18,6 +18,14 @@ import { Badge } from '@nutui/nutui-react-taro'
 
 :::
 
+### 禁用
+
+:::demo
+
+<CodeBlock src='taro/demo9.tsx'></CodeBlock>
+
+:::
+
 ### 最大值
 
 :::demo
@@ -87,6 +95,7 @@ import { Badge } from '@nutui/nutui-react-taro'
 | top | 上下偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
 | right | 左右偏移量，可设置为："0"或0 等 | `string` \| `number` | `"0"` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
+| disabled | 是否禁用 | `boolean` | `false` |
 
 ## 主题定制
 
@@ -98,6 +107,7 @@ import { Badge } from '@nutui/nutui-react-taro'
 | --- | --- | --- |
 | \--nutui-badge-height | badge 的高度 | `14px` |
 | \--nutui-badge-background-color | badge 背景色 | `$color-primary` |
+| \--nutui-badge-background-disabled-color | badge 禁用背景色 | `$color-text-disabled` |
 | \--nutui-badge-color | badge 内容色值 | `$color-primary-text` |
 | \--nutui-badge-font-size | badge 内容字号 | `$font-size-xxs` |
 | \--nutui-badge-border | badge 边框 | `1px solid $color-primary-text` |
diff --git a/src/packages/badge/doc.zh-TW.md b/src/packages/badge/doc.zh-TW.md
index e44280e994..14e7a63b08 100644
--- a/src/packages/badge/doc.zh-TW.md
+++ b/src/packages/badge/doc.zh-TW.md
@@ -18,6 +18,14 @@ import { Badge } from '@nutui/nutui-react'
 
 :::
 
+### 禁用
+
+:::demo
+
+<CodeBlock src='h5/demo9.tsx'></CodeBlock>
+
+:::
+
 ### 最大值
 
 :::demo
@@ -87,6 +95,7 @@ import { Badge } from '@nutui/nutui-react'
 | top | 上下偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` |
 | right | 左右偏移量，可設置為："0"或0 等 | `string` \| `number` | `0` |
 | fill | 填充模式 | `solid` \| `outline` | `solid` |
+| disabled | 是否禁用 | `boolean` | `false` |
 
 ## 主題定制
 
@@ -98,6 +107,7 @@ import { Badge } from '@nutui/nutui-react'
 | --- | --- | --- |
 | \--nutui-badge-height | badge 的高度 | `14px` |
 | \--nutui-badge-background-color | badge 背景色 | `$color-primary` |
+| \--nutui-badge-background-disabled-color | badge 禁用背景色 | `$color-text-disabled` |
 | \--nutui-badge-color | badge 內容色值 | `$color-primary-text)` |
 | \--nutui-badge-font-size | badge 內容字號 | `$font-size-xxs` |
 | \--nutui-badge-border | badge 邊框 | `1px solid $color-primary-text` |
diff --git a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
index a9cdf02f2f..1dda552025 100644
--- a/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/react/migrate-from-v2.md
@@ -244,6 +244,7 @@ plugins: [
 
 - 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效
 - 移除 `color`属性（`徽标背景颜色`），通过css变量`--nutui-badge-background-color`实现
+- 新增 `disabled` 属性，是否禁用
 
 [//]: # '#### CircleProgress'
 [//]: # '#### Collapse'
diff --git a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
index 4d673d5814..6fc9a4ed24 100644
--- a/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
+++ b/src/sites/sites-react/doc/docs/taro/migrate-from-v2.md
@@ -247,6 +247,7 @@ plugins: [
 
 - 新增 `size` 属性，dot 尺寸，当 dot 等于 `true` 时生效
 - 移除 `color`属性（`徽标背景颜色`），通过css变量`--nutui-badge-background-color`实现
+- 新增 `disabled` 属性，是否禁用
 
 [//]: # '#### CircleProgress'
 [//]: # '#### Collapse'
diff --git a/src/styles/variables-jmapp.scss b/src/styles/variables-jmapp.scss
index 1a2c5ac9fb..b0ad84e87c 100644
--- a/src/styles/variables-jmapp.scss
+++ b/src/styles/variables-jmapp.scss
@@ -1603,6 +1603,10 @@ $badge-background-color: var(
   --nutui-badge-background-color,
   $color-danger
 ) !default;
+$badge-background-disabled-color: var(
+  --nutui-badge-background-disabled-color,
+  $color-text-disabled
+) !default;
 $badge-color: var(--nutui-badge-color, #fff) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xs) !default;
 $badge-border: var(--nutui-badge-border, 2px solid $badge-color) !default;
diff --git a/src/styles/variables-jrkf.scss b/src/styles/variables-jrkf.scss
index 41eb24a9b1..335ca5448c 100644
--- a/src/styles/variables-jrkf.scss
+++ b/src/styles/variables-jrkf.scss
@@ -1628,6 +1628,10 @@ $badge-background-color: var(
   --nutui-badge-background-color,
   $color-danger
 ) !default;
+$badge-background-disabled-color: var(
+  --nutui-badge-background-disabled-color,
+  $color-text-disabled
+) !default;
 $badge-color: var(--nutui-badge-color, #fff) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xs) !default;
 $badge-border: var(--nutui-badge-border, 2px solid $badge-color) !default;
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index c4e9d80d8d..63013fdea2 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1616,6 +1616,10 @@ $badge-background-color: var(
   --nutui-badge-background-color,
   $color-primary
 ) !default;
+$badge-background-disabled-color: var(
+  --nutui-badge-background-disabled-color,
+  $color-text-disabled
+) !default;
 $badge-color: var(--nutui-badge-color, $color-primary-text) !default;
 $badge-font-size: var(--nutui-badge-font-size, $font-size-xxxs) !default;
 $badge-border: var(
diff --git a/src/types/spec/badge/base.ts b/src/types/spec/badge/base.ts
index 95048c10b2..119829a18d 100644
--- a/src/types/spec/badge/base.ts
+++ b/src/types/spec/badge/base.ts
@@ -13,4 +13,5 @@ export interface BaseBadge extends BaseProps {
   right: SimpleValue
   fill: BadgeFill
   size: BadgeDotSize
+  disabled: boolean
 }