diff --git a/example/pages/btn/index.json b/example/pages/btn/index.json
index b92ec995..30791fdc 100644
--- a/example/pages/btn/index.json
+++ b/example/pages/btn/index.json
@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Button 按钮"
+  "navigationBarTitleText": "Button 按钮",
+  "usingComponents": {
+    "zan-button": "/dist/btn/index"
+  }
 }
diff --git a/example/pages/btn/index.wxml b/example/pages/btn/index.wxml
index 7eb0aa96..b4e65e14 100644
--- a/example/pages/btn/index.wxml
+++ b/example/pages/btn/index.wxml
@@ -5,51 +5,51 @@
   <view class="zan-panel-title">普通按钮</view>
   <view class="zan-panel">
     <view class="zan-btns">
-      <button class="zan-btn">取消订单</button>
-      <button class="zan-btn zan-btn--primary">确认付款</button>
-      <button class="zan-btn zan-btn--danger">确认付款</button>
-      <button class="zan-btn zan-btn--warn">确认付款</button>
+      <zan-button>取消订单</zan-button>
+      <zan-button type="primary">确认付款</zan-button>
+      <zan-button type="danger">确认付款</zan-button>
+      <zan-button type="warn">确认付款</zan-button>
     </view>
   </view>
 
   <view class="zan-panel-title">大号按钮，没有边框线及圆角</view>
   <view class="zan-panel">
-    <button class="zan-btn zan-btn--large zan-btn--primary">确认付款</button>
-    <button class="zan-btn zan-btn--large zan-btn--warn">立即购买</button>
-    <button class="zan-btn zan-btn--large zan-btn--danger">立即购买</button>
+    <zan-button size="large" type="primary">确认付款</zan-button>
+    <zan-button size="large" type="warn">立即购买</zan-button>
+    <zan-button size="large" type="danger">立即购买</zan-button>
   </view>
 
   <view class="zan-panel-title">小号按钮</view>
   <view class="zan-panel" style="padding: 15px;">
-    <button class="zan-btn zan-btn--small">取消订单</button>
-    <button class="zan-btn zan-btn--small zan-btn--primary">确认付款</button>
+    <zan-button size="small">取消订单</zan-button>
+    <zan-button size="small" type="primary">确认付款</zan-button>
   </view>
 
   <view class="zan-panel-title">迷你按钮</view>
   <view class="zan-panel" style="padding: 15px;">
-    <button class="zan-btn zan-btn--mini zan-btn--plain">取消订单</button>
-    <button class="zan-btn zan-btn--mini zan-btn--primary zan-btn--plain">确认付款</button>
-    <button class="zan-btn zan-btn--mini zan-btn--warn zan-btn--plain">确认付款</button>
-    <button class="zan-btn zan-btn--mini zan-btn--danger zan-btn--plain">确认付款</button>
+    <zan-button size="mini">取消订单</zan-button>
+    <zan-button size="mini" type="primary">确认付款</zan-button>
+    <zan-button size="mini" type="warn">确认付款</zan-button>
+    <zan-button size="mini" type="danger">确认付款</zan-button>
   </view>
 
   <view class="zan-panel-title">Loading</view>
   <view class="zan-panel">
     <view class="zan-btns">
-      <button class="zan-btn zan-btn--loading">取消订单</button>
-      <button class="zan-btn zan-btn--loading zan-btn--primary">确认付款</button>
-      <button class="zan-btn zan-btn--loading zan-btn--danger">确认付款</button>
-      <button class="zan-btn zan-btn--loading zan-btn--warn">确认付款</button>
+      <zan-button loading>取消订单</zan-button>
+      <zan-button loading type="primary">确认付款</zan-button>
+      <zan-button loading type="danger">确认付款</zan-button>
+      <zan-button loading type="warn">确认付款</zan-button>
     </view>
   </view>
 
   <view class="zan-panel-title">Disabled</view>
   <view class="zan-panel">
     <view class="zan-btns">
-      <button class="zan-btn zan-btn--disabled" disabled>取消订单</button>
-      <button class="zan-btn zan-btn--disabled zan-btn--primary" disabled>确认付款</button>
-      <button class="zan-btn zan-btn--disabled zan-btn--danger" disabled>确认付款</button>
-      <button class="zan-btn zan-btn--disabled zan-btn--warn" disabled>确认付款</button>
+      <zan-button disabled>取消订单</zan-button>
+      <zan-button disabled type="primary">确认付款</zan-button>
+      <zan-button disabled type="danger">确认付款</zan-button>
+      <zan-button disabled type="warn">确认付款</zan-button>
     </view>
   </view>
 
diff --git a/example/pages/tag/index.json b/example/pages/tag/index.json
index b1ca9e22..dede9488 100644
--- a/example/pages/tag/index.json
+++ b/example/pages/tag/index.json
@@ -1,3 +1,6 @@
 {
-  "navigationBarTitleText": "Tag 标记"
+  "navigationBarTitleText": "Tag 标记",
+  "usingComponents": {
+    "zan-tag": "/dist/tag/index"
+  }
 }
diff --git a/example/pages/tag/index.wxml b/example/pages/tag/index.wxml
index 4c345342..f8a23d57 100644
--- a/example/pages/tag/index.wxml
+++ b/example/pages/tag/index.wxml
@@ -4,27 +4,27 @@
 
   <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">
