diff --git a/examples/docs/zh-cn/badge.md b/examples/docs/zh-cn/badge.md
index 0d1888d16a9..60558559226 100644
--- a/examples/docs/zh-cn/badge.md
+++ b/examples/docs/zh-cn/badge.md
@@ -23,7 +23,7 @@
 
 <el-dropdown trigger="click">
   <span class="el-dropdown-link">
-    点我查看<i class="el-icon-caret-bottom el-icon-right"></i>
+    点我查看<i class="el-icon-caret-bottom el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item class="clearfix">
diff --git a/examples/docs/zh-cn/button.md b/examples/docs/zh-cn/button.md
index a12d14cbfcc..5d6f69454da 100644
--- a/examples/docs/zh-cn/button.md
+++ b/examples/docs/zh-cn/button.md
@@ -35,6 +35,10 @@
       .el-button + .el-button {
         margin-left: 0;
       }
+
+      & + .el-button-group {
+        margin-left: 10px;
+      }
     }
   }
 
@@ -131,7 +135,7 @@
 <el-button type="primary" icon="share"></el-button>
 <el-button type="primary" icon="delete"></el-button>
 <el-button type="primary" icon="search">搜索</el-button>
-<el-button type="primary">上传<i class="el-icon-upload el-icon-right"></i></el-button>
+<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
 ```
 :::
 
@@ -144,7 +148,7 @@
 ```html
 <el-button-group>
   <el-button type="primary" icon="arrow-left">上一页</el-button>
-  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon-right"></i></el-button>
+  <el-button type="primary">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
 </el-button-group>
 <el-button-group>
   <el-button type="primary" icon="edit"></el-button>
diff --git a/examples/docs/zh-cn/dropdown.md b/examples/docs/zh-cn/dropdown.md
index 267473758bf..55d77db2ff8 100644
--- a/examples/docs/zh-cn/dropdown.md
+++ b/examples/docs/zh-cn/dropdown.md
@@ -60,7 +60,7 @@
 ```html
 <el-dropdown>
   <span class="el-dropdown-link">
-    下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
   </span>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -82,7 +82,7 @@
 ```html
 <el-dropdown>
   <el-button type="primary">
-    更多菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+    更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>
   </el-button>
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -117,7 +117,7 @@
     <span class="demonstration">hover 激活</span>
     <el-dropdown>
       <span class="el-dropdown-link">
-        下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>黄金糕</el-dropdown-item>
@@ -132,7 +132,7 @@
     <span class="demonstration">click 激活</span>
     <el-dropdown trigger="click">
       <span class="el-dropdown-link">
-        下拉菜单<i class="el-icon-caret-bottom el-icon-right"></i>
+        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>
       </span>
       <el-dropdown-menu slot="dropdown">
         <el-dropdown-item>黄金糕</el-dropdown-item>
diff --git a/examples/docs/zh-cn/progress.md b/examples/docs/zh-cn/progress.md
index 4a9a5573675..ed9ab55ef80 100644
--- a/examples/docs/zh-cn/progress.md
+++ b/examples/docs/zh-cn/progress.md
@@ -20,7 +20,7 @@
 
 ```html
 <el-progress :percentage="0"></el-progress>
-<el-progress :percentage="70" :show-text="false"></el-progress>
+<el-progress :percentage="70"></el-progress>
 <el-progress :percentage="100" status="success"></el-progress>
 <el-progress :percentage="50" status="exception"></el-progress>
 ```
diff --git a/packages/button/src/button.vue b/packages/button/src/button.vue
index 714339832ec..9686753704f 100644
--- a/packages/button/src/button.vue
+++ b/packages/button/src/button.vue
@@ -2,8 +2,8 @@
   <button :disabled="disabled" class="el-button"
     :type="nativeType"
     :class="[
