diff --git a/packages/varlet-ui/src/badge/Badge.vue b/packages/varlet-ui/src/badge/Badge.vue
new file mode 100644
index 00000000000..83ee0a68851
--- /dev/null
+++ b/packages/varlet-ui/src/badge/Badge.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="var-badge">
+    <transition name="var-fade">
+      <span
+        v-show="!hidden"
+        :class="[
+      `var-badge--${type}`,
+      'var-badge__content',
+      {'var-badge--dot':dot},
+      position?`var-badge--${position} var-badge--position`:null,
+      dotPosition
+      ]"
+        :style="{background:color}"
+      >
+        <var-icon v-if="icon" :name="icon"></var-icon>
+        <span v-else>{{values}}</span>
+      </span>
+    </transition>
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+	import { defineComponent, Ref, ref } from 'vue'
+	import { props } from './props'
+	import Icon from '../icon'
+
+	export default defineComponent({
+		name: 'VarBadge',
+		components: {
+			[Icon.name]: Icon
+		},
+		props,
+		setup(props) {
+			console.log(typeof props.value === 'number' && typeof props.maxValue === 'number')
+			console.log(props)
+			const values: Ref<number | string | null | undefined> = ref(null)
+			const dotPosition: Ref<string | null> = ref(null)
+			if (props.dot) {
+				values.value = null
+			} else if (typeof props.value === 'number' && typeof props.maxValue === 'number') {
+				values.value = props.value > props.maxValue ? `${props.maxValue}+` : props.value
+			} else {
+				values.value = props.value
+			}
+			if(props.position&&props.dot){
+				dotPosition.value = props.position.indexOf('right') !== -1 ? 'var-badge--dot-right' : props.position.indexOf('left') !== -1 ? 'var-badge--dot-left' : null
+			}
+			return {
+				values,
+        dotPosition
+			}
+		}
+	})
+</script>
+
+<style lang="less">
+  @import "./badge";
+</style>
diff --git a/packages/varlet-ui/src/badge/__tests__/index.spec.js b/packages/varlet-ui/src/badge/__tests__/index.spec.js
new file mode 100644
index 00000000000..b692cf95e71
--- /dev/null
+++ b/packages/varlet-ui/src/badge/__tests__/index.spec.js
@@ -0,0 +1,7 @@
+const Badge = require('../../../cjs/badge').default
+const { render } = require('@testing-library/vue')
+
+test('test badge', async () => {
+  const wrapper = render(Badge)
+  console.log(wrapper)
+})
diff --git a/packages/varlet-ui/src/badge/badge.less b/packages/varlet-ui/src/badge/badge.less
new file mode 100644
index 00000000000..bd72b6b8410
--- /dev/null
+++ b/packages/varlet-ui/src/badge/badge.less
@@ -0,0 +1,94 @@
+@import "../styles/var";
+
+.var {
+  &-fade-leave-to {
+    opacity: 0;
+  }
+
+  &-fade-leave-active {
+    transition: opacity .3s;
+  }
+}
+
+.var-badge {
+  display: inline-block;
+  position: relative;
+  &__content {
+    color: #fff;
+    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
+    border-radius: 100px;
+    font-size: 12px;
+    padding: 2px 6px;
+    vertical-align: middle;
+    text-align: center;
+    display: inline-block;
+    //.v-icon{
+    //  font-size: 12px;
+    //  margin: 0 -2px;
+    //}
+  }
+
+  &--default {
+    background: @color-background-base;
+  }
+
+  &--primary {
+    background: @color-primary;
+  }
+
+  &--info {
+    background: @color-info;
+  }
+
+  &--warning {
+    background: @color-warning;
+  }
+
+  &--success {
+    background: @color-success;
+  }
+
+  &--danger {
+    background: @color-danger;
+  }
+  &--right-top{
+    position: absolute;
+    top: 0;
+    right: 10px;
+    transform: translateY(-50%) translateX(100%);
+  }
+  &--left-top{
+    position: absolute;
+    top: 0;
+    left: 10px;
+    transform: translateY(-50%) translateX(-100%);
+  }
+  &--right-bottom{
+    position: absolute;
+    bottom: 0;
+    right: 10px;
+    transform: translateY(50%) translateX(100%);
+  }
+  &--left-bottom{
+    position: absolute;
+    bottom: 0;
+    left: 10px;
+    transform: translateY(50%) translateX(-100%);
+  }
+  &--position{
+    border: 2px #ffffff solid;
+  }
+  &--dot {
+    box-sizing: content-box;
+    width: 8px;
+    height: 8px;
+    border-radius: 8px;
+    padding: 0;
+  }
+  &--dot-right{
+    right: 6px;
+  }
+  &--dot-left{
+    left: 6px;
+  }
+}
diff --git a/packages/varlet-ui/src/badge/docs/en_US.md b/packages/varlet-ui/src/badge/docs/en_US.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/badge/docs/zh_CN.md b/packages/varlet-ui/src/badge/docs/zh_CN.md
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/packages/varlet-ui/src/badge/example/index.vue b/packages/varlet-ui/src/badge/example/index.vue
new file mode 100644
index 00000000000..0d81986b917
--- /dev/null
+++ b/packages/varlet-ui/src/badge/example/index.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="example">
+    <app-type>主题色徽标</app-type>
+    <var-badge :value="data1"></var-badge>
+    <var-badge :value="data1" type="primary"></var-badge>
+    <var-badge :value="data1" type="info"></var-badge>
+    <var-badge :value="data1" type="warning"></var-badge>
+    <var-badge :value="data1" type="success"></var-badge>
+    <var-badge :value="data2" type="danger"></var-badge>
+    <var-badge type="danger"></var-badge>
+    <app-type>圆点徽标</app-type>
+    <var-badge dot type="danger"></var-badge>
+    <app-type>其他dom一起用</app-type>
+    <div>
+      <span class="example-span">我是其他dom</span>
+      <var-badge dot type="danger">
+      </var-badge>
+    </div>
+
+    <app-type>不同徽标定位</app-type>
+
+    <var-badge type="danger" dot position="right-top">
+      <var-chip plain :round="false" color="#009688">右上</var-chip>
+    </var-badge>
+    <var-badge type="danger" dot position="right-bottom">
+      <var-chip plain :round="false" color="#009688">右下</var-chip>
+    </var-badge>
+    <var-badge type="danger" dot position="left-top">
+      <var-chip plain :round="false" color="#009688">左上</var-chip>
+    </var-badge>
+    <var-badge type="danger" position="left-bottom">
+      <var-chip plain :round="false" color="#009688">左下</var-chip>
+    </var-badge>
+
+    <app-type>最大值</app-type>
+    <var-badge type="danger" position="right-top" :value="88" :max-value="99">
+      <var-chip plain :round="false" color="#009688">小于等于最大值</var-chip>
+    </var-badge>
+    <var-badge type="danger" position="right-top" :value="666" :max-value="99">
+      <var-chip plain :round="false" color="#009688">大于最大值</var-chip>
+    </var-badge>
+
+    <app-type>是否显示徽标</app-type>
+
+    <var-button @click="handleChange">
+      点击改变状态
+    </var-button>
+    <var-badge type="danger" position="right-top" :hidden="hidden">
+      <var-chip plain :round="false" color="#009688">徽标</var-chip>
+    </var-badge>
+    <app-type>自定义徽标颜色</app-type>
+    <var-badge color="#6200ea" position="right-top">
+      <var-chip plain :round="false" color="#009688">徽标</var-chip>
+    </var-badge>
+    <app-type>添加图标</app-type>
+    <var-badge color="#6200ea" position="right-top" icon="account-circle">
+      <var-chip plain :round="false" color="#009688">徽标</var-chip>
+    </var-badge>
+  </div>
+
+
+</template>
+
+<script lang="ts">
+	import { defineComponent, Ref, ref } from 'vue'
+	import Badge from '..'
+	import Button from '../../button'
+	import Chip from '../../chip'
+
+	export default defineComponent({
+		name: 'BadgeExample',
+		components: {
+			[Badge.name]: Badge,
+			[Button.name]: Button,
+			[Chip.name]: Chip
+		},
+		setup() {
+			const data1: Ref<string | number> = ref(1)
+			const data2: Ref<string | number> = ref('hot')
+			const hidden: Ref<boolean> = ref(false)
+			const handleChange = () => {
+				hidden.value = !hidden.value
+			}
+			return {
+				data1,
+				data2,
+				hidden,
+				handleChange
+			}
+		}
+	})
+</script>
+
+<style scoped>
+  .var-badge {
+    margin-right: 20px;
+    margin-bottom: 8px;
+  }
+
+  .example-span {
+    font-size: 14px;
+    margin-right: 10px;
+  }
+</style>
diff --git a/packages/varlet-ui/src/badge/index.ts b/packages/varlet-ui/src/badge/index.ts
new file mode 100644
index 00000000000..e4928999fb6
--- /dev/null
+++ b/packages/varlet-ui/src/badge/index.ts
@@ -0,0 +1,7 @@
+import Badge from './Badge.vue'
+
+Badge.install = function(app: any) {
+  app.component(Badge.name, Badge)
+}
+
+export default Badge
diff --git a/packages/varlet-ui/src/badge/props.ts b/packages/varlet-ui/src/badge/props.ts
new file mode 100644
index 00000000000..e05620e29f8
--- /dev/null
+++ b/packages/varlet-ui/src/badge/props.ts
@@ -0,0 +1,48 @@
+function typeValidator(type: string): boolean {
+  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type)
+}
+
+function positionValidator(position: string): boolean {
+  return ['right-top', 'right-bottom', 'left-top', 'left-bottom'].includes(position)
+}
+
+export const props = {
+//  徽标类型
+  type: {
+    type: String,
+    default: 'default',
+    validator: typeValidator
+  },
+//  是否隐藏徽标
+  hidden: {
+    type: Boolean,
+    default: false
+  },
+//  是否是小圆点
+  dot: {
+    type: Boolean,
+    default: false
+  },
+//  显示的值
+  value: {
+    type: [String, Number],
+    default: 0
+  },
+// 显示最大值
+  maxValue: {
+    type: [String, Number]
+  },
+//  自定义徽标颜色
+  color: {
+    type: String
+  },
+//  定位位置
+  position: {
+    type: String,
+    validator: positionValidator
+  },
+//  图标
+  icon:{
+    type:String
+  }
+}
diff --git a/packages/varlet-ui/src/chip/Chip.vue b/packages/varlet-ui/src/chip/Chip.vue
index 22db5210621..e7d467b8a4b 100644
--- a/packages/varlet-ui/src/chip/Chip.vue
+++ b/packages/varlet-ui/src/chip/Chip.vue
@@ -11,7 +11,7 @@
       :class="[
 				`var-chip--${size}`,
 				block ? 'var--flex' : 'var--inline-flex',
