diff --git a/src/badge/_example/base.jsx b/src/badge/_example/base.jsx
new file mode 100644
index 00000000..212796ea
--- /dev/null
+++ b/src/badge/_example/base.jsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import { Badge } from 'tdesign-mobile-react';
+
+export default function BadgeBaseDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <div className="badge-demo">
+        <div className="badge-item">
+          <Badge dot>消息</Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="16">消息</Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="NEW">消息</Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="···">消息</Badge>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/badge/_example/basic.jsx b/src/badge/_example/basic.jsx
deleted file mode 100644
index a398a4ad..00000000
--- a/src/badge/_example/basic.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { CellGroup, Badge } from 'tdesign-mobile-react';
-
-export default function BadgeBasicDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <CellGroup>
-        <div className="badge-demo">
-          <div className="badge-item">
-            <Badge count={16}>消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge dot>消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge content="NEW">消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge content="···">消息</Badge>
-          </div>
-        </div>
-      </CellGroup>
-    </div>
-  );
-}
diff --git a/src/badge/_example/button.jsx b/src/badge/_example/button.jsx
new file mode 100644
index 00000000..6b00faa8
--- /dev/null
+++ b/src/badge/_example/button.jsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { Badge, Button } from 'tdesign-mobile-react';
+
+export default function BadgeButtonDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <div className="badge-demo">
+        <div className="badge-item">
+          <Badge dot>
+            <Button size="small" variant="outline">
+              小按钮
+            </Button>
+          </Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="16">
+            <Button size="small" variant="outline">
+              小按钮
+            </Button>
+          </Badge>
+        </div>
+
+        <div className="badge-item">
+          <Badge count="NEW">
+            <Button size="small" variant="outline">
+              小按钮
+            </Button>
+          </Badge>
+        </div>
+        <div className="badge-item">
+          <Badge count="···">
+            <Button size="small" variant="outline">
+              小按钮
+            </Button>
+          </Badge>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/badge/_example/cell.jsx b/src/badge/_example/cell.jsx
new file mode 100644
index 00000000..828409ee
--- /dev/null
+++ b/src/badge/_example/cell.jsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import { Badge, CellGroup, Cell } from 'tdesign-mobile-react';
+
+export default function BadgeCellDemo() {
+  return (
+    <div className="tdesign-mobile-demo" style={{ paddingTop: 10 }}>
+      <CellGroup style={{ overflow: 'hidden' }}>
+        <Cell title="单行标题" arrow note={<Badge dot />}></Cell>
+        <Cell title="单行标题" arrow note={<Badge count={16} />}></Cell>
+        <Cell
+          title="单行标题"
+          arrow
+          note={
+            <>
+              <Badge count="NEW" shape="round" />
+              <Badge count="NEW" style={{ marginLeft: '8px' }} />
+            </>
+          }
+        ></Cell>
+        <Cell title="单行标题" note={<Badge count="NEW" shape="ribbon" />}></Cell>
+      </CellGroup>
+    </div>
+  );
+}
diff --git a/src/badge/_example/color.jsx b/src/badge/_example/color.jsx
deleted file mode 100644
index dacc5eaf..00000000
--- a/src/badge/_example/color.jsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from 'react';
-import { Badge, CellGroup, Button } from 'tdesign-mobile-react';
-
-export default function BadgeColorDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <CellGroup>
-        <div className="badge-demo">
-          <div className="badge-item">
-            <Badge count={12} className="badge-item">
-              <Button size="small">按钮</Button>
-            </Badge>
-            <Badge count={999} color="#52c41a" className="badge-item">
-              <Button size="small">绿色</Button>
-            </Badge>
-            <Badge count={1} color="#f52fff" className="badge-item">
-              <Button size="small">自定义颜色</Button>
-            </Badge>
-          </div>
-        </div>
-      </CellGroup>
-    </div>
-  );
-}
diff --git a/src/badge/_example/dist.jsx b/src/badge/_example/dist.jsx
deleted file mode 100644
index b11e231c..00000000
--- a/src/badge/_example/dist.jsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { Badge, CellGroup, Cell, Button } from 'tdesign-mobile-react';
-
-export default function BadgeDistDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <div className="badge-wrap">
-        <Badge dot className="badge-item">
-          <Button size="small">按钮</Button>
-        </Badge>
-      </div>
-      <div className="badge-wrap">
-        <CellGroup>
-          <Cell align="left">
-            <span>单行标题</span>
-            <Badge dot offset={[10, 0]} className="list-item-badge" />
-          </Cell>
-        </CellGroup>
-      </div>
-    </div>
-  );
-}
diff --git a/src/badge/_example/index.jsx b/src/badge/_example/index.jsx
index 1cc539e1..e72cfc0b 100644
--- a/src/badge/_example/index.jsx
+++ b/src/badge/_example/index.jsx
@@ -1,76 +1,23 @@
 import React from 'react';
