diff --git a/client/core/src/components/button/button.html b/client/core/src/components/button/button.html
index dd0f7acc6..2dab0d861 100644
--- a/client/core/src/components/button/button.html
+++ b/client/core/src/components/button/button.html
@@ -1,3 +1,7 @@
-<button type = "*[typeName]*" class="*[className]*" *[enabled]*  translate>
-    *[label]*
+<button type="{{::$ctrl.type}}" class="mdl-button mdl-js-button mdl-button--raised mdl-button--colored hfj">
+    <span translate>{{$ctrl.label}}</span>
+    <vn-icon 
+        icon="{{::$ctrl.icon}}"
+        class="{{::$ctrl.icon}}">
+    </vn-icon>
 </button>
\ No newline at end of file
diff --git a/client/core/src/components/button/button.js b/client/core/src/components/button/button.js
index 6247bb77b..9b8495f51 100644
--- a/client/core/src/components/button/button.js
+++ b/client/core/src/components/button/button.js
@@ -1,17 +1,22 @@
 import ngModule from '../../module';
-import template from './button.html';
+import Input from '../../lib/input';
+import './style.scss';
 
-directive.$inject = ['vnTemplate'];
-export default function directive(vnTemplate) {
-    return {
-        restrict: 'E',
-        template: (_, $attrs) =>
-            vnTemplate.get(template, $attrs, {
-                label: 'Submit',
-                className: 'mdl-button mdl-js-button mdl-button--raised mdl-button--colored',
-                enabled: 'true',
-                typeName: 'button'
-            })
-    };
+export default class Button extends Input {
+    constructor($element) {
+        super($element);
+        this.input = this.element.querySelector('.mdl-button');
+    }
 }
-ngModule.directive('vnButton', directive);
+Button.$inject = ['$element'];
+
+ngModule.component('vnButton', {
+    controller: Button,
+    template: require('./button.html'),
+    bindings: {
+        label: '@?',
+        disabled: '<?',
+        icon: '@?'
+    }
+});
+
diff --git a/client/core/src/components/button/style.scss b/client/core/src/components/button/style.scss
new file mode 100644
index 000000000..72e19183b
--- /dev/null
+++ b/client/core/src/components/button/style.scss
@@ -0,0 +1,5 @@
+vn-button {
+    & i {
+        margin-top: 6px;
+    }
+}
\ No newline at end of file