diff --git a/examples/router/routes.js b/examples/router/routes.js
index bbb580d..30c8a2a 100644
--- a/examples/router/routes.js
+++ b/examples/router/routes.js
@@ -42,6 +42,12 @@ const _components = [
         meta: { title: 'Icon 图标' },
         component: () => import('@/views/docs/component/icon.md'),
       },
+      {
+        path: 'tag',
+        name: 'tag',
+        meta: { title: 'Tag 标签' },
+        component: () => import('@/views/docs/component/tag.md'),
+      },
     ]
   },
   {
diff --git a/examples/views/docs/component/tag.md b/examples/views/docs/component/tag.md
new file mode 100644
index 0000000..1ebc7c6
--- /dev/null
+++ b/examples/views/docs/component/tag.md
@@ -0,0 +1,40 @@
+# Tag 标签
+
+参考 <a href="https://didi.github.io/mand-mobile/#/zh-CN/docs/components/basic/tag" target="_blank">Mand Mobile - Tag</a>
+
+## 基础用法
+
+标签说明
+
+::: snippet 示例
+
+```html
+<template>
+  <div>
+    <zui-tag>6</zui-tag>
+    <zui-tag size="tiny" shape="circle" type="fill" fill-color="#FC7353" font-color="#000">2</zui-tag>
+    <zui-tag
+      size="small"
+      shape="circle"
+      sharp="bottom-left"
+      type="fill"
+      fill-color="linear-gradient(90deg, #FC7353 0%, #FC9153 100%)"
+      font-color="#fff"
+    >续保3折起</zui-tag>
+    <zui-tag size="small" shape="circle" sharp="bottom-left" type="fill" fill-color="rgba(231, 64, 33, 1)" font-color="#fff">
+            发布3条
+          </zui-tag>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+    }
+  },
+}
+</script>
+```
+
+:::
\ No newline at end of file
diff --git a/packages/tag/index.css b/packages/tag/index.css
new file mode 100644
index 0000000..5369c51
--- /dev/null
+++ b/packages/tag/index.css
@@ -0,0 +1,146 @@
+.zui-tag {
+  font-size: 14px;
+  text-align: center;
+  display: inline-block;
+  -webkit-user-select: none;
+}
+.zui-tag .default {
+  background: rgba(0,0,0,0);
+  color: rgba(231, 64, 33, 1);
+  border-color: rgba(231, 64, 33, 1);
+}
+.zui-tag .shape-square {
+  padding: 0 6px;
+  border-radius: 50%;
+}
+.zui-tag .shape-square {
+  padding: 0 6px;
+  border-radius: 0;
+}
+.zui-tag .shape-fillet {
+  padding: 1px 4px;
+  border-radius: 1px;
+}
+.zui-tag .shape-quarter {
+  position: relative;
+  display: flex;
+  width: 28px;
+  height: 28px;
+  background: transparent;
+  overflow: hidden;
+}
+.zui-tag .shape-quarter .quarter-content {
+  position: relative;
+  left: 10%;
+  bottom: 10%;
+  display: flex;
+  flex: 1;
+  z-index: 2;
+  justify-content: center;
+  align-items: center;
+}
+.zui-tag .shape-quarter .quarter-bg {
+  position: absolute;
+  top: -100%;
+  left: 0;
+  width: 200%;
+  height: 200%;
+  border-radius: 50%;
+}
+.zui-tag .shape-quarter .quarter-wrap {
+  display: inline-block;
+  padding: 8px 6px 5px 13px;
+}
+.zui-tag .shape-quarter .quarter-wrap-hidden {
+  visibility: hidden;
+  display: inline-block;
+  padding: 8px 6px 5px 13px;
+}
+.zui-tag .shape-quarter.size-small {
+  width: 20px;
+  height: 20px;
+}
+.zui-tag .shape-quarter.size-tiny {
+  width: 12px;
+  height: 12px;
+}
+.zui-tag .shape-coupon {
+  position: relative;
+  padding: 0 5px;
+  background: transparent !important;
+}
+.zui-tag .shape-coupon .coupon-container {
+  padding: 1px 0;
+}
+.zui-tag .shape-coupon .left-coupon,
+.zui-tag .shape-coupon .right-coupon {
+  position: absolute;
+  top: 0;
+  width: 5px;
+  height: 100%;
+}
+.zui-tag .shape-coupon .left-coupon {
+  left: 0;
+}
+.zui-tag .shape-coupon .right-coupon {
+  right: 0;
+}
+.zui-tag .shape-coupon.size-small {
+  padding: 0 4px;
+}
+.zui-tag .shape-coupon.size-small .left-coupon,
+.zui-tag .shape-coupon.size-small .right-coupon {
+  width: 4px;
+}
+.zui-tag .shape-coupon.size-tiny {
+  padding: 0 2.5px;
+}
+.zui-tag .shape-coupon.size-tiny .left-coupon,
+.zui-tag .shape-coupon.size-tiny .right-coupon {
+  width: 2.5px;
+}
+.zui-tag .shape-bubble {
+  width: 25px;
+  padding: 3px 0;
+  border-radius: 50%;
+  border-bottom-left-radius: 0;
+  box-sizing: border-box;
+}
+.zui-tag .shape-bubble.size-small {
+  width: 19px;
+  padding: 1.5px 0;
+}
+.zui-tag .shape-bubble.size-tiny {
+  width: 12px;
+  padding: 1px 0;
+}
+.zui-tag .size-large {
+  font-size: 13px;
+}
+.zui-tag .size-small {
+  font-size: 10px;
+}
+.zui-tag .size-tiny {
+  font-size: 6px;
+}
+.zui-tag .type-fill {
+  color: #fff;
+  background: rgba(231, 64, 33, 1);
+}
+.zui-tag .type-ghost {
+  border: 1px solid rgba(231, 64, 33, 1);
+  background: rgba(0,0,0,0);
+}
+.zui-tag .font-weight-normal {
+  font-weight: normal;
+}
+.zui-tag .font-weight-bold {
+  font-weight: bold;
+}
+.zui-tag .font-weight-bolder {
+  font-weight: bolder;
+}
+.zui-tag .md-icon.icon-font {
+  font-size: inherit;
+  transform: scale(1.2);
+}
diff --git a/packages/tag/index.vue b/packages/tag/index.vue
new file mode 100644
index 0000000..10894c2
--- /dev/null
+++ b/packages/tag/index.vue
@@ -0,0 +1,149 @@
+<template>
+  <div class="zui-tag">
+    <template v-if="showQuarter">
+      <div :class="computedClass">
+        <div class="quarter-content">
+          <slot></slot>
+        </div>
+        <div class="quarter-bg" :style="colorStyle"></div>
+      </div>
+    </template>
+    <template v-else-if="showCoupon">
+      <div :class="computedClass">
+        <div class="coupon-container" :style="colorStyle">
+          <div class="left-coupon" :style="leftCoupon" v-if="showCoupon"></div>
+          <slot></slot>
+          <div class="right-coupon" :style="rightCoupon" v-if="showCoupon"></div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div :class="computedClass" :style="[colorStyle, sizeStyle]">
+        <slot></slot>
+      </div>
+    </template>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "Tag",
+  props: {
+    size: {
+      type: String, // tiny, small, large
+      default: "large"
+    },
+    shape: {
+      // square, circle, fillet, quarter, coupon, bubble
+      type: String,
+      default: "square"
+    },
+    sharp: {
+      // top-left, top-right, bottom-left, bottom-right
+      type: String,
+      default: ""
+    },
+    type: {
+      // fill ghost
+      type: String,
+      default: "ghost"
+    },
+    fillColor: {
+      type: String,
+      default: ""
+    },
+    fontWeight: {
+      // normal, bold, bolder
+      type: String,
+      default: "normal"
+    },
+    fontColor: {
+      type: String,
+      default: ""
+    }
+  },
+  data: function() {
+    return {
+      sizeStyle: {}
+    };
+  },
+  mounted() {
+    this.$nextTick(() => {
+      if (this.shape === "circle") {
+        var radius = this.$el.offsetHeight / 2;
+        this.$set(this.sizeStyle, "paddingLeft", radius / 2 + "px");
+        this.$set(this.sizeStyle, "paddingRight", radius / 2 + "px");
+        this.$set(this.sizeStyle, "borderRadius", radius + "px");
+        if (this.sharp) {
+          this.$set(
+            this.sizeStyle,
+            this.transformCamelCase("border-" + this.sharp + "-radius"),
+            0
+          );
+        }
+      }
+    });
+  },
+  computed: {
+    computedClass: function() {
+      return [
+        "default",
+        "size-" + this.size,
+        "shape-" + this.shape,
+        "type-" + this.type,
+        "font-weight-" + this.fontWeight
+      ];
+    },
+    colorStyle: function() {
+      var style = {};
+      if (this.type === "fill") {
+        // eslint-disable-next-line
+        this.fillColor && (style.background = this.fillColor);
+      }
+      if (this.fontColor) {
+        if (this.type === "ghost") {
+          style.borderColor = this.fontColor;
+        }
+        style.color = this.fontColor;
+      }
+      return style;
+    },
+    leftCoupon: function() {
+      return {
+        background: this.fillColor
+          ? "radial-gradient(circle at left, transparent 33%, " +
+            this.fillColor +
+            " 33%)"
+          : ""
+      };
+    },
+    rightCoupon: function() {
+      return {
+        background: this.fillColor
+          ? "radial-gradient(circle at right, transparent 33%, " +
+            this.fillColor +
+            " 33%)"
+          : ""
+      };
+    },
+    showQuarter: function() {
+      return this.shape === "quarter";
+    },
+    showCoupon: function() {
+      return this.shape === "coupon";
+    }
+  },
+  methods: {
+    transformCamelCase: function(str) {
+      var re = /-(\w)/g;
+      return str.replace(re, function($0, $1) {
+        return $1.toUpperCase();
+      });
+    }
+  }
+};
+</script>
+
+<style>
+@import "./index.css";
+</style>
\ No newline at end of file
--
libgit2 0.21.0