-      type ? 'el-button-' + type : '',
-      size ? 'el-button-' + size : '',
+      type ? 'el-button--' + type : '',
+      size ? 'el-button--' + size : '',
       {
         'is-disabled': disabled,
         'is-loading': loading,
@@ -13,13 +13,10 @@
   >
     <i class="el-icon-loading" v-if="loading"></i>
     <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
-    <slot></slot>
+    <span v-if="$slots.default"><slot></slot></span>
   </button>
 </template>
 <script>
-  /**
-   * button
-   */
   export default {
     name: 'ElButton',
 
diff --git a/packages/input-number/src/input-number.vue b/packages/input-number/src/input-number.vue
index 465cf1f7599..619f8a1ea77 100644
--- a/packages/input-number/src/input-number.vue
+++ b/packages/input-number/src/input-number.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="el-input-number"
     :class="[
-      size ? 'is-' + size : '',
+      size ? 'el-input-number--' + size : '',
       { 'is-disabled': disabled }
     ]"
   >
diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index 6147fdabff9..4f43f43553c 100644
--- a/packages/input/src/input.vue
+++ b/packages/input/src/input.vue
@@ -1,7 +1,7 @@
 <template>
   <div :class="[
     type === 'textarea' ? 'el-textarea' : 'el-input',
-    size ? 'el-input-' + size : '',
+    size ? 'el-input--' + size : '',
     {
       'is-disabled': disabled,
       'el-input-group': $slots.prepend || $slots.append
diff --git a/packages/message-box/src/main.vue b/packages/message-box/src/main.vue
index c74268fdfd4..5535bc9bd63 100644
--- a/packages/message-box/src/main.vue
+++ b/packages/message-box/src/main.vue
@@ -16,7 +16,7 @@
         </div>
         <div class="el-message-box__btns">
           <el-button :class="[ cancelButtonClasses ]" v-show="showCancelButton" @click.native="handleAction('cancel')">{{ cancelButtonText }}</el-button>
-          <el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')" type="primary">{{ confirmButtonText }}</el-button>
+          <el-button :class="[ confirmButtonClasses ]" v-show="showConfirmButton" @click.native="handleAction('confirm')">{{ confirmButtonText }}</el-button>
         </div>
       </div>
     </transition>
@@ -71,10 +71,10 @@
       },
 
       confirmButtonClasses() {
-        return `el-button el-button-primary ${ this.confirmButtonClass }`;
+        return `el-button--primary ${ this.confirmButtonClass }`;
       },
       cancelButtonClasses() {
-        return `el-button el-button-default ${ this.cancelButtonClass }`;
+        return `${ this.cancelButtonClass }`;
       }
     },
 
diff --git a/packages/radio/src/radio-button.vue b/packages/radio/src/radio-button.vue
index 63c25367e2d..7863eba675c 100644
--- a/packages/radio/src/radio-button.vue
+++ b/packages/radio/src/radio-button.vue
@@ -32,7 +32,7 @@
   <label
     class="el-radio-button"
     :class="[
-      size ? 'el-radio-button-' + size : '',
+      size ? 'el-radio-button--' + size : '',
       { 'is-active': value === label }
     ]"
   >
diff --git a/packages/theme-default/src/button.css b/packages/theme-default/src/button.css
index dd9b98c9bd7..0fb24a53ef3 100644
--- a/packages/theme-default/src/button.css
+++ b/packages/theme-default/src/button.css
@@ -97,44 +97,42 @@
         background-color: rgba(255,255,255,.35);
       }
     }