-import { Button, Badge, Cell, CellGroup } from 'tdesign-mobile-react';
 import TDemoBlock from '../../../site/mobile/components/DemoBlock';
 import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-
+import BaseDemo from './base';
+import ButtonDemo from './button';
+import CellDemo from './cell';
 import './style/index.less';
 
 export default function BadgeDemo() {
   return (
-    <div className="tdesign-mobile-demo">
-      <TDemoHeader title="Badge 徽标" summary="展示新增内容的提示，用警示红色为主色，包含数字或文字提示内容" />
-
+    <div className="badge-demo">
+      <TDemoHeader title="Badge 徽标" summary="用于告知用户，该区域的状态变化或者待处理任务的数量。" />
       <TDemoBlock title="01 类型" summary="徽标主要分红点、数字、文字和角标提醒">
-        <div className="badge-demo">
-          <div className="badge-item">
-            <Badge dot>消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="16">消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="NEW">消息</Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="···">消息</Badge>
-          </div>
-        </div>
-        <div className="badge-demo">
-          <div className="badge-item">
-            <Badge dot>
-              <Button size="small" variant="outline">
-                小按钮
-              </Button>
-            </Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="16">
-              <Button size="small" variant="outline">
-                小按钮
-              </Button>
-            </Badge>
-          </div>
-
-          <div className="badge-item">
-            <Badge count="NEW">
-              <Button size="small" variant="outline">
-                小按钮
-              </Button>
-            </Badge>
-          </div>
-          <div className="badge-item">
-            <Badge count="···">
-              <Button size="small" variant="outline">
-                小按钮
-              </Button>
-            </Badge>
-          </div>
-        </div>
-        <CellGroup style={{ overflow: 'hidden' }}>
-          <Cell title="单行标题" arrow note={<Badge dot />}></Cell>
-          <Cell title="单行标题" arrow note={<Badge count={16} />}></Cell>
-          <Cell
-            title="单行标题"
-            arrow
-            note={
-              <>
-                <Badge count="NEW" shape="round" />
-                <Badge count="NEW" style={{ marginLeft: '8px' }} />
-              </>
-            }
-          ></Cell>
-          <Cell title="单行标题" note={<Badge count="NEW" shape="ribbon" />}></Cell>
-        </CellGroup>
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock>
+        <ButtonDemo />
+      </TDemoBlock>
+      <TDemoBlock>
+        <CellDemo />
       </TDemoBlock>
     </div>
   );
diff --git a/src/badge/_example/max-count.jsx b/src/badge/_example/max-count.jsx
deleted file mode 100644
index e61e9c96..00000000
--- a/src/badge/_example/max-count.jsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import React from 'react';
-import { Badge, CellGroup, Cell, Button } from 'tdesign-mobile-react';
-
-export default function BadgeMaxCountDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <div className="badge-demo">
-        <Badge count={12} maxCount={44} className="badge-item">
-          <Button size="small">14</Button>
-        </Badge>
-        <Badge count={109} className="badge-item">
-          <Button size="small">默认max:99</Button>
-        </Badge>
-        <Badge count={45} maxCount={44} className="badge-item">
-          <Button size="small">max:44</Button>
-        </Badge>
-        <Badge count={106} maxCount={105} className="badge-item">
-          <Button size="small">max:105</Button>
-        </Badge>
-      </div>
-      <div className="badge-demo">
-        <CellGroup>
-          <Cell align="left">
-            <span>单行标题</span>
-            <Badge count={16} offset={[10, 0]} className="list-item-badge" />
-          </Cell>
-        </CellGroup>
-      </div>
-    </div>
-  );
-}
diff --git a/src/badge/_example/offset.jsx b/src/badge/_example/offset.jsx
deleted file mode 100644
index 71608de4..00000000
--- a/src/badge/_example/offset.jsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import React from 'react';
-import { Badge, Button } from 'tdesign-mobile-react';
-
-export default function BadgeOffsetDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <div className="badge-demo">
-        <div className="badge-line">
-          <span>offset: [10, 10]</span>
-          <Badge count={12} offset={[10, 10]} className="badge-item">
-            <Button size="small">按钮</Button>
-          </Badge>
-        </div>
-        <div className="badge-line">
-          <span>offset: [-10, 10]</span>
-          <Badge count={12} offset={[-10, 10]} className="badge-item">
-            <Button size="small">按钮</Button>
-          </Badge>
-        </div>
-        <div className="badge-line">
-          <span>offset: [-10, -10]</span>
-          <Badge count={12} offset={[-10, -10]} className="badge-item">
-            <Button size="small">按钮</Button>
-          </Badge>
-        </div>
-        <div className="badge-line">
-          <span>offset: [10, -10]</span>
-          <Badge count={12} offset={[10, -10]} className="badge-item">
-            <Button size="small">按钮</Button>
-          </Badge>
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/src/badge/_example/shape.jsx b/src/badge/_example/shape.jsx
deleted file mode 100644
index 8a47b2b6..00000000
--- a/src/badge/_example/shape.jsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react';
-import { Badge, Button, CellGroup, Cell } from 'tdesign-mobile-react';
-
-export default function BadgeShapeDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <div className="badge-demo">
-        <Badge count={12} className="badge-item">
-          <Button size="small">circle</Button>
-        </Badge>
-        <Badge count={12} shape="round" className="badge-item">
-          <Button size="small">round</Button>
-        </Badge>
-        <CellGroup title="列表带徽标">
-          <Cell label="单行标题">
-            <Badge dot />
-          </Cell>
-          <Cell label="单行标题">
-            <Badge content="NEW" offset={[5, 0]} shape="ribbon" />
-          </Cell>
-        </CellGroup>
-      </div>
-    </div>
-  );
-}
diff --git a/src/badge/_example/style/index.less b/src/badge/_example/style/index.less
index bf1119be..b812a887 100644
--- a/src/badge/_example/style/index.less
+++ b/src/badge/_example/style/index.less
@@ -1,15 +1,18 @@
-.badge-demo {
-  display: flex;
-  padding: 16px 0;
-  width: 100%;
-
-  &__container {
-    width: 24%;
-    text-align: center;
-    position: relative;
-  }
-  .badge-item {
-    width: 24%;
-    text-align: center;
-  }
-}
+.tdesign-mobile-demo {
+  .badge-demo {
+    display: flex;
+    padding: 16px 0;
+    width: 100%;
+
+    &__container {
+      width: 24%;
+      text-align: center;
+      position: relative;
+    }
+
+    .badge-item {
+      width: 24%;
+      text-align: center;
+    }
+  }
+}
diff --git a/src/badge/_example/text.jsx b/src/badge/_example/text.jsx
deleted file mode 100644
index 193eef3b..00000000
--- a/src/badge/_example/text.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import { Badge, Button, CellGroup, Cell } from 'tdesign-mobile-react';
-
-export default function BadgeTextDemo() {
-  return (
-    <div className="tdesign-mobile-demo">
-      <div className="badge-demo">
-        <Badge content="NEW" className="badge-item">
-          <Button size="small">NEW</Button>
-        </Badge>
-        <Badge content="···" className="badge-item">
-          <Button size="small">省略号</Button>
-        </Badge>
-      </div>
-      <div className="badge-wrap">
-        <CellGroup>
-          <Cell align="left">
-            <span>单行标题</span>
-            <div className="badge-tag-wrap">
-              <Badge content="NEW" shape="round" className="badge-tag" />
-              <Badge content="NEW" shape="round" className="badge-tag" />
-              <Badge content="NEW" shape="circle" className="badge-tag" />
-              <Badge content="NEW" shape="circle" className="badge-tag" />
-            </div>
-          </Cell>
-        </CellGroup>
-      </div>
-    </div>
-  );
-}