-				round ? 'var-chip--round' : null,
+				{'var-chip--round':round},
 				plain ? `var-chip--plain-${type}` : `var-chip--${type}`,
 				plain ? `var-chip--plain` : `var-elevation--2`,
 			]"
diff --git a/packages/varlet-ui/src/chip/docs/zh_CN.md b/packages/varlet-ui/src/chip/docs/zh_CN.md
index 55867ff223a..4895e56bbe5 100644
--- a/packages/varlet-ui/src/chip/docs/zh_CN.md
+++ b/packages/varlet-ui/src/chip/docs/zh_CN.md
@@ -129,9 +129,9 @@ return {show,show1};
 
 ### 事件
 
-| 事件名 | 说明 | 回调参数 | 默认值 |
-| ---- | ---- | ---- | ----|
-|close |点击关闭按钮时触发，只有在显示关闭按钮的时候才能使用| _ | _ |
+| 事件名 | 说明 | 回调参数 |
+| ---- | ---- | ---- |
+| close | 点击关闭按钮时触发，只有在显示关闭按钮的时候才能使用| _ |
 
 
 
diff --git a/packages/varlet-ui/src/chip/example/index.vue b/packages/varlet-ui/src/chip/example/index.vue
index 24de43919cf..c72e53e62be 100644
--- a/packages/varlet-ui/src/chip/example/index.vue
+++ b/packages/varlet-ui/src/chip/example/index.vue
@@ -1,60 +1,61 @@
 <template>
-  <app-type class="example">
-    <app-type>主题色标签</app-type>
-    <var-chip type="primary">主要标签</var-chip>
-    <var-chip type="success">成功标签</var-chip>
-    <var-chip type="danger">危险标签</var-chip>
-    <var-chip type="warning">警告标签</var-chip>
-    <var-chip type="info">信息标签</var-chip>
-    <var-chip>默认标签</var-chip>
-    <app-type>空心样式标签</app-type>
+  <div class="example">
+      <app-type>主题色标签</app-type>
+      <var-chip type="primary">主要标签</var-chip>
+      <var-chip type="success">成功标签</var-chip>
+      <var-chip type="danger">危险标签</var-chip>
+      <var-chip type="warning">警告标签</var-chip>
+      <var-chip type="info">信息标签</var-chip>
+      <var-chip>默认标签</var-chip>
+      <app-type>空心样式标签</app-type>
 
-    <var-chip plain type="primary">空心标签</var-chip>
+      <var-chip plain type="primary">空心标签</var-chip>
 
-    <app-type>非圆角标签</app-type>
-    <var-chip :round="false" type="primary">非圆角标签</var-chip>
+      <app-type>非圆角标签</app-type>
+      <var-chip :round="false" type="primary">非圆角标签</var-chip>
 
-    <app-type>标签尺寸</app-type>
-    <var-chip size="large">大标签</var-chip>
-    <var-chip>中等标签</var-chip>
-    <var-chip size="small">小标签</var-chip>
-    <var-chip size="mini">迷你标签</var-chip>
-    <app-type>块级标签</app-type>
-    <var-chip type="primary" block>块级标签</var-chip>
-    <var-chip type="primary">块级标签</var-chip>
+      <app-type>标签尺寸</app-type>
+      <var-chip size="large">大标签</var-chip>
+      <var-chip>中等标签</var-chip>
+      <var-chip size="small">小标签</var-chip>
+      <var-chip size="mini">迷你标签</var-chip>
+      <app-type>块级标签</app-type>
+      <var-chip type="primary" block>块级标签</var-chip>
+      <var-chip type="primary">块级标签</var-chip>
 
-    <app-type>可关闭标签</app-type>
-    <var-chip closable v-if="show" @close="show = false">可关闭标签</var-chip>
-    <var-chip closable icon-name="delete" v-if="show1" @close="show1 = false">自定义关闭图标</var-chip>
+      <app-type>可关闭标签</app-type>
+      <var-chip closable v-if="show" @close="show = false">可关闭标签</var-chip>
+      <var-chip closable icon-name="delete" v-if="show1" @close="show1 = false">自定义关闭图标</var-chip>
+
+      <app-type>自定义颜色标签</app-type>
+      <var-chip color="#009688">标签</var-chip>
+      <var-chip color="#009688" plain>标签</var-chip>
+      <var-chip color="#faecd8" text-color="#e6a23c" plain>标签</var-chip>
+      <var-chip color="#faecd8" text-color="#e6a23c">标签</var-chip>
+      <app-type>添加左右插槽标签</app-type>
+      <var-chip type="primary" plain>
+        <template #left>
+          <var-icon name="star"></var-icon>
+        </template>
+        左侧插槽
+      </var-chip>
+      <var-chip type="primary" plain>
+        <template #right>
+          <var-icon name="fire"></var-icon>
+        </template>
+        右侧插槽
+      </var-chip>
+      <var-chip type="primary" plain>
+        <template #left>
+          <var-icon name="account-circle"></var-icon>
+        </template>
+        <template #right>
+          <var-icon name="cake-variant"></var-icon>
+        </template>
+        左右两侧插槽
+      </var-chip>
+  </div>
 
-    <app-type>自定义颜色标签</app-type>
-    <var-chip color="#009688">标签</var-chip>
-    <var-chip color="#009688" plain>标签</var-chip>
-    <var-chip color="#faecd8" text-color="#e6a23c" plain>标签</var-chip>
-    <var-chip color="#faecd8" text-color="#e6a23c">标签</var-chip>
-    <app-type>添加左右插槽标签</app-type>
-    <var-chip type="primary" plain>
-      <template #left>
-        <var-icon name="star"></var-icon>
-      </template>
-      左侧插槽
-    </var-chip>
-    <var-chip type="primary" plain>
-      <template #right>
-        <var-icon name="fire"></var-icon>
-      </template>
-      右侧插槽
-    </var-chip>
-    <var-chip type="primary" plain>
-      <template #left>
-        <var-icon name="account-circle"></var-icon>
-      </template>
-      <template #right>
-        <var-icon name="cake-variant"></var-icon>
-      </template>
-      左右两侧插槽
-    </var-chip>
-  </app-type>
 
 </template>
 
@@ -62,7 +63,6 @@
 	import { defineComponent, Ref, ref } from 'vue'
 	import Chip from '..'
 	import Icon from '../../icon'
-	import Snackbar from '../../snackbar'
 
 	export default defineComponent({
 		name: 'ChipExample',
@@ -92,10 +92,6 @@
 </script>
 
 <style scoped>
-  .example {
-    padding: 20px;
-  }
-
   .var-chip {
     margin-right: 8px;
     margin-bottom: 8px;
diff --git a/packages/varlet-ui/varlet.config.js b/packages/varlet-ui/varlet.config.js
index b693ebc6cba..ad2e666cb02 100644
--- a/packages/varlet-ui/varlet.config.js
+++ b/packages/varlet-ui/varlet.config.js
@@ -77,8 +77,8 @@ module.exports = {
 			},
 			{
 				text: {
-					zh_CN: 'chip 标签',
-					en_US: 'chip',
+					zh_CN: 'Chip 标签',
+					en_US: 'Chip',
 				},
 				doc: 'chip',
 			},