diff --git a/examples/routers/badge.vue b/examples/routers/badge.vue
index e1b1946e..967730d9 100644
--- a/examples/routers/badge.vue
+++ b/examples/routers/badge.vue
@@ -52,6 +52,29 @@
                 <a href="//iviewui.com">我是一个链接</a>
             </Badge>
         </div>
+        <div>
+            <Badge :count="count" type="primary">
+                <a href="#" class="demo-badge"></a>
+            </Badge>
+            <Badge :count="count" type="success">
+                <a href="#" class="demo-badge"></a>
+            </Badge>
+            <Badge :count="count" type="normal">
+                <a href="#" class="demo-badge"></a>
+            </Badge>
+            <Badge :count="count" type="info">
+                <a href="#" class="demo-badge"></a>
+            </Badge>
+            <Badge :count="count" type="error">
+                <a href="#" class="demo-badge"></a>
+            </Badge>
+            <Badge :count="count" type="warning">
+                <a href="#" class="demo-badge"></a>
+            </Badge>
+            <Badge :count="count">
+                <a href="#" class="demo-badge"></a>
+            </Badge>
+        </div>
     </div>
 </template>
 <script>
diff --git a/src/components/badge/badge.vue b/src/components/badge/badge.vue
index f3a976fd..9eb4bdab 100644
--- a/src/components/badge/badge.vue
+++ b/src/components/badge/badge.vue
@@ -42,6 +42,11 @@
                     return oneOf(value, ['success', 'processing', 'default', 'error', 'warning']);
                 }
             },
+            type: {
+                validator (value) {
+                    return oneOf(value, ['success', 'primary', 'normal', 'error', 'warning', 'info']);
+                }
+            },
             offset: {
                 type: Array
             }
@@ -58,7 +63,8 @@
                     `${prefixCls}-count`,
                     {
                         [`${this.className}`]: !!this.className,
-                        [`${prefixCls}-count-alone`]: this.alone
+                        [`${prefixCls}-count-alone`]: this.alone,
+                        [`${prefixCls}-count-${this.type}`]: !!this.type
                     }
                 ];
             },
diff --git a/src/styles/components/badge.less b/src/styles/components/badge.less
index 96a218f6..1e9f2b14 100644
--- a/src/styles/components/badge.less
+++ b/src/styles/components/badge.less
@@ -38,6 +38,26 @@
             position: relative;
             transform: translateX(0);
         }
+
+        &-primary{
+            background: @primary-color;
+        }
+        &-success{
+            background: @success-color;
+        }
+        &-error{
+            background: @error-color;
+        }
+        &-warning{
+            background: @warning-color;
+        }
+        &-info{
+            background: @info-color;
+        }
+        &-normal{
+            background: @normal-color;
+            color: @subsidiary-color;
+        }
     }
 
     &-dot {
diff --git a/src/styles/custom.less b/src/styles/custom.less
index 0a7bbac2..027d33bc 100644
--- a/src/styles/custom.less
+++ b/src/styles/custom.less
@@ -9,7 +9,7 @@
 @processing-color       : @primary-color;
 @warning-color          : #ff9900;
 @error-color            : #ed3f14;
-@normal-color           : #d9d9d9;
+@normal-color           : #e6ebf1;
 @link-color             : #2D8cF0;
 @link-hover-color       : tint(@link-color, 20%);
 @link-active-color      : shade(@link-color, 5%);