Tweak badge padding

components/badge/__tests__/__snapshots__/demo.test.js.snap

@@ -620,7 +620,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     class="ant-badge ant-badge-not-a-wrapper"
   >
     <sup
-      class="ant-scroll-number ant-badge-count"
+      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
       title="25"
     >
@@ -1106,7 +1106,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     class="ant-badge ant-badge-not-a-wrapper"
   >
     <sup
-      class="ant-scroll-number ant-badge-count"
+      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
       style="background-color:#52c41a"
       title="109"
@@ -1127,7 +1127,7 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
       href="#"
     />
     <sup
-      class="ant-scroll-number ant-badge-count"
+      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
       title="99"
     >
@@ -1451,7 +1451,7 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
       href="#"
     />
     <sup
-      class="ant-scroll-number ant-badge-count"
+      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
       title="100"
     >
@@ -1466,7 +1466,7 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
       href="#"
     />
     <sup
-      class="ant-scroll-number ant-badge-count"
+      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
       title="99"
     >
@@ -1481,7 +1481,7 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
       href="#"
     />
     <sup
-      class="ant-scroll-number ant-badge-count"
+      class="ant-scroll-number ant-badge-count ant-badge-multiple-words"
       data-show="true"
       title="1000"
     >

components/badge/demo/basic.md

@@ -30,12 +30,12 @@ ReactDOM.render(
 
 <style>
 .ant-badge:not(.ant-badge-status) {
-  margin-right: 16px;
+  margin-right: 20px;
 }
 .head-example {
   width: 42px;
   height: 42px;
-  border-radius: 6px;
+  border-radius: 4px;
   background: #eee;
   display: inline-block;
 }

components/badge/index.tsx

@@ -71,6 +71,7 @@ export default class Badge extends React.Component<BadgeProps, any> {
     const scrollNumberCls = classNames({
       [`${prefixCls}-dot`]: isDot,
       [`${prefixCls}-count`]: !isDot,
+      [`${prefixCls}-multiple-words`]: count && count.toString && count.toString().length > 1,
     });
     const badgeCls = classNames(className, prefixCls, {
       [`${prefixCls}-status`]: !!status,

components/badge/style/index.less

@@ -33,6 +33,10 @@
     }
   }
 
+  &-multiple-words {
+    padding: 0 8px;
+  }
+
   &-dot {
     position: absolute;
     transform: translateX(-50%);