diff --git a/src/app.js b/src/app.js
index 122aedd1a..276d33e7c 100644
--- a/src/app.js
+++ b/src/app.js
@@ -12,6 +12,8 @@ class App extends Component {
       'pages/action/progress/index',
       'pages/action/action-sheet/index',
       'pages/action/activity-indicator/index',
+      'pages/view/icon/index',
+      'pages/view/button/index',
     ],
     window: {
       backgroundTextStyle: 'light',
diff --git a/src/components/button/index.js b/src/components/button/index.js
index 1e8bab383..0e20bf0ae 100644
--- a/src/components/button/index.js
+++ b/src/components/button/index.js
@@ -1,8 +1,51 @@
 import Taro from "@tarojs/taro"
-import { Button } from "@tarojs/components"
+import { View } from "@tarojs/components"
+
+import './index.scss'
+
+const SIZE_CLASS = {
+  normal: 'normal',
+  large: 'large',
+  small: 'small',
+}
+
+const TYPE_CLASS = {
+  primary: 'primary',
+}
+
 
 export default class AtButton extends Taro.Component {
+  constructor() {
+    super(...arguments)
+    this.state = {
+      
+    }
+  }
+
+  onClick() {
+    console.log('ddasddas')
+  }
+
   render(){
-    return <Button className='at_button'>AtButton</Button>
+    let {
+      size = 'normal',
+      type = 'primary',
+      icon = '',
+      loading = false,
+      disabled = false,
+    } = this.props
+    let rootClassName = ['at-button']
+    let sizeClass = SIZE_CLASS[size] || ''
+    let disabledClass = disabled? 'at-button--disabled': ''
+    let typeClass = TYPE_CLASS[type]? `at-button--${type}`: ''
+
+    rootClassName.push(`at-button--${sizeClass}`, disabledClass, typeClass)
+    rootClassName = rootClassName.filter(str => str != '')
+console.log(this.props, this.state)
+    return (
+      <View className={rootClassName} onClick={this.onClick}>
+        测试按钮
+      </View>
+    )
   }
 }
diff --git a/src/components/button/index.scss b/src/components/button/index.scss
index e69de29bb..c0c2615d0 100644
--- a/src/components/button/index.scss
+++ b/src/components/button/index.scss
@@ -0,0 +1,27 @@
+
+.at-button {
+    width: 710px;
+    height: 92px;
+    line-height: 92px;
+    text-align: center;
+    border-radius: 8px;
+    font-size: 32px;
+    margin: 0 auto;
+    
+    border: 2px solid #6190E8;
+    background-color: #fff;
+    color: #6190E8;
+    box-sizing: border-box;
+    &--active {
+        opacity: .8;
+    }
+    &--disabled {
+        opacity: .5;
+    }
+    &--primary {
+        background-color: rgba(92, 137, 228, 1);
+        color: #fff;
+        border: none;
+
+    }
+}
\ No newline at end of file
diff --git a/src/components/icon/index.js b/src/components/icon/index.js
new file mode 100644
index 000000000..e10caaca5
--- /dev/null
+++ b/src/components/icon/index.js
@@ -0,0 +1,27 @@
+import Taro from '@tarojs/taro'
+import { View } from '@tarojs/components'
+
+import './index.scss'
+
+export default class AtIcon extends Taro.Component {
+  constructor() {
+    super(...arguments)
+  }
+
+  render() {
+    let { value, size = 24, color = '#000'} = this.props
+    
+    const rootStyle = {
+      // width: `${+size}px`,
+      // height: `${+size}px`,
+      fontSize: `${size}px`,
+      color,
+    }
+
+    let rootClassName = ['at-icon', `at-icon-${value}`]
+      
+    return (
+      <View className={rootClassName} style={rootStyle}></View>
+    )
+  }
+}
diff --git a/src/components/icon/index.scss b/src/components/icon/index.scss
new file mode 100644
index 000000000..63297dc81
--- /dev/null
+++ b/src/components/icon/index.scss
@@ -0,0 +1,31 @@
+
+
+@font-face {
+    font-family: 'fontello';
+    src: url('https://wq.360buyimg.com/data/ppms/others/fontello.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+.at-icon {
+    display: inline-block;
+    font-size: 24px;
+    color: #000;
+    &::after {
+        font-family: fontello;
+        color: currentColor;
+        text-transform: none;
+    }
+}
+
+.at-icon-arrow-left {
+    &::after {
+        content: '\e801';
+    }
+}
+
+.at-icon-arrow-down-left {
+    &::after {
+        content: '\e800';
+    }
+}
+
diff --git a/src/pages/index/index.js b/src/pages/index/index.js
index f49023181..f7ec791fc 100644
--- a/src/pages/index/index.js
+++ b/src/pages/index/index.js
@@ -195,10 +195,7 @@ export default class Index extends Taro.Component {
                       return (
                         <View
                           key={index}
-                          onClick={this.goToComponent.bind(this, {
-                            id: item.id,
-                            name: child.name
-                          })}
+                          
                           className='list-component'>
                           <View className='list-component-info'>
                             {child.name.split('-').join('')} {child.title}
diff --git a/src/pages/view/button/index.js b/src/pages/view/button/index.js
new file mode 100644
index 000000000..8918cf828
--- /dev/null
+++ b/src/pages/view/button/index.js
@@ -0,0 +1,45 @@
+import Taro from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+
+import AtButton from '../../../components/button/index'
+
+import './index.scss'
+
+export default class ButtonPage extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'Button Page'
+  }
+
+  constructor() {
+    super(...arguments)
+    this.state = {
+      // icons: [
+      //   'arrow-left',
+      //   'arrow-down-left',
+      // ]
+    }
+  }
+
+  render() {
+    // let {icons} = this.state
+    return (
+      <View className='page'>
+        <View className='example'>
+          <AtButton>测试按钮</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton>测试按钮</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton disabled>测试按钮</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="secondary">测试按钮</AtButton>
+        </View>
+        <View className='example'>
+          <AtButton type="secondary" disabled>测试按钮</AtButton>
+        </View>
+      </View>
+    )
+  }
+}
diff --git a/src/pages/view/button/index.scss b/src/pages/view/button/index.scss
new file mode 100644
index 000000000..f7ea67f4d
--- /dev/null
+++ b/src/pages/view/button/index.scss
@@ -0,0 +1,10 @@
+@import "../../../style/variables";
+
+.page {
+  background-color: #fff;
+}
+
+
+.example {
+  margin-bottom: 15px;
+}
\ No newline at end of file
diff --git a/src/pages/view/icon/index.js b/src/pages/view/icon/index.js
new file mode 100644
index 000000000..b69d2d6ce
--- /dev/null
+++ b/src/pages/view/icon/index.js
@@ -0,0 +1,39 @@
+import Taro from '@tarojs/taro'
+import { View, Text } from '@tarojs/components'
+
+import AtIcon from '../../../components/icon/index'
+
+import './index.scss'
+
+export default class IconPage extends Taro.Component {
+  config = {
+    navigationBarTitleText: 'Icon Page'
+  }
+
+  constructor() {
+    super(...arguments)
+    this.state = {
+      icons: [
+        'arrow-left',
+        'arrow-down-left',
+      ]
+    }
+  }
+
+  render() {
+    let {icons} = this.state
+    return (
+      <View className='page'>
+        <View className='example'>
+          {icons.map((icon) => {
+            return (
+              <AtIcon value={icon} color='#f00' size={30}>
+              </AtIcon>
+            )
+          })}
+          
+        </View>
+      </View>
+    )
+  }
+}
diff --git a/src/pages/view/icon/index.scss b/src/pages/view/icon/index.scss
new file mode 100644
index 000000000..d39695f49
--- /dev/null
+++ b/src/pages/view/icon/index.scss
@@ -0,0 +1,9 @@
+@import "../../../style/variables";
+
+.page {
+  background-color: #fff;
+}
+
+.at-icon {
+  margin: 0 10px;
+}
\ No newline at end of file