diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
index 03cfd35a1b..88077d5007 100644
--- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -627,531 +627,759 @@ Array [
 `;
 
 exports[`renders components/badge/demo/colorful-with-count-debug.tsx extend context correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
-  style="flex-wrap: wrap; margin-bottom: -16px;"
->
+Array [
   <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -16px;"
   >
-    <span
-      class="ant-badge"
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+      <span
+        class="ant-badge"
       >
-        pink
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
-        data-show="true"
-        title="44"
-      >
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          pink
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          red
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition: none;"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          yellow
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          orange
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          cyan
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          green
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          blue
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          purple
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          geekblue
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          magenta
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          volcano
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          gold
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
+        >
+          lime
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition: none;"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+  </div>,
   <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap: wrap; margin-bottom: -16px;"
   >
-    <span
-      class="ant-badge"
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        red
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-pink"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        yellow
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-red"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        orange
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-yellow"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        cyan
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-orange"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        green
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-cyan"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        blue
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-green"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        purple
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-blue"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        geekblue
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-purple"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        magenta
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-geekblue"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        volcano
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-magenta"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right: 24px; padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        gold
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-volcano"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="padding-bottom: 16px;"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right: 24px; padding-bottom: 16px;"
     >
-      <div
-        style="width: 90px; height: 90px; line-height: 90px; background: rgb(204, 204, 204); text-align: center;"
-      >
-        lime
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-gold"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition: none;"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-</div>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom: 16px;"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-lime"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders components/badge/demo/dot.tsx extend context correctly 1`] = `
diff --git a/components/badge/__tests__/__snapshots__/demo.test.ts.snap b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
index 52a4a358e9..1189cbb6a0 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.ts.snap
@@ -628,531 +628,759 @@ Array [
 `;
 
 exports[`renders components/badge/demo/colorful-with-count-debug.tsx correctly 1`] = `
-<div
-  class="ant-space ant-space-horizontal ant-space-align-center"
-  style="flex-wrap:wrap;margin-bottom:-16px"
->
+Array [
   <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-16px"
   >
-    <span
-      class="ant-badge"
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+      <span
+        class="ant-badge"
       >
-        pink
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
-        data-show="true"
-        title="44"
-      >
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          pink
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-pink"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-        <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          red
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
+          data-show="true"
+          title="44"
         >
           <span
-            class="ant-scroll-number-only-unit current"
+            class="ant-scroll-number-only"
+            style="transition:none"
           >
-            4
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
           </span>
-        </span>
-      </sup>
-    </span>
-  </div>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          yellow
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          orange
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          cyan
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          green
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          blue
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          purple
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          geekblue
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          magenta
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          volcano
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          gold
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:16px"
+    >
+      <span
+        class="ant-badge"
+      >
+        <div
+          style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
+        >
+          lime
+        </div>
+        <sup
+          class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
+          data-show="true"
+          title="44"
+        >
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+          <span
+            class="ant-scroll-number-only"
+            style="transition:none"
+          >
+            <span
+              class="ant-scroll-number-only-unit current"
+            >
+              4
+            </span>
+          </span>
+        </sup>
+      </span>
+    </div>
+  </div>,
   <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
+    class="ant-space ant-space-horizontal ant-space-align-center"
+    style="flex-wrap:wrap;margin-bottom:-16px"
   >
-    <span
-      class="ant-badge"
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        red
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-red"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-pink"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        yellow
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-yellow"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-red"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        orange
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-orange"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-yellow"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        cyan
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-cyan"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-orange"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        green
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-green"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-cyan"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        blue
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-blue"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-green"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        purple
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-purple"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-blue"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        geekblue
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-geekblue"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-purple"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        magenta
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-magenta"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-geekblue"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        volcano
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-volcano"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-magenta"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="margin-right:24px;padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        gold
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-gold"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-volcano"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-  <div
-    class="ant-space-item"
-    style="padding-bottom:16px"
-  >
-    <span
-      class="ant-badge"
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="margin-right:24px;padding-bottom:16px"
     >
-      <div
-        style="width:90px;height:90px;line-height:90px;background:#ccc;text-align:center"
-      >
-        lime
-      </div>
-      <sup
-        class="ant-scroll-number ant-badge-count ant-badge-multiple-words ant-badge-color-lime"
-        data-show="true"
-        title="44"
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
       >
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
-        >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
-        </span>
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-gold"
+        />
         <span
-          class="ant-scroll-number-only"
-          style="transition:none"
+          class="ant-badge-status-text"
         >
-          <span
-            class="ant-scroll-number-only-unit current"
-          >
-            4
-          </span>
+          loading
         </span>
-      </sup>
-    </span>
-  </div>
-</div>
+      </span>
+    </div>
+    <div
+      class="ant-space-item"
+      style="padding-bottom:16px"
+    >
+      <span
+        class="ant-badge ant-badge-status ant-badge-not-a-wrapper"
+      >
+        <span
+          class="ant-badge-status-dot ant-badge-status-processing ant-badge-color-lime"
+        />
+        <span
+          class="ant-badge-status-text"
+        >
+          loading
+        </span>
+      </span>
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders components/badge/demo/dot.tsx correctly 1`] = `
diff --git a/components/badge/demo/colorful-with-count-debug.tsx b/components/badge/demo/colorful-with-count-debug.tsx
index 5d0084337d..c659056ece 100644
--- a/components/badge/demo/colorful-with-count-debug.tsx
+++ b/components/badge/demo/colorful-with-count-debug.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
 import { Badge, Space } from 'antd';
+import React from 'react';
 
 const colors = [
   'pink',
@@ -17,24 +17,35 @@ const colors = [
   'lime',
 ];
 
+const AvatarItem = ({ color }: { color: string }) => (
+  <div
+    style={{
+      width: 90,
+      height: 90,
+      lineHeight: '90px',
+      background: '#ccc',
+      textAlign: 'center',
+    }}
+  >
+    {color}
+  </div>
+);
+
 const App: React.FC = () => (
-  <Space wrap size={['large', 'middle']}>
-    {colors.map((color) => (
-      <Badge color={color} count={44} key={color}>
-        <div
-          style={{
-            width: 90,
-            height: 90,
-            lineHeight: '90px',
-            background: '#ccc',
-            textAlign: 'center',
-          }}
-        >
-          {color}
-        </div>
-      </Badge>
-    ))}
-  </Space>
+  <>
+    <Space wrap size={['large', 'middle']}>
+      {colors.map((color) => (
+        <Badge color={color} count={44} key={color}>
+          <AvatarItem color={color} />
+        </Badge>
+      ))}
+    </Space>
+    <Space wrap size={['large', 'middle']}>
+      {colors.map((color) => (
+        <Badge status="processing" color={color} text="loading" key={color} />
+      ))}
+    </Space>
+  </>
 );
 
 export default App;
diff --git a/components/badge/style/index.ts b/components/badge/style/index.ts
index f474ee2da9..3c1a276039 100644
--- a/components/badge/style/index.ts
+++ b/components/badge/style/index.ts
@@ -74,8 +74,11 @@ const genSharedBadgeStyle: GenerateStyle<BadgeToken> = (token: BadgeToken): CSSO
   const ribbonWrapperPrefixCls = `${antCls}-ribbon-wrapper`;
 
   const colorPreset = genPresetColor(token, (colorKey, { darkColor }) => ({
-    [`${componentCls}-color-${colorKey}`]: {
+    [`&${componentCls} ${componentCls}-color-${colorKey}`]: {
       background: darkColor,
+      [`&:not(${componentCls}-count)`]: {
+        color: darkColor,
+      },
     },
   }));