-  }
-
-  @b button-primary {
-    @mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
-  }
-  @b button-success {
-    @mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
-  }
-  @b button-warning {
-    @mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
-  }
-  @b button-danger {
-    @mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
-  }
-  @b button-info {
-    @mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
-  }
-  @b button-text {
-    border: none;
-    color: var(--color-primary);
-    background: transparent;
-
-    &:hover {
-      color: tint(var(--color-primary), var(--button-hover-tint-percent));
+    @m primary {
+      @mixin button-variant var(--button-primary-color), var(--button-primary-fill), var(--button-primary-border);
     }
-    &:active {
-      color: shade(var(--color-primary), var(--button-active-shade-percent));
+    @m success {
+      @mixin button-variant var(--button-success-color), var(--button-success-fill), var(--button-success-border);
     }
-  }
+    @m warning {
+      @mixin button-variant var(--button-warning-color), var(--button-warning-fill), var(--button-warning-border);
+    }
+    @m danger {
+      @mixin button-variant var(--button-danger-color), var(--button-danger-fill), var(--button-danger-border);
+    }
+    @m info {
+      @mixin button-variant var(--button-info-color), var(--button-info-fill), var(--button-info-border);
+    }
+    @m text {
+      border: none;
+      color: var(--color-primary);
+      background: transparent;
 
-  @b button-large {
-    @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
-  }
-  @b button-small {
-    @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
-  }
-  @b button-mini {
-    @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
+      &:hover {
+        color: tint(var(--color-primary), var(--button-hover-tint-percent));
+      }
+      &:active {
+        color: shade(var(--color-primary), var(--button-active-shade-percent));
+      }
+    }
+    @m large {
+      @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), var(--button-border-radius);
+    }
+    @m small {
+      @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), var(--button-border-radius);
+    }
+    @m mini {
+      @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), var(--button-border-radius);
+    }
   }
 
   @b button-group {
@@ -171,7 +169,7 @@
     }
 
     @each $type in (primary, success, warning, danger, info) {
-      .el-button-$type {
+      .el-button--$type {
         &:first-child {
           border-right-color: rgba(#fff, 0.5);
         }
diff --git a/packages/theme-default/src/checkbox.css b/packages/theme-default/src/checkbox.css
index 658c08dff3a..ca9fadcbfe0 100644
--- a/packages/theme-default/src/checkbox.css
+++ b/packages/theme-default/src/checkbox.css
@@ -129,5 +129,9 @@
       font-size: var(--checkbox-font-size);
       padding-left: 5px;
     }
+
+    & + .el-checkbox {
+      margin-left: 15px;
+    }
   }
 }
diff --git a/packages/theme-default/src/dropdown.css b/packages/theme-default/src/dropdown.css
index f42b6f7ce72..7b839336b00 100644
--- a/packages/theme-default/src/dropdown.css
+++ b/packages/theme-default/src/dropdown.css
@@ -57,7 +57,7 @@
       margin: 0 3px;
     }
     @m text {
-      .el-button-text {
+      .el-button--text {
         padding: 0;
       }
     }
diff --git a/packages/theme-default/src/icon.css b/packages/theme-default/src/icon.css
index 4bfe1293531..bd2428cc3ee 100644
--- a/packages/theme-default/src/icon.css
+++ b/packages/theme-default/src/icon.css
@@ -69,10 +69,10 @@
   animation: rotating 1s linear infinite;
 }
 
-.el-icon-right {
+.el-icon--right {
   margin-left: 5px;
 }
-.el-icon-left {
+.el-icon--left {
   margin-right: 5px;
 }
 
diff --git a/packages/theme-default/src/input-number.css b/packages/theme-default/src/input-number.css
index b7877690663..0b83b7dc501 100644
--- a/packages/theme-default/src/input-number.css
+++ b/packages/theme-default/src/input-number.css
@@ -51,7 +51,7 @@
         }
       }
     }
