diff --git a/examples/views/docs/component/button.md b/examples/views/docs/component/button.md
index 09d5a24..3cccd79 100644
--- a/examples/views/docs/component/button.md
+++ b/examples/views/docs/component/button.md
@@ -1,30 +1,121 @@
 # Button 按钮
 
-基础按钮
+按钮组件，可配置多种不同的按钮样式
 
-## 基础用法
+## 按钮类型
 
-按钮说明
+配置`type`属性改变按钮类型
 
-::: snippet 示例
+::: snippet 支持`default`、`primary`、`secondary`, `link`，默认为`default`
 
 ```html
 <template>
   <div>
-    <zui-button>普通按钮</zui-button>
+    <zui-button disabled>Default</zui-button>
+    <zui-button type="primary">Primary</zui-button>
+    <zui-button type="secondary">Secondary</zui-button>
+    <zui-button type="link">链接</zui-button>
+  </div>
+</template>
+```
+
+:::
+
+## 按钮形状
+
+支持默认、圆角、矩形按钮
+
+::: snippet 配置`round`为圆角按钮、配置`square`为矩形按钮
+
+```html
+<template>
+  <div>
+    <zui-button>默认按钮</zui-button>
     <zui-button round>圆角按钮</zui-button>
-    <zui-button rect>矩形按钮</zui-button>
+    <zui-button square>矩形按钮</zui-button>
+  </div>
+</template>
+```
+
+:::
+
+## 按钮大小
+
+配置`size`属性改变按钮大小
+
+::: snippet 支持`sm`、`md`、`lg`，默认为`md`
+
+```html
+<template>
+  <div>
+    <zui-button size="sm">小型按钮</zui-button>
+    <zui-button size="md" type="secondary">中型按钮</zui-button>
+    <zui-button size="lg" type="primary">大型按钮</zui-button>
+  </div>
+</template>
+```
+
+:::
+
+
+## 块级元素
+
+宽度占满一行的按钮
+
+::: snippet 配置`block`
+
+```html
+<template>
+  <div>
+    <zui-button type="primary" size="lg" square block>确定</zui-button>
+    <zui-button size="lg" square block>取消</zui-button>
+  </div>
+</template>
+```
+
+:::
+
+## 按钮禁用
+
+按钮支持禁用
+
+::: snippet 配置`disabled`
+
+```html
+<template>
+  <div>
+    <zui-button type="primary" @click="handleClick">普通按钮</zui-button>
+    <zui-button disabled @click="handleClick">禁用按钮</zui-button>
   </div>
 </template>
 
 <script>
 export default {
-  data() {
-    return {
+  methods: {
+    handleClick() {
+      console.log('click');
     }
-  },
+  } 
 }
 </script>
 ```
 
-:::
\ No newline at end of file
+:::
+
+## API
+
+## Attribute 属性
+
+参数|说明|类型|可选值|默认值
+-|-|-|-|-
+type | 按钮类型 | String | default、primary、secondary | default
+block | 块状按钮 | Boolean | true、false | false
+round | 圆角按钮 | Boolean | true、false | false
+square | 矩形按钮 | Boolean | true、false | false
+disabled | 按钮禁用 | Boolean | true、false | false
+
+## Events 事件
+
+事件名称|说明|回调参数
+-|-|-
+click | 按钮点击事件 | -
\ No newline at end of file
diff --git a/packages/button/index.css b/packages/button/index.css
index 0a96898..4f9bdc6 100644
--- a/packages/button/index.css
+++ b/packages/button/index.css
@@ -1,12 +1,72 @@
 .zui-button {
-  background-color: #FCD404;
-  color: #FFF;
+  color: #323233;
+  background-color: #fff;
+  border: 1px solid #ebedf0;
   padding: 5px 15px;
   font-size: 14px;
   cursor: pointer;
   transition: background-color 300ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.zui-button.sm {
+  padding: 2px 4px;
+  font-size: 10px;
+}
+
+.zui-button.lg {
+  padding: 10px 20px;
+  font-size: 18px;
 }
 
 .zui-button:active {
+  background-color: #e6e6e6;
+  border-color: #e6e6e6;
+}
+
+.zui-button.primary {
+  background-color: #FCD404;
+  border-color: #FCD404;
+  color: #FFF;
+}
+
+.zui-button.primary:active {
   background-color: #d6ab00;
+  border-color: #d6ab00;
+}
+
+.zui-button.secondary {
+  background-color: #ffffe6;
+  border-color: #ffffe6;
+  color: #FCD404;
+}
+
+.zui-button.secondary:active {
+  background-color: #f7f7df;
+  border-color: #f7f7df;
+}
+
+.zui-button.link {
+  padding: 5px 15px;
+  background: inherit;
+  border: inherit;
+  color: #FCD404;
+}
+
+.zui-button.link:active {
+  color: #d6ab00;
+}
+
+.zui-button.disabled {
+  border-color: #f5f5f5;
+  background-color: #f5f5f5;
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.zui-button.disabled:active {
+  border-color: #f5f5f5;
+  background-color: #f5f5f5;
 }
\ No newline at end of file
diff --git a/packages/button/index.vue b/packages/button/index.vue
index 663b043..bd4cd76 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="zui-button" :style="style" @click="onClick">
+  <div class="zui-button" :class="classRender" :style="style" @click="onClick">
     <slot></slot>
   </div>
 </template>
@@ -8,35 +8,42 @@
 export default {
   name: 'Button',
   props: {
+    type: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: 'md'
+    },
     block: {
       type: Boolean,
       default: false
     },
     round: Boolean,
-    rect: Boolean,
-  },
-  data: function() {
-    return {
-
-    };
+    square: Boolean,
+    disabled: Boolean,
   },
   computed: {
     style: function() {
-      return { display: this.block ? 'block' : 'inline-block', borderRadius: this.borderRadius };
+      return { display: this.block ? '' : 'inline-block', borderRadius: this.borderRadius };
     },
     borderRadius: function() {
       if (this.round) {
         return '20px';
-      } else if (this.rect) {
+      } else if (this.square) {
         return '0';
       } else {
         return '4px';
       }
+    },
+    classRender: function() {
+      return [this.size, this.disabled ? 'disabled' : '', this.block ? 'block' : '', this.type];
     }
   },
   methods: {
     onClick: function() {
-      if (this.$listeners['click']) {
+      if (this.$listeners['click'] && !this.disabled) {
         this.$emit('click');
       }
     }
diff --git a/packages/cell/index.css b/packages/cell/index.css
index 080e2bf..643c718 100644
--- a/packages/cell/index.css
+++ b/packages/cell/index.css
@@ -10,7 +10,6 @@
   overflow: hidden;
   color: #323233;
   font-size: 14px;
-  line-height: 24px;
   background-color: #fff;
 }
 
@@ -32,9 +31,7 @@
 
 .zui-cell__left-icon, .zui-cell__right-icon {
   min-width: 1em;
-  height: 24px;
   font-size: 16px;
-  line-height: 24px;
 }
 
 .zui-cell:not(:last-child)::after {
--
libgit2 0.21.0