-      <view class="zan-tag">灰色</view>
-      <view class="zan-tag zan-tag--danger">红色</view>
-      <view class="zan-tag zan-tag--disabled">不可用</view>
+      <zan-tag>灰色</zan-tag>
+      <zan-tag type="danger">红色</zan-tag>
+      <zan-tag disabled>不可用</zan-tag>
     </view>
   </view>
   <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">
-      <view class="zan-tag zan-tag--danger">会员折扣</view>
-      <view class="zan-tag zan-tag--warn">返现</view>
-      <view class="zan-tag zan-tag--primary">返现</view>
-      <view class="zan-tag zan-tag--primary zan-tag--disabled">不可用</view>
+      <zan-tag type="danger">会员折扣</zan-tag>
+      <zan-tag type="warn">返现</zan-tag>
+      <zan-tag type="primary">返现</zan-tag>
+      <zan-tag type="primary" disabled>不可用</zan-tag>
     </view>
   </view>
 
     <view class="zan-panel">
     <view class="zan-cell zan-cell--last-child">
-      <view class="zan-tag zan-tag--plain">灰色</view>
-      <view class="zan-tag zan-tag--danger zan-tag--plain">会员折扣</view>
-      <view class="zan-tag zan-tag--warn zan-tag--plain">返现</view>
-      <view class="zan-tag zan-tag--primary zan-tag--plain">返现</view>
-      <view class="zan-tag zan-tag--primary zan-tag--plain zan-tag--disabled">返现不可用</view>
+      <zan-tag plain>灰色</zan-tag>
+      <zan-tag type="danger" plain>会员折扣</zan-tag>
+      <zan-tag type="warn" plain>返现</zan-tag>
+      <zan-tag type="primary" plain>返现</zan-tag>
+      <zan-tag type="primary" plain disabled>返现不可用</zan-tag>
     </view>
   </view>
 </view>
diff --git a/example/pages/tag/index.wxss b/example/pages/tag/index.wxss
index 9f37366d..e0876953 100644
--- a/example/pages/tag/index.wxss
+++ b/example/pages/tag/index.wxss
@@ -1,3 +1,3 @@
-.zan-tag + .zan-tag {
+zan-tag + zan-tag {
   margin-left: 10px;
 }
diff --git a/packages/btn/index.js b/packages/btn/index.js
new file mode 100644
index 00000000..079cb51c
--- /dev/null
+++ b/packages/btn/index.js
@@ -0,0 +1,22 @@
+
+Component({
+  externalClasses: ['custom-class'],
+  properties: {
+    type: {
+      type: String,
+      value: '',
+    },
+    size: {
+      type: String,
+      value: '',
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    },
+    loading: {
+      type: Boolean,
+      value: false,
+    },
+  },
+});
\ No newline at end of file
diff --git a/packages/btn/index.json b/packages/btn/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/btn/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
\ No newline at end of file
diff --git a/packages/btn/index.pcss b/packages/btn/index.pcss
index 034051ad..7fc54a73 100644
--- a/packages/btn/index.pcss
+++ b/packages/btn/index.pcss
@@ -150,9 +150,5 @@
 }
 
 /* :last-child */
-.zan-btn--last-child,
-.zan-btn:last-child {
-  margin-bottom: 0;
-  margin-right: 0;
-}
+
 
diff --git a/packages/btn/index.wxml b/packages/btn/index.wxml
new file mode 100644
index 00000000..f2bbf97d
--- /dev/null
+++ b/packages/btn/index.wxml
@@ -0,0 +1,7 @@
+
+<button 
+  class="custom-class zan-btn {{size ? 'zan-btn--'+size : ''}} {{size === 'mini' ? 'zan-btn--plain' : ''}} {{type ? 'zan-btn--'+type : ''}} {{loading ? 'zan-btn--loading' : ''}} {{disabled ? 'zan-btn--disabled' : ''}}"
+  disabled="{{disabled}}"
+>
+  <slot></slot>
+</button>
\ No newline at end of file
diff --git a/packages/tag/index.js b/packages/tag/index.js
new file mode 100644
index 00000000..9f1bcbd2
--- /dev/null
+++ b/packages/tag/index.js
@@ -0,0 +1,15 @@
+Component({
+  properties: {
+    type: {
+      type: String,
+    },
+    plain: {
+      type: Boolean,
+      value: false,
+    },
+    disabled: {
+      type: Boolean,
+      value: false,
+    }
+  }
+});
\ No newline at end of file
diff --git a/packages/tag/index.json b/packages/tag/index.json
new file mode 100644
index 00000000..32640e0d
--- /dev/null
+++ b/packages/tag/index.json
@@ -0,0 +1,3 @@
+{
+  "component": true
+}
\ No newline at end of file
diff --git a/packages/tag/index.wxml b/packages/tag/index.wxml
new file mode 100644
index 00000000..194034d9
--- /dev/null
+++ b/packages/tag/index.wxml
@@ -0,0 +1,6 @@
+
+<view 
+  class="zan-tag {{type ? 'zan-tag--'+type : ''}} {{disabled ? 'zan-tag--disabled' : ''}} {{plain ? 'zan-tag--plain' : ''}}"
+>
+  <slot></slot>
+</view>
\ No newline at end of file