-    @when large {
+    @m large {
       width: 200px;
 
       & .el-input-number__increase, .el-input-number__decrease {
@@ -63,7 +63,7 @@
         right: calc(var(--input-large-height) + 1px);
       }
     }
-    @when small {
+    @m small {
       width: 130px;
 
       & .el-input-number__increase, .el-input-number__decrease {
diff --git a/packages/theme-default/src/input.css b/packages/theme-default/src/input.css
index e5e2ef22f30..2708e807318 100644
--- a/packages/theme-default/src/input.css
+++ b/packages/theme-default/src/input.css
@@ -78,27 +78,26 @@
     .el-icon-loading {
       animation: validating-rotating 1s linear infinite;
     }
-  }
-
-  @b input-large {
-    font-size: var(--input-large-font-size);
+    @m large {
+      font-size: var(--input-large-font-size);
 
-    & .el-input__inner {
-      height: var(--input-large-height);
+      & .el-input__inner {
+        height: var(--input-large-height);
+      }
     }
-  }
-  @b input-small {
-    font-size: var(--input-small-font-size);
+    @m small {
+      font-size: var(--input-small-font-size);
 
-    & .el-input__inner {
-      height: var(--input-small-height);
+      & .el-input__inner {
+        height: var(--input-small-height);
+      }
     }
-  }
-  @b input-mini {
-    font-size: var(--input-mini-font-size);
+    @m mini {
+      font-size: var(--input-mini-font-size);
 
-    & .el-input__inner {
-      height: var(--input-mini-height);
+      & .el-input__inner {
+        height: var(--input-mini-height);
+      }
     }
   }
 
diff --git a/packages/theme-default/src/radio.css b/packages/theme-default/src/radio.css
index 74de19946ad..a48b28efe1d 100644
--- a/packages/theme-default/src/radio.css
+++ b/packages/theme-default/src/radio.css
@@ -13,7 +13,7 @@
     @utils-user-select none;
 
     & + .el-radio {
-      margin-left: 30px;
+      margin-left: 15px;
     }
     
     @e input {
@@ -143,13 +143,6 @@
         color: var(--color-primary);
       }
 
-      & .el-icon-right {
-        margin-left: 5px;
-      }
-      & .el-icon-left {
-        margin-right: 5px;
-      }
-
       & [class*="el-icon-"] {
         line-height: 0.9;
         
@@ -199,20 +192,20 @@
         border-radius: 0 var(--border-radius-base) var(--border-radius-base) 0;
       }
     }
-  }
-  @b radio-button-large {
-    & .el-radio-button__inner {
-      @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
+    @m large {
+      & .el-radio-button__inner {
+        @mixin button-size var(--button-large-padding-vertical), var(--button-large-padding-horizontal), var(--button-large-font-size), 0;
+      }
     }
-  }
-  @b radio-button-small {
-    & .el-radio-button__inner {
-      @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
+    @m small {
+      & .el-radio-button__inner {
+        @mixin button-size var(--button-small-padding-vertical), var(--button-small-padding-horizontal), var(--button-small-font-size), 0;
+      }
     }
-  }
-  @b radio-button-mini {
-    & .el-radio-button__inner {
-      @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
+    @m mini {
+      & .el-radio-button__inner {
+        @mixin button-size var(--button-mini-padding-vertical), var(--button-mini-padding-horizontal), var(--button-mini-font-size), 0;
+      }
     }
   }
 }
diff --git a/packages/theme-default/src/tree.css b/packages/theme-default/src/tree.css
index 020b76cec3d..2a5dbcb8847 100644
--- a/packages/theme-default/src/tree.css
+++ b/packages/theme-default/src/tree.css
@@ -16,11 +16,12 @@
       height: 36px;
       cursor: pointer;
 
-      & > input {
-        vertical-align: middle;
+      & > .el-checkbox,
+      & > .el-tree-node__expand-icon {
+        margin-right: 8px;
       }
-      & > * {
-        margin-right: 3px;
+      & > .el-checkbox {
+        vertical-align: middle;
       }
       &:hover {
         background: #e5e9f2;
diff --git a/test/unit/specs/button.spec.js b/test/unit/specs/button.spec.js
index d63a0260e22..ece8da7afb9 100644
--- a/test/unit/specs/button.spec.js
+++ b/test/unit/specs/button.spec.js
@@ -7,7 +7,7 @@ describe('Button', () => {
       type: 'primary'
     }, true);
     let buttonElm = vm.$el;
-    expect(buttonElm.classList.contains('el-button-primary')).to.be.true;
+    expect(buttonElm.classList.contains('el-button--primary')).to.be.true;
   });
   it('icon', () => {
     const vm = createTest(Button, {
@@ -43,7 +43,7 @@ describe('Button', () => {
       size: 'large'
     }, true);
     let buttonElm = vm.$el;
-    expect(buttonElm.classList.contains('el-button-large')).to.be.true;
+    expect(buttonElm.classList.contains('el-button--large')).to.be.true;
   });
   it('plain', () => {
     const vm = createTest(Button, {
diff --git a/test/unit/specs/input.spec.js b/test/unit/specs/input.spec.js
index 0e315d01691..9b6c6ab1fde 100644
--- a/test/unit/specs/input.spec.js
+++ b/test/unit/specs/input.spec.js
@@ -76,7 +76,7 @@ describe('Input', () => {
       `
     }, true);
 
-    expect(vm.$el.classList.contains('el-input-large')).to.true;
+    expect(vm.$el.classList.contains('el-input--large')).to.true;
   });
 
   it('type', () => {
diff --git a/test/unit/specs/message-box.spec.js b/test/unit/specs/message-box.spec.js
index d5b38018eca..6a6577fa4a7 100644
--- a/test/unit/specs/message-box.spec.js
+++ b/test/unit/specs/message-box.spec.js
@@ -72,7 +72,7 @@ describe('MessageBox', () => {
     });
     setTimeout(() => {
       document.querySelector('.el-message-box__wrapper')
-        .querySelector('.el-button-primary').click();
+        .querySelector('.el-button--primary').click();
       expect(document.querySelector('.el-message-box__wrapper')
         .__vue__.value).to.false;
       done();
@@ -163,7 +163,7 @@ describe('MessageBox', () => {
         });
       setTimeout(() => {
         document.querySelector('.el-message-box__wrapper')
-          .querySelector('.el-button-primary').click();
+          .querySelector('.el-button--primary').click();
       }, 300);
     });
 
@@ -175,7 +175,7 @@ describe('MessageBox', () => {
         });
       setTimeout(() => {
         document.querySelector('.el-message-box__wrapper')
-          .querySelector('.el-button-default').click();
+          .querySelector('.el-button').click();
       }, 300);
     });
   });