diff --git a/packages/button/src/button-group.js b/packages/button/src/button-group.js
deleted file mode 100644
index 9b8f70fdc..000000000
--- a/packages/button/src/button-group.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * button
- * @module components/basic/menu
- * @desc 用于按钮组
- * @param {string} label - 名称
- */
-export default {
-  name: 'ElButtonGroup',
-
-  functional: true,
-
-  render(h, { slots, data }) {
-    return (
-      <div
-        class="el-button-group"
-        { ...data }
-        { ...{ on: data.nativeOn } }>
-        { slots().default }
-      </div>
-    );
-  }
-};
diff --git a/packages/button/src/button-group.vue b/packages/button/src/button-group.vue
new file mode 100644
index 000000000..e562986a5
--- /dev/null
+++ b/packages/button/src/button-group.vue
@@ -0,0 +1,16 @@
+<template>
+  <div class="el-button-group">
+    <slot></slot>
+  </div>
+</template>
+<script>
+  /**
+   * button
+   * @module components/basic/menu
+   * @desc 用于按钮组
+   * @param {string} label - 名称
+   */
+  export default {
+    name: 'ElButtonGroup'
+  };
+</script>
diff --git a/packages/button/src/button.js b/packages/button/src/button.js
deleted file mode 100644
index 5e0157fa1..000000000
--- a/packages/button/src/button.js
+++ /dev/null
@@ -1,65 +0,0 @@
-export default {
-  name: 'ElButton',
-
-  functional: true,
-
-  props: {
-    type: {
-      type: String,
-      default: 'default'
-    },
-    size: String,
-    icon: {
-      type: String,
-      default: ''
-    },
-    nativeType: {
-      type: String,
-      default: 'button'
-    },
-    loading: {
-      type: Boolean,
-      default: false
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    },
-    plain: {
-      type: Boolean,
-      default: false
-    }
-  },
-
-  render(h, { props, slots, data }) {
-    return (
-      <button
-        disabled={ props.disabled }
-        type={ props.nativeType }
-        class={[
-          'el-button',
-          props.type ? 'el-button-' + props.type : '',
-          props.size ? 'el-button-' + props.size : '',
-          {
-            'is-disabled': props.disabled,
-            'is-loading': props.loading,
-            'is-plain': props.plain
-          }
-        ]}
-        { ...data }
-        { ...{ on: data.nativeOn } }>
-        {
-          [
-            props.loading
-              ? <i class="el-icon-loading"></i>
-              : {},
-            props.icon && !props.loading
-              ? <i class={ 'el-icon-' + props.icon }></i>
-              : {}
-          ]
-        }
-        { slots().default }
-      </button>
-    );
-  }
-};
diff --git a/packages/button/src/button.vue b/packages/button/src/button.vue
new file mode 100644
index 000000000..714339832
--- /dev/null
+++ b/packages/button/src/button.vue
@@ -0,0 +1,54 @@
+<template>
+  <button :disabled="disabled" class="el-button"
+    :type="nativeType"
+    :class="[
+      type ? 'el-button-' + type : '',
+      size ? 'el-button-' + size : '',
+      {
+        'is-disabled': disabled,
+        'is-loading': loading,
+        'is-plain': plain
+      }
+    ]"
+  >
+    <i class="el-icon-loading" v-if="loading"></i>
+    <i :class="'el-icon-' + icon" v-if="icon && !loading"></i>
+    <slot></slot>
+  </button>
+</template>
+<script>
+  /**
+   * button
+   */
+  export default {
+    name: 'ElButton',
+
+    props: {
+      type: {
+        type: String,
+        default: 'default'
+      },
+      size: String,
+      icon: {
+        type: String,
+        default: ''
+      },
+      nativeType: {
+        type: String,
+        default: 'button'
+      },
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      plain: {
+        type: Boolean,
+        default: false
+      }
+    }
+  };
+</script>
diff --git a/packages/icon/index.js b/packages/icon/index.js
index 3c4621715..2b43b70df 100644
--- a/packages/icon/index.js
+++ b/packages/icon/index.js
@@ -1 +1 @@
-module.exports = require('./src/icon');
+module.exports = require('./src/icon.vue');
diff --git a/packages/icon/src/icon.js b/packages/icon/src/icon.js
deleted file mode 100644
index dc6c3d4b1..000000000
--- a/packages/icon/src/icon.js
+++ /dev/null
@@ -1,19 +0,0 @@
-export default {
-  name: 'ElIcon',
-
-  functional: true,
-
-  props: {
-    name: String
-  },
-
-  render(h, { props, data }) {
-    return (
-      <i
-        class={ 'el-icon' + props.name }
-        { ...data }
-        { ...{ on: data.nativeOn } }>
-      </i>
-    );
-  }
-};
diff --git a/packages/icon/src/icon.vue b/packages/icon/src/icon.vue
new file mode 100644
index 000000000..b53ac30b8
--- /dev/null
+++ b/packages/icon/src/icon.vue
@@ -0,0 +1,13 @@
+<template>
+  <i :class="'el-icon-' + name"></i>
+</template>
+
+<script>
+  export default {
+    name: 'ElIcon',
+
+    props: {
+      name: String
+    }
+  };
+</script>