diff --git a/components/badge/__tests__/__snapshots__/index.test.js.snap b/components/badge/__tests__/__snapshots__/index.test.js.snap
index a58afd99ee..0857e9ce9c 100644
--- a/components/badge/__tests__/__snapshots__/index.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/index.test.js.snap
@@ -69,6 +69,42 @@ exports[`Badge badge should support float number 2`] = `
 </Badge>
 `;
 
+exports[`Badge render Badge status/color when contains children 1`] = `
+Array [
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <a />
+    <sup
+      class="ant-scroll-number ant-badge-dot ant-badge-status-success"
+      data-show="true"
+      title="5"
+    />
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <a />
+    <sup
+      class="ant-scroll-number ant-badge-dot ant-badge-status-blue"
+      data-show="true"
+      title="5"
+    />
+  </span>,
+  <span
+    class="ant-badge ant-badge-status"
+  >
+    <a />
+    <sup
+      class="ant-scroll-number ant-badge-dot"
+      data-show="true"
+      style="background:#08c"
+      title="5"
+    />
+  </span>,
+]
+`;
+
 exports[`Badge render correct with negative number 1`] = `
 <div>
   <span
diff --git a/components/badge/__tests__/index.test.js b/components/badge/__tests__/index.test.js
index 726ff5a4b0..ffe2fa365c 100644
--- a/components/badge/__tests__/index.test.js
+++ b/components/badge/__tests__/index.test.js
@@ -113,4 +113,22 @@ describe('Badge', () => {
     );
     expect(wrapper).toMatchSnapshot();
   });
+
+  // https://github.com/ant-design/ant-design/issues/21331
+  it('render Badge status/color when contains children', () => {
+    const wrapper = render(
+      <>
+        <Badge count={5} status="success">
+          <a />
+        </Badge>
+        <Badge count={5} color="blue">
+          <a />
+        </Badge>
+        <Badge count={5} color="#08c">
+          <a />
+        </Badge>
+      </>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  })
 });
diff --git a/components/badge/index.tsx b/components/badge/index.tsx
index 728380b5d5..fe7e68b9de 100644
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -129,7 +129,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
   }
 
   renderBadgeNumber(prefixCls: string, scrollNumberPrefixCls: string) {
-    const { status, count } = this.props;
+    const { status, count, color } = this.props;
 
     const displayCount = this.getDisplayCount();
     const isDot = this.isDot();
@@ -140,9 +140,16 @@ export default class Badge extends React.Component<BadgeProps, any> {
       [`${prefixCls}-count`]: !isDot,
       [`${prefixCls}-multiple-words`]:
         !isDot && count && count.toString && count.toString().length > 1,
-      [`${prefixCls}-status-${status}`]: this.hasStatus(),
+      [`${prefixCls}-status-${status}`]: !!status,
+      [`${prefixCls}-status-${color}`]: isPresetColor(color),
     });
 
+    let statusStyle: React.CSSProperties | undefined = this.getStyleWithOffset();
+    if (color && !isPresetColor(color)) {
+      statusStyle = statusStyle || {};
+      statusStyle.background = color;
+    }
+
     return hidden ? null : (
       <ScrollNumber
         prefixCls={scrollNumberPrefixCls}
@@ -151,7 +158,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
         count={displayCount}
         displayComponent={this.renderDisplayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
         title={this.getScrollNumberTitle()}
-        style={this.getStyleWithOffset()}
+        style={statusStyle}
         key="scrollNumber"
       />
     );