diff --git a/components.json b/components.json
index 579038825..85636467e 100644
--- a/components.json
+++ b/components.json
@@ -10,5 +10,7 @@
   "dialog": "./packages/dialog/index.js",
   "picker": "./packages/picker/index.js",
   "radio-group": "./packages/radio-group/index.js",
-  "loading": "./packages/loading/index.js"
+  "loading": "./packages/loading/index.js",
+  "badge": "./packages/badge/index.js",
+  "badge-group": "./packages/badge-group/index.js"
 }
diff --git a/docs/examples-docs/badge.md b/docs/examples-docs/badge.md
new file mode 100644
index 000000000..c73d6a8e5
--- /dev/null
+++ b/docs/examples-docs/badge.md
@@ -0,0 +1,14 @@
+## Badge 组件
+
+### 基础用法
+
+:::demo 样例代码
+```html
+<z-badge-group>
+  <z-badge is-selected value="热销榜" info="8"></z-badge>
+  <z-badge value="花式寿司" info="99"></z-badge>
+  <z-badge value="火炽寿司"></z-badge>
+  <z-badge value="手握寿司" info="199"></z-badge>
+</z-badge-group>
+```
+:::
\ No newline at end of file
diff --git a/package.json b/package.json
index 98b435cd3..81ced6a56 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,7 @@
   ],
   "scripts": {
     "bootstrap": "npm i --registry=http://registry.npm.qima-inc.com",
-    "dev": "npm run bootstrap && npm run build:file && webpack-dev-server --inline --hot --config build/webpack.config.js",
+    "dev": "npm run bootstrap && npm run build:file && webpack-dev-server --port 8282 --inline --hot --config build/webpack.config.js",
     "build:file": "node build/bin/build-entry.js",
     "build:zanui-css": "gulp build --gulpfile packages/zanui-css/gulpfile.js && cp-cli packages/zanui-css/lib lib/zanui-css",
     "build:zanui": "webpack --progress --hide-modules --config  build/webpack.build.js && webpack --progress --hide-modules --config  build/webpack.build.min.js",
@@ -38,6 +38,7 @@
     "vue": "^2.1.8"
   },
   "devDependencies": {
+    "autoprefixer": "^6.7.5",
     "babel-cli": "^6.14.0",
     "babel-core": "^6.17.0",
     "babel-eslint": "^6.1.2",
@@ -49,6 +50,7 @@
     "babel-plugin-transform-vue-jsx": "^3.3.0",
     "babel-preset-es2015": "^6.16.0",
     "babel-runtime": "^6.11.0",
+    "cheerio": "^0.22.0",
     "copy-webpack-plugin": "^4.0.1",
     "cp-cli": "^1.0.2",
     "cross-env": "^3.1.3",
@@ -67,6 +69,7 @@
     "gulp": "^3.9.1",
     "gulp-cssmin": "^0.1.7",
     "gulp-postcss": "^6.1.1",
+    "gulp-util": "^3.0.8",
     "highlight.js": "^9.8.0",
     "html-loader": "^0.4.3",
     "html-webpack-plugin": "^2.22.0",
@@ -119,4 +122,4 @@
     "webpack-node-externals": "^1.5.4",
     "webpack-vendor-chunk-plugin": "^1.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/packages/badge-group/index.js b/packages/badge-group/index.js
new file mode 100644
index 000000000..2bff2f50d
--- /dev/null
+++ b/packages/badge-group/index.js
@@ -0,0 +1,3 @@
+import BadgeGroup from '../badge/src/badge-group';
+
+export default BadgeGroup;
diff --git a/packages/badge/CHANGELOG.md b/packages/badge/CHANGELOG.md
new file mode 100644
index 000000000..e88c472b3
--- /dev/null
+++ b/packages/badge/CHANGELOG.md
@@ -0,0 +1,8 @@
+## 0.0.2 (2017-01-20)
+
+* 改了bug A
+* 加了功能B
+
+## 0.0.1 (2017-01-10)
+
+* 第一版
diff --git a/packages/badge/README.md b/packages/badge/README.md
new file mode 100644
index 000000000..4c6172563
--- /dev/null
+++ b/packages/badge/README.md
@@ -0,0 +1,26 @@
+# @youzan/<%= name %>
+
+!!! 请在此处填写你的文档最简单描述 !!!
+
+[![version][version-image]][download-url]
+[![download][download-image]][download-url]
+
+[version-image]: http://npm.qima-inc.com/badge/v/@youzan/<%= name %>.svg?style=flat-square
+[download-image]: http://npm.qima-inc.com/badge/d/@youzan/<%= name %>.svg?style=flat-square
+[download-url]: http://npm.qima-inc.com/package/@youzan/<%= name %>
+
+## Demo
+
+## Usage
+
+## API
+
+| 参数       | 说明      | 类型       | 默认值       | 可选值       |
+|-----------|-----------|-----------|-------------|-------------|
+| className | 自定义额外类名 | string  | ''          | ''          |
+
+
+
+
+## License
+[MIT](https://opensource.org/licenses/MIT)
diff --git a/packages/badge/index.js b/packages/badge/index.js
new file mode 100644
index 000000000..dc8381205
--- /dev/null
+++ b/packages/badge/index.js
@@ -0,0 +1,3 @@
+import Badge from './src/badge';
+
+export default Badge;
diff --git a/packages/badge/package.json b/packages/badge/package.json
new file mode 100644
index 000000000..7dbfa2900
--- /dev/null
+++ b/packages/badge/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "<%= name %>",
+  "version": "<%= version %>",
+  "description": "<%= description %>",
+  "main": "./lib/index.js",
+  "author": "<%= author %>",
+  "license": "<%= license %>",
+  "devDependencies": {},
+  "dependencies": {}
+}
diff --git a/packages/badge/src/badge-group.vue b/packages/badge/src/badge-group.vue
new file mode 100644
index 000000000..1b928e828
--- /dev/null
+++ b/packages/badge/src/badge-group.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="z-badge-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'z-badge-group'
+};
+</script>
diff --git a/packages/badge/src/badge.vue b/packages/badge/src/badge.vue
new file mode 100644
index 000000000..e8df950ab
--- /dev/null
+++ b/packages/badge/src/badge.vue
@@ -0,0 +1,23 @@
+<template>
+    <a class="z-badge" :class="{ 'is-select' : isSelected }" :href="url" @click="handleClick">
+      <div class="z-badge__active"></div>
+      <div v-if="info" class="z-badge__info">{{info}}</div>
+      {{value}}
+    </a>
+</template>
+<script>
+export default {
+  name: 'z-badge',
+  props: {
+    url: String,
+    value: String,
+    info: String,
+    isSelected: Boolean
+  },
+  methods: {
+    handleClick() {
+      this.$emit('click');
+    }
+  }
+};
+</script>
\ No newline at end of file
diff --git a/packages/zanui-css/src/badge.css b/packages/zanui-css/src/badge.css
new file mode 100644
index 000000000..5e1d816ed
--- /dev/null
+++ b/packages/zanui-css/src/badge.css
@@ -0,0 +1,71 @@
+@import "./common/var.pcss";
+@import "./mixins/border_retina.pcss";
+
+@component-namespace z {
+    @b badge-group {
+        position: relative;
+        width: 85px;
+        &::after {
+          @mixin border-retina (top);
+        }
+    }
+    @b badge {
+        display: block;
+        overflow: hidden;
+        position: relative;
+        padding: 20px 15px;
+        box-sizing: border-box;
+        line-height: 14px;
+        background-color: $c-background;
+        color: $c-gray-darker;
+        font-size: 14px;
+        text-decoration: none;
+        white-space: nowrap;
+        @e active {
+            display: none;
+            position: absolute;
+            left: 0;
+            top: 0;
+            width: 3px;
+            height: 100%;
+            background-color: #FF4444;
+        }
+        @e info {
+            position: absolute;
+            top: 2px;
+            right: 2px;
+            font-size: 10px;
+            transform:scale(0.8);
+            text-align: center;
+            box-sizing: border-box;
+            padding: 0 6px;
+            min-width: 18px;
+            height: 18px;
+            line-height: 18px;
+            border-radius: 9px;
+            background-color: #FF4444;
+            color: $c-white;
+        }
+        @when select {
+            font-weight: bold;
+            color: $c-black;
+            background-color: $c-white;
+            .z-badge__active {
+                display: block;
+            }
+            &::after {
+                @mixin border-retina (top);
+                @mixin border-retina (right);
+                @mixin border-retina (left);
+            }
+        }
+        &::after {
+          @mixin border-retina (bottom);
+        }
+        &:last-child {
+          &::after {
+            border-bottom: 0;
+          }
+        }
+    }
+}
\ No newline at end of file
diff --git a/packages/zanui-css/src/index.css b/packages/zanui-css/src/index.css
index 50bad75d3..faf3315a5 100644
--- a/packages/zanui-css/src/index.css
+++ b/packages/zanui-css/src/index.css
@@ -12,3 +12,4 @@
 @import './popup.css';
 @import './radio.css';
 @import './switch.css';
+@import './badge.css';
diff --git a/src/index.js b/src/index.js
index d591aba7e..1ef347b6e 100644
--- a/src/index.js
+++ b/src/index.js
@@ -10,6 +10,8 @@ import Dialog from '../packages/dialog/index.js';
 import Picker from '../packages/picker/index.js';
 import RadioGroup from '../packages/radio-group/index.js';
 import Loading from '../packages/loading/index.js';
+import Badge from '../packages/badge/index.js';
+import BadgeGroup from '../packages/badge-group/index.js';
 
 const install = function(Vue) {
   if (install.installed) return;
@@ -25,6 +27,8 @@ const install = function(Vue) {
   Vue.component(Picker.name, Picker);
   Vue.component(RadioGroup.name, RadioGroup);
   Vue.component(Loading.name, Loading);
+  Vue.component(Badge.name, Badge);
+  Vue.component(BadgeGroup.name, BadgeGroup);
 };
 
 // auto install
@@ -46,5 +50,7 @@ module.exports = {
   Dialog,
   Picker,
   RadioGroup,
-  Loading
+  Loading,
+  Badge,
+  BadgeGroup
 };