diff --git a/components/badge/demo/99plus.md b/components/badge/demo/99plus.md
new file mode 100644
index 0000000000000000000000000000000000000000..331b95e47b4645d06fab6508aee1c92e4c8536de
--- /dev/null
+++ b/components/badge/demo/99plus.md
@@ -0,0 +1,20 @@
+# 大数字
+
+- order: 1
+
+超过 99 的会显示为 `99+`。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
, document.getElementById('components-badge-demo-99plus'));
+````
diff --git a/components/badge/demo/basic.md b/components/badge/demo/basic.md
new file mode 100644
index 0000000000000000000000000000000000000000..0ba2d3d5cfab59b4f87bf791ec002b13144875f6
--- /dev/null
+++ b/components/badge/demo/basic.md
@@ -0,0 +1,30 @@
+# 基本
+
+- order: 0
+
+简单的徽章展示。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
+
+
+
+, document.getElementById('components-badge-demo-basic'));
+````
+
+
diff --git a/components/badge/demo/dot.md b/components/badge/demo/dot.md
new file mode 100644
index 0000000000000000000000000000000000000000..7d1e8b7bd79e54093b0b5d214a5e132ce71cbc9e
--- /dev/null
+++ b/components/badge/demo/dot.md
@@ -0,0 +1,26 @@
+# 讨嫌的小红点
+
+- order: 3
+
+没有具体的数字。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
+
+
+
+, document.getElementById('components-badge-demo-dot'));
+````
+
+
diff --git a/components/badge/demo/link.md b/components/badge/demo/link.md
new file mode 100644
index 0000000000000000000000000000000000000000..61f723b4ea08463280f3c87071d6407ac691c4d4
--- /dev/null
+++ b/components/badge/demo/link.md
@@ -0,0 +1,19 @@
+# 可点击
+
+- order: 2
+
+用 a 标签进行包裹即可。
+
+---
+
+````jsx
+var Badge = antd.Badge;
+
+React.render(
+
+
+
+
+
+, document.getElementById('components-badge-demo-link'));
+````
diff --git a/components/badge/index.jsx b/components/badge/index.jsx
new file mode 100644
index 0000000000000000000000000000000000000000..13e87653709d936530ad6b89b4a9f84553d82a3e
--- /dev/null
+++ b/components/badge/index.jsx
@@ -0,0 +1,41 @@
+import React, { cloneElement } from 'react';
+const prefixCls = 'ant-badge';
+
+class AntBadge extends React.Component {
+ constructor(props) {
+ super(props);
+
+ this.state = {
+ count: props.count
+ };
+ }
+
+ render() {
+ if (this.props.dot) {
+ return
+ {this.props.children}
+
+ ;
+ }
+ let count = this.state.count;
+ if (!count) {
+ return cloneElement(this.props.children);
+ } else {
+ count = count >= 100 ? '99+' : count;
+ return (
+
+ {this.props.children}
+ {count}
+
+ );
+ }
+ }
+}
+
+AntBadge.defaultProps = {
+ prefixCls: prefixCls,
+ count: null,
+ dot: false
+};
+
+export default AntBadge;
diff --git a/components/badge/index.md b/components/badge/index.md
new file mode 100644
index 0000000000000000000000000000000000000000..e00e945aa4ec49f6e9d8ed1e175e4714008b00f7
--- /dev/null
+++ b/components/badge/index.md
@@ -0,0 +1,20 @@
+# Badge
+
+- category: Components
+- chinese: 徽标数字
+- type: 展示
+
+---
+
+图标右上角的徽标数字。
+
+## 何时使用
+
+一般出现在通知图标或头像的右上角,用于显示需要处理的消息条数。
+
+## API
+
+| 参数 | 说明 | 类型 | 可选值 | 默认值 |
+|----------------|----------------------------------|------------|---------|--------|
+| count | 展示的数字,大于 99 时显示为 99+ | Number | | |
+| dot | 不展示数字,只有一个小红点 | boolean | | false |
diff --git a/index.js b/index.js
index 0862816482443a613e3deed7ac2176d31392721f..dbae9fb45ec478afb90016db128276516d04b6dc 100644
--- a/index.js
+++ b/index.js
@@ -41,6 +41,7 @@ const antd = {
Validation: require('./components/validation'),
Tree: require('./components/tree'),
Upload: require('./components/upload'),
+ Badge: require('./components/badge'),
Menu: require('./components/menu')
};
diff --git a/style/components/badge.less b/style/components/badge.less
new file mode 100644
index 0000000000000000000000000000000000000000..7a03e120611f45812f81b524fc2173d9f237bb91
--- /dev/null
+++ b/style/components/badge.less
@@ -0,0 +1,46 @@
+@badge-prefix-cls: ~"@{css-prefix}badge";
+
+.@{badge-prefix-cls} {
+ position: relative;
+ display: inline-block;
+
+ &-count {
+ position: absolute;
+ transform: translateX(-50%);
+ top: -10px;
+ height: 20px;
+ border-radius: 10px;
+ min-width: 20px;
+ background: @error-color;
+ color: #fff;
+ line-height: 20px;
+ text-align: center;
+ padding: 0 7px;
+ font-size: 12px;
+ white-space: nowrap;
+ transition: all 0.3s ease;
+ z-index: 10;
+ font-family: tahoma;
+ &:hover {
+ background: tint(@error-color, 20%);
+ }
+ &:active {
+ background: shade(@error-color, 5%);
+ }
+ a, a:hover {
+ color: #fff;
+ }
+ }
+
+ &-dot {
+ position: absolute;
+ top: -4px;
+ right: -4px;
+ height: 8px;
+ width: 8px;
+ border-radius: 100%;
+ background: @error-color;
+ transition: all 0.3s ease;
+ z-index: 10;
+ }
+}
diff --git a/style/components/index.less b/style/components/index.less
index 5e29d83d7bf911b5e5dac40d2751a98aba09aeab..12d0b7e02da01259af4030957863ba1cc4ebf404 100644
--- a/style/components/index.less
+++ b/style/components/index.less
@@ -32,3 +32,4 @@
@import "upload";
@import "menu";
@import "affix";
+@import "badge";