diff --git a/src/tag/_example/tag.less b/src/tag/_example/tag.less
index d7548a348..c3c8c5be3 100644
--- a/src/tag/_example/tag.less
+++ b/src/tag/_example/tag.less
@@ -1,31 +1,24 @@
 .group {
-  min-height: 56px;
-  margin: 16px 0;
-  padding: 0 16px;
+  padding: 32rpx;
   background-color: #fff;
   display: flex;
   align-items: center;
+  width: 100%;
 
   &.d-flex {
     display: flex;
     align-items: flex-start;
   }
 
-  .left {
-    width: 172px;
+  &.padding-bottom {
+    padding: 32rpx 32rpx 0;
   }
 
-  > view {
-    display: flex;
-    flex-direction: column;
-    padding-top: 16px;
-
-    .t-tag {
-      margin-bottom: 17px;
-    }
+  &.margin {
+    margin: 16rpx 0;
   }
 
   .t-tag {
-    margin: 0 4px;
+    margin-right: 32rpx;
   }
 }
diff --git a/src/tag/_example/tag.ts b/src/tag/_example/tag.ts
index 7648103e6..e6a64cbfb 100644
--- a/src/tag/_example/tag.ts
+++ b/src/tag/_example/tag.ts
@@ -1,17 +1,17 @@
 Page({
   data: {
-    show: true,
+    show: [true, true],
     items: [
       {
-        name: '已点击',
+        name: '选中',
         checked: true,
       },
       {
-        name: '未点击',
+        name: '未选中',
         checked: false,
       },
       {
-        name: '不可点击',
+        name: '不可选',
         checked: false,
         disabled: true,
       },
@@ -20,9 +20,14 @@ Page({
   handleCheckTagChange(e) {
     console.log(e.detail.checked);
   },
-  handleClose() {
+  handleClose0() {
     this.setData({
-      show: false,
+      [`show[0]`]: false,
+    });
+  },
+  handleClose1() {
+    this.setData({
+      [`show[1]`]: false,
     });
   },
 });
diff --git a/src/tag/_example/tag.wxml b/src/tag/_example/tag.wxml
index 437597f09..28e91e189 100644
--- a/src/tag/_example/tag.wxml
+++ b/src/tag/_example/tag.wxml
@@ -3,36 +3,73 @@
   <view class="demo-desc">用于表明主体的类目，属性或状态。</view>
 
   <t-demo title="01 类型" desc="展示型标签">
-    <view class="group">
-      <t-tag theme="primary">重要</t-tag>
-      <t-tag theme="danger">危险</t-tag>
-      <t-tag theme="warning">警告</t-tag>
+    <view class="group margin">
+      <t-tag theme="primary">默认</t-tag>
       <t-tag theme="success">成功</t-tag>
-      <t-tag theme="info">信息</t-tag>
+      <t-tag theme="warning">警告</t-tag>
+      <t-tag theme="danger">危险</t-tag>
+      <t-tag>信息</t-tag>
     </view>
 
-    <view class="group">
-      <t-tag theme="primary" variant="outline">镂空标签</t-tag>
-      <t-tag theme="primary" variant="light">浅底标签</t-tag>
-      <t-tag theme="primary" variant="light-outline">标签</t-tag>
+    <view class="group margin">
+      <t-tag theme="primary" variant="light">默认</t-tag>
+      <t-tag theme="success" variant="light">成功</t-tag>
+      <t-tag theme="warning" variant="light">警告</t-tag>
+      <t-tag theme="danger" variant="light">危险</t-tag>
+      <t-tag theme="default" variant="light">信息</t-tag>
     </view>
 
-    <view class="group">
-      <t-tag theme="primary" shape="circle">圆角标签</t-tag>
-      <t-tag theme="primary" shape="half-circle">半圆角标签</t-tag>
+    <view class="group margin">
+      <t-tag theme="primary" variant="outline">默认</t-tag>
+      <t-tag theme="success" variant="outline">成功</t-tag>
+      <t-tag theme="warning" variant="outline">警告</t-tag>
+      <t-tag theme="danger" variant="outline">危险</t-tag>
+      <t-tag theme="default" variant="outline">信息</t-tag>
     </view>
 
-    <view class="group">
-      <t-tag wx:if="{{show}}" bind:close="handleClose" closable theme="primary">标签</t-tag>
+    <view class="group margin">
+      <t-tag theme="primary" variant="light-outline">默认</t-tag>
+      <t-tag theme="success" variant="light-outline">成功</t-tag>
+      <t-tag theme="warning" variant="light-outline">警告</t-tag>
+      <t-tag theme="danger" variant="light-outline">危险</t-tag>
+      <t-tag theme="default" variant="light-outline">信息</t-tag>
     </view>
 
-    <view class="group">
+    <view class="group margin">
+      <t-tag theme="primary">深色</t-tag>
+      <t-tag theme="primary" variant="light">浅色</t-tag>
+      <t-tag theme="primary" variant="outline">描边</t-tag>
+      <t-tag theme="primary" variant="light-outline">描边浅色</t-tag>
+    </view>
+  </t-demo>
+  <t-demo title="" desc="带图标标签">
+    <view class="group margin">
+      <t-tag theme="primary">
+        标签
+        <t-icon name="app" size="14px" slot="icon" />
+      </t-tag>
+    </view>
+  </t-demo>
+  <t-demo title="" desc="圆角标签">
+    <view class="group margin">
+      <t-tag theme="primary" shape="round">圆弧</t-tag>
+      <t-tag theme="primary" shape="mark">半圆弧</t-tag>
+    </view>
+  </t-demo>
+  <t-demo title="" desc="可关闭标签">
+    <view class="group margin">
+      <t-tag wx:if="{{show[0]}}" bind:close="handleClose0" closable theme="primary">标签</t-tag>
+      <t-tag wx:if="{{show[1]}}" icon="app" bind:close="handleClose1" closable theme="primary">标签</t-tag>
+    </view>
+  </t-demo>
+  <t-demo title="" desc="超长省略文本标签">
+    <view class="group margin">
       <t-tag max-width="150" title="超长省略文本标签超长省略文本标签">超长省略文本标签超长省略文本标签</t-tag>
     </view>
   </t-demo>
 
   <t-demo title="02 状态" desc="标签状态">
-    <view class="group">
+    <view class="group margin">
       <t-check-tag
         wx:for="{{items}}"
         wx:for-index="index"
@@ -46,18 +83,15 @@
     </view>
   </t-demo>
 
-  <t-demo title="03 规格" desc="规格标签">
+  <t-demo title="03 规格" desc="标签规格">
+    <view class="group padding-bottom d-flex">
+      <t-tag size="large" theme="primary">展示标签30</t-tag>
+      <t-tag size="medium" theme="primary">展示标签24</t-tag>
+      <t-tag size="small" theme="primary">展示标签20</t-tag>
+    </view>
     <view class="group d-flex">
-      <view class="left">
-        <t-tag size="large" theme="primary">展示标签30</t-tag>
-        <t-tag size="medium" theme="primary">展示标签24</t-tag>
-        <t-tag size="small" theme="primary">展示标签22</t-tag>
-      </view>
-
-      <view class="right">
-        <t-check-tag size="large">点击标签30</t-check-tag>
-        <t-check-tag size="midium">点击标签24</t-check-tag>
-      </view>
+      <t-check-tag size="large">点击标签30</t-check-tag>
+      <t-check-tag size="medium">点击标签24</t-check-tag>
     </view>
   </t-demo>
 </view>
diff --git a/src/tag/check-tag.less b/src/tag/check-tag.less
index fe70dc260..5966abdfd 100644
--- a/src/tag/check-tag.less
+++ b/src/tag/check-tag.less
@@ -2,36 +2,47 @@
 
 @color-white: #fff;
 
-@tag-default-color: #444;
-@tag-default-background-color: #f5f5f5;
-@tag-default-border-color: #f5f5f5;
-
-@tag-disabled-color: #bbb;
-@tag-disabled-background-color: #f5f5f5;
-@tag-disabled-border-color: #f5f5f5;
+@tag-default-color: rgba(231, 231, 231, 1);
+@tag-default-background-color: #e7e7e7;
+@tag-default-border-color: #e7e7e7;
 
+@primary-color-disabled: #bbd3fb;
 @tag-primary-color: @primary-color;
+@tag-default-font-color: rgba(0, 0, 0, 0.9);
+
+@tag-disabled-color: rgba(0, 0, 0, 26%);
+@tag-disabled-background-color: rgba(231, 231, 231, 1);
+@tag-disabled-border-color: rgba(231, 231, 231, 1);
 
 @tag-checked-color: @primary-color;
 @tag-checked-border-color: @primary-color;
 @tag-checked-background-color: @primary-color;
 
-@tag-small-font-size: 20rpx;
-@tag-medium-font-size: 24rpx;
-@tag-large-font-size: 28rpx;
+@tag-small-padding: @spacer * 0.75 - 1px;
+@tag-medium-padding: @spacer - 1px;
+@tag-large-padding: @spacer-1 - 1px;
+
+@tag-small-font-size: @font-size;
+@tag-medium-font-size: @font-size-s;
+@tag-large-font-size: @font-size-base;
+
+@tag-small-height: 44rpx;
+@tag-medium-height: 48rpx;
+@tag-large-height: 60rpx;
+
+@border-radius-square: 4px;
+@border-radius-round: 999px;
+@border-radius-mark: @border-radius-round;
 
-@border-radius-square: 2px;
-@border-radius-round: 4px;
-@border-radius-circle: 999px;
+@themes: primary, success, warning, default, danger;
 
 .@{prefix}-tag {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   border: 2rpx solid transparent;
   box-sizing: border-box;
   border-radius: @border-radius-square;
-  padding: 0 24rpx;
-  font-size: 24rpx;
+  font-size: @tag-medium-font-size;
   // max-width: 240rpx;
   user-select: none;
 
@@ -40,56 +51,39 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 48rpx;
-    line-height: 48rpx;
+    height: @tag-medium-height;
+    line-height: @tag-medium-height;
   }
 
   &__content {
     width: 100%;
   }
 
-  .@{prefix}__icon {
-    font-size: @tag-medium-font-size;
-  }
-
-  &__icon-close {
-    display: flex;
-    align-items: center;
-    margin-left: 16rpx;
+  &__icon:not(:empty) + &__text:not(:empty),
+  &__text:not(:empty) + &__icon-close:not(:empty) {
+    margin-left: @spacer / 2;
   }
 
   &.@{prefix}-tag--size {
     &-small {
-      height: 44rpx;
-      line-height: 40rpx;
-      padding: 0 16rpx;
+      height: @tag-small-height;
+      line-height: @tag-small-height - 2px;
+      padding: 0 @tag-small-padding;
       font-size: @tag-small-font-size;
-
-      .@{prefix}-icon {
-        font-size: @tag-small-font-size;
-      }
     }
 
     &-medium {
-      height: 48rpx;
-      line-height: 44rpx;
-      padding: 0 24rpx;
+      height: @tag-medium-height;
+      line-height: @tag-medium-height - 2px;
+      padding: 0 @tag-medium-padding;
       font-size: @tag-medium-font-size;
-
-      .@{prefix}-icon {
-        font-size: @tag-medium-font-size;
-      }
     }
 
     &-large {
-      height: 60rpx;
-      line-height: 56rpx;
-      padding: 0 24rpx;
+      height: @tag-large-height;
+      line-height: @tag-large-height - 2px;
+      padding: 0 @tag-large-padding;
       font-size: @tag-large-font-size;
-
-      .@{prefix}-icon {
-        font-size: @tag-large-font-size;
-      }
     }
   }
 
@@ -101,17 +95,14 @@
     border-radius: @border-radius-round;
   }
 
-  &.@{prefix}-tag--circle {
-    border-radius: @border-radius-circle;
-  }
-
-  &.@{prefix}-tag--half-circle {
-    border-radius: 0 @border-radius-circle @border-radius-circle 0;
+  &.@{prefix}-tag--mark {
+    border-radius: 0 @border-radius-mark @border-radius-mark 0;
   }
 
   &.@{prefix}-tag--checkable {
     cursor: pointer;
-    color: @tag-default-color;
+    // -webkit-tap-highlight-color: transparent;
+    color: @tag-default-font-color;
     background-color: @tag-default-background-color;
     border-color: @tag-default-border-color;
 
@@ -121,15 +112,11 @@
       border-color: @tag-primary-color;
     }
 
-    &.@{prefix}-tag--disabled {
-      cursor: not-allowed;
-      color: @tag-disabled-color;
-      background-color: @tag-disabled-background-color;
-      border-color: @tag-disabled-border-color;
+    &.@{prefix}-tag--checked.@{prefix}-tag--disabled {
+      color: @color-white;
+      background-color: @primary-color-disabled;
     }
-  }
 
-  &.@{prefix}-tag--closable {
     &.@{prefix}-tag--disabled {
       cursor: not-allowed;
       color: @tag-disabled-color;
diff --git a/src/tag/check-tag.ts b/src/tag/check-tag.ts
index a48c558bf..012952306 100644
--- a/src/tag/check-tag.ts
+++ b/src/tag/check-tag.ts
@@ -8,8 +8,8 @@ const name = `${prefix}-tag`;
 @wxComponent()
 export default class CheckTag extends SuperComponent {
   data = {
+    prefix,
     classPrefix: name,
-    classBasePrefix: prefix,
   };
 
   properties = props;
@@ -22,7 +22,7 @@ export default class CheckTag extends SuperComponent {
   ];
 
   methods = {
-    onClickClose(e: WechatMiniprogram.BaseEvent) {
+    hangleClose(e: WechatMiniprogram.BaseEvent) {
       this.triggerEvent('close', e);
     },
 
diff --git a/src/tag/check-tag.wxml b/src/tag/check-tag.wxml
index 36528afa0..5e545f9f8 100644
--- a/src/tag/check-tag.wxml
+++ b/src/tag/check-tag.wxml
@@ -1,11 +1,17 @@
 <wxs src="./check-tag.wxs" module="this" />
 
 <view
-  class="{{this.getTagClass({classPrefix, classBasePrefix, size, checked, shape, disabled, closable})}}"
-  style="{{this.getTagStyle(maxWidth)}}"
+  class="{{this.getTagClass({classPrefix, prefix, size, checked, defaultChecked, shape, disabled, closable})}}"
   bind:tap="handleChange"
 >
-  <t-icon wx-if="{{icon}}" name="{{icon}}" />
-  <slot />
-  <t-icon wx:if="{{ closeable && !disabled }}" name="close" bind:click="onClickClose" />
+  <view class="{{classPrefix}}__icon">
+    <t-icon wx:if="{{icon}}" name="{{icon}}" size="{{this.getIconSize(size)}}" />
+    <slot wx:else name="icon" />
+  </view>
+  <view class="{{classPrefix}}__text" style="{{ this.getTagStyle(maxWidth) }}">
+    <slot />
+  </view>
+  <view wx:if="{{ closable && !disabled}}" class="{{classPrefix}}__icon-close" bind:tap="hangleClose">
+    <t-icon name="close" size="{{this.getIconSize(size)}}" />
+  </view>
 </view>
diff --git a/src/tag/check-tag.wxs b/src/tag/check-tag.wxs
index 0caf6230a..246b21f31 100644
--- a/src/tag/check-tag.wxs
+++ b/src/tag/check-tag.wxs
@@ -1,11 +1,11 @@
 var getTagClass = function (props) {
   var baseClass = props.classPrefix || '';
-  var prefix = props.classBasePrefix || '';
+  var prefix = props.prefix || '';
   var size = props.size || 'medium';
   var shape = props.shape || 'square';
   var closable = props.closable || false;
   var disabled = props.disabled || false;
-  var checked = props.checked || false;
+  var checked = props.checked || props.defaultChecked || false;
   var tagClass = [
     baseClass,
     baseClass + '--checkable',
@@ -13,9 +13,7 @@ var getTagClass = function (props) {
     disabled ? baseClass + '--disabled ' + prefix + '-is-disabled' : '',
     checked ? baseClass + '--checked ' + prefix + '-is-checked' : '',
     baseClass + '--size-' + size,
-    shape === 'shape' ? baseClass + '--square' : '',
-    shape === 'round' ? baseClass + '--round' : '',
-    shape === 'circle' ? baseClass + '--circle' : '',
+    baseClass + '--' + shape,
   ];
   return tagClass.join(' ');
 };
@@ -23,8 +21,17 @@ var getTagStyle = function (maxWidth) {
   if (!maxWidth) {
     return '';
   }
-  var width = typeof maxWidth === 'number' ? maxWidth + 'px' : maxWidth;
-  return 'maxWidth:' + width + ';';
+  var width = !isNaN(maxWidth) ? maxWidth + 'px' : maxWidth;
+  return 'max-width:' + width + ';';
+};
+var getIconSize = function (size) {
+  var sizeMap = {
+    small: '12px',
+    medium: '14px',
+    large: '18px',
+  };
+  return sizeMap[size];
 };
 module.exports.getTagClass = getTagClass;
 module.exports.getTagStyle = getTagStyle;
+module.exports.getIconSize = getIconSize;
diff --git a/src/tag/tag.less b/src/tag/tag.less
index 9c2d8e30c..80c0e5648 100644
--- a/src/tag/tag.less
+++ b/src/tag/tag.less
@@ -2,50 +2,54 @@
 
 @color-white: #fff;
 
-@tag-default-color: #444;
-@tag-default-background-color: #f5f5f5;
-@tag-default-border-color: #f5f5f5;
+@tag-default-color: rgba(231, 231, 231, 1);
+@tag-default-background-color: #e7e7e7;
+@tag-default-border-color: #e7e7e7;
 
+@primary-color-disabled: #bbd3fb;
 @tag-primary-color: @primary-color;
-@tag-info-color: #bbb;
 @tag-success-color: @success-color;
 @tag-warning-color: @warning-color;
 @tag-danger-color: @error-color;
 
-@tag-disabled-color: #bbb;
-@tag-disabled-background-color: #f5f5f5;
-@tag-disabled-border-color: #f5f5f5;
+@tag-default-font-color: rgba(0, 0, 0, 0.9);
+@tag-primary-font-color: @color-white;
+@tag-success-font-color: @color-white;
+@tag-warning-font-color: @color-white;
+@tag-danger-font-color: @color-white;
 
-@tag-small-padding: 3px;
-@tag-medium-padding: 3px;
-@tag-large-padding: 3px;
+@tag-disabled-color: rgba(0, 0, 0, 26%);
+@tag-disabled-background-color: rgba(231, 231, 231, 1);
+@tag-disabled-border-color: rgba(231, 231, 231, 1);
 
-@tag-small-font-size: 12px;
-@tag-medium-font-size: 14px;
-@tag-large-font-size: 16px;
+@tag-small-padding: @spacer * 0.75 - 1px;
+@tag-medium-padding: @spacer - 1px;
+@tag-large-padding: @spacer-1 - 1px;
 
-@border-radius-square: 2px;
-@border-radius-round: 4px;
-@border-radius-circle: 999px;
+@tag-small-font-size: @font-size;
+@tag-medium-font-size: @font-size-s;
+@tag-large-font-size: @font-size-base;
 
-@themes: primary, success, warning, info, danger;
+@tag-small-height: 44rpx;
+@tag-medium-height: 48rpx;
+@tag-large-height: 60rpx;
 
-.genEffect(@fontColorWeight; @borderColorWeight; @backgroundColorWeight; @hoverColorWeight) {
-  &.@{prefix}-tag--theme-default {
-    color: @tag-default-color;
-    border-color: @tag-default-border-color;
-    background-color: @tag-default-background-color;
-  }
+@border-radius-square: 8rpx;
+@border-radius-round: 999px;
+@border-radius-mark: @border-radius-round;
+
+@themes: primary, success, warning, default, danger;
 
+.genEffect(@fontColorWeight; @borderColorWeight; @backgroundColorWeight; @hoverColorWeight) {
   .for(@themes, @i: 1) when(@i =< length(@themes)) {
     @theme: extract(@themes, @i);
-
     @theme-color: 'tag-@{theme}-color';
+    @theme-font-color: 'tag-@{theme}-font-color';
 
     &.@{prefix}-tag--theme-@{theme} {
-      background-color: mix(@@theme-color, @color-white, @backgroundColorWeight);
-      border-color: mix(@@theme-color, @color-white, @borderColorWeight);
-      color: mix(@@theme-color, @color-white, @fontColorWeight);
+      background-color: mix(@@theme-color, @@theme-font-color, @backgroundColorWeight);
+      border-color: mix(@@theme-color, @@theme-font-color, @borderColorWeight);
+      color: mix(@@theme-color, @@theme-font-color, @fontColorWeight);
     }
 
     .for(@themes, (@i + 1));
@@ -55,13 +59,12 @@
 }
 
 .@{prefix}-tag {
-  display: inline-flex;
+  display: flex;
   align-items: center;
   border: 2rpx solid transparent;
   box-sizing: border-box;
   border-radius: @border-radius-square;
-  padding: 0 24rpx;
-  font-size: 24rpx;
+  font-size: @tag-medium-font-size;
   // max-width: 240rpx;
   user-select: none;
 
@@ -70,74 +73,39 @@
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    height: 48rpx;
-    line-height: 48rpx;
-  }
-
-  &--variant {
-    &-dark {
-      .genEffect(0, 100, 100, 100);
-    }
-
-    &-light {
-      .genEffect(100, 10, 10, 10);
-    }
-
-    &-outline {
-      .genEffect(100, 50, 0, 5);
-    }
-
-    &-light-outline {
-      .genEffect(100, 50, 10, 5);
-    }
+    height: @tag-medium-height;
+    line-height: @tag-medium-height;
   }
 
   &__content {
     width: 100%;
   }
 
-  .@{prefix}__icon {
-    font-size: @tag-medium-font-size;
-  }
-
-  &__icon-close {
-    display: flex;
-    align-items: center;
-    margin-left: 16rpx;
+  &__icon:not(:empty) + &__text:not(:empty),
+  &__text:not(:empty) + &__icon-close:not(:empty) {
+    margin-left: @spacer / 2;
   }
 
   &.@{prefix}-tag--size {
     &-small {
-      height: 44rpx;
-      line-height: 40rpx;
-      padding: 0 16rpx;
-      font-size: 20rpx;
-
-      .@{prefix}-icon {
-        font-size: 20rpx;
-      }
+      height: @tag-small-height;
+      line-height: @tag-small-height - 2px;
+      padding: 0 @tag-small-padding;
+      font-size: @tag-small-font-size;
     }
 
     &-medium {
-      height: 48rpx;
-      line-height: 44rpx;
-      padding: 0 24rpx;
-      font-size: 24rpx;
-
-      .@{prefix}-icon {
-        font-size: 24rpx;
-      }
+      height: @tag-medium-height;
+      line-height: @tag-medium-height - 2px;
+      padding: 0 @tag-medium-padding;
+      font-size: @tag-medium-font-size;
     }
 
     &-large {
-      height: 60rpx;
-      line-height: 56rpx;
-      padding: 0 24rpx;
-      font-size: 28rpx;
-
-      .@{prefix}-icon {
-        font-size: 28rpx;
-      }
+      height: @tag-large-height;
+      line-height: @tag-large-height - 2px;
+      padding: 0 @tag-large-padding;
+      font-size: @tag-large-font-size;
     }
   }
 
@@ -149,20 +117,47 @@
     border-radius: @border-radius-round;
   }
 
-  &.@{prefix}-tag--circle {
-    border-radius: @border-radius-circle;
+  &.@{prefix}-tag--mark {
+    border-radius: 0 @border-radius-mark @border-radius-mark 0;
   }
 
-  &.@{prefix}-tag--half-circle {
-    border-radius: 0 @border-radius-circle @border-radius-circle 0;
-  }
+  &--variant {
+    &-dark {
+      .genEffect(0, 100, 100, 100);
+    }
 
-  &.@{prefix}-tag--closable {
-    &.@{prefix}-tag--disabled {
-      cursor: not-allowed;
-      color: @tag-disabled-color;
-      background-color: @tag-disabled-background-color;
-      border-color: @tag-disabled-border-color;
+    &-light {
+      .genEffect(100, 10, 10, 10);
+      &.@{prefix}-tag--theme-default {
+        color: @tag-default-font-color;
+        border-color: rgba(243, 243, 243, 1);
+        background-color: rgba(243, 243, 243, 1);
+      }
+    }
+
+    &-outline {
+      .genEffect(100, 100, 0, 5);
+      &.@{prefix}-tag--theme-default {
+        color: @tag-default-font-color;
+        border-color: rgba(220, 220, 220, 1);
+        background-color: #fff;
+      }
     }
+
+    &-light-outline {
+      .genEffect(100, 100, 10, 5);
+      &.@{prefix}-tag--theme-default {
+        color: @tag-default-font-color;
+        border-color: rgba(220, 220, 220, 1);
+        background-color: rgba(243, 243, 243, 1);
+      }
+    }
+  }
+
+  &.@{prefix}-tag--disabled {
+    cursor: not-allowed;
+    color: @tag-disabled-color;
+    background-color: @tag-disabled-background-color;
+    border-color: @tag-disabled-border-color;
   }
 }
diff --git a/src/tag/tag.ts b/src/tag/tag.ts
index e8dbe828d..be9132ad0 100644
--- a/src/tag/tag.ts
+++ b/src/tag/tag.ts
@@ -8,15 +8,24 @@ const name = `${prefix}-tag`;
 @wxComponent()
 export default class Tag extends SuperComponent {
   data = {
+    prefix,
     classPrefix: name,
-    classBasePrefix: prefix,
   };
 
   externalClasses = [`${prefix}-class`];
 
+  options = {
+    multipleSlots: true,
+  };
+
   properties = props;
 
   methods = {
+    handleClick(e: WechatMiniprogram.BaseEvent) {
+      if (this.data.disabled) return;
+      this.triggerEvent('click', e);
+    },
+
     hangleClose(e: WechatMiniprogram.BaseEvent) {
       this.triggerEvent('close', e);
     },
diff --git a/src/tag/tag.wxml b/src/tag/tag.wxml
index e3d999660..69f635a24 100644
--- a/src/tag/tag.wxml
+++ b/src/tag/tag.wxml
@@ -1,16 +1,16 @@
 <wxs src="./tag.wxs" module="this" />
 <view
-  class="{{classBasePrefix}}-class {{ this.getTagClass({classBasePrefix, classPrefix, theme, size, variant, shape, disabled, closable}) }}"
+  class="{{prefix}}-class {{ this.getTagClass({prefix, classPrefix, theme, size, variant, shape, disabled, closable}) }}"
+  bind:tap="handleClick"
 >
-  <t-icon wx:if="{{icon}}" name="{{icon}}" />
+  <view class="{{classPrefix}}__icon">
+    <t-icon wx:if="{{icon}}" name="{{icon}}" size="{{this.getIconSize(size)}}" />
+    <slot wx:else name="icon" />
+  </view>
   <view class="{{classPrefix}}__text" style="{{ this.getTagStyle(maxWidth) }}">
     <slot />
   </view>
-  <view
-    wx:if="{{ closable && !disabled }}"
-    class="{{classPrefix}}__icon-close hotspot-expanded relative"
-    bind:tap="hangleClose"
-  >
+  <view wx:if="{{ closable && !disabled }}" class="{{classPrefix}}__icon-close" bind:tap="hangleClose">
     <t-icon name="close" size="{{this.getIconSize(size)}}" />
   </view>
 </view>
diff --git a/src/tag/tag.wxs b/src/tag/tag.wxs
index 12cb5ddd5..079180ad8 100644
--- a/src/tag/tag.wxs
+++ b/src/tag/tag.wxs
@@ -1,6 +1,6 @@
 var getTagClass = function (props) {
   var baseClass = props.classPrefix || '';
-  var prefix = props.classBasePrefix || '';
+  var prefix = props.prefix || '';
   var size = props.size || 'medium';
   var shape = props.shape || 'square';
   var theme = props.theme || 'default';
@@ -14,10 +14,7 @@ var getTagClass = function (props) {
     closable ? baseClass + '--closable ' + prefix + '-is-closable' : '',
     disabled ? baseClass + '--disabled ' + prefix + '-is-disabled' : '',
     baseClass + '--size-' + size,
-    shape === 'shape' ? baseClass + '--square' : '',
-    shape === 'round' ? baseClass + '--round' : '',
-    shape === 'circle' ? baseClass + '--circle' : '',
-    shape === 'half-circle' ? baseClass + '--half-circle' : '',
+    baseClass + '--' + shape,
   ];
   return tagClass.join(' ');
 };
@@ -28,14 +25,14 @@ var getTagStyle = function (maxWidth) {
   var width = !isNaN(maxWidth) ? maxWidth + 'px' : maxWidth;
   return 'max-width:' + width + ';';
 };
-var getIconSize = function(size) {
+var getIconSize = function (size) {
   var sizeMap = {
-    'small': '12px',
-    'medium': '16px',
-    'large': '20px'
+    small: '12px',
+    medium: '14px',
+    large: '18px',
   };
   return sizeMap[size];
-}
+};
 module.exports.getTagClass = getTagClass;
 module.exports.getTagStyle = getTagStyle;
 module.exports.getIconSize = getIconSize;