diff --git a/src/components/tabs/tab-button.ts b/src/components/tabs/tab-button.ts
index 7ef63750f6..fe33a89e12 100644
--- a/src/components/tabs/tab-button.ts
+++ b/src/components/tabs/tab-button.ts
@@ -1,4 +1,4 @@
-import { Directive, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, Renderer } from '@angular/core';
+import { Component, ElementRef, EventEmitter, HostListener, Input, OnInit, Output, Renderer } from '@angular/core';
 
 import { Config } from '../../config/config';
 import { Ion } from '../ion';
@@ -7,8 +7,13 @@ import { Tab } from './tab';
 /**
  * @private
  */
-@Directive({
+@Component({
   selector: '.tab-button',
+  template:
+    '<ion-icon *ngIf="tab.tabIcon" [name]="tab.tabIcon" [isActive]="tab.isSelected" class="tab-button-icon"></ion-icon>' +
+    '<span *ngIf="tab.tabTitle" class="tab-button-text">{{tab.tabTitle}}</span>' +
+    '<ion-badge *ngIf="tab.tabBadge" class="tab-badge" [color]="tab.tabBadgeStyle">{{tab.tabBadge}}</ion-badge>' +
+    '<div class="button-effect"></div>',
   host: {
     '[attr.id]': 'tab._btnId',
     '[attr.aria-controls]': 'tab._tabId',
@@ -18,7 +23,9 @@ import { Tab } from './tab';
     '[class.has-title-only]': 'hasTitleOnly',
     '[class.icon-only]': 'hasIconOnly',
     '[class.has-badge]': 'hasBadge',
-    '[class.disable-hover]': 'disHover'
+    '[class.disable-hover]': 'disHover',
+    '[class.tab-disabled]': '!tab.enabled',
+    '[class.tab-hidden]': '!tab.show',
   }
 })
 export class TabButton extends Ion implements OnInit {
diff --git a/src/components/tabs/tabs.ts b/src/components/tabs/tabs.ts
index aeab923d56..36ff1cd089 100644
--- a/src/components/tabs/tabs.ts
+++ b/src/components/tabs/tabs.ts
@@ -151,12 +151,7 @@ import { ViewController } from '../../navigation/view-controller';
   selector: 'ion-tabs',
   template:
     '<div class="tabbar" role="tablist" #tabbar>' +
-      '<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" [class.tab-disabled]="!t.enabled" [class.tab-hidden]="!t.show" role="tab" href="#" (ionSelect)="select($event)">' +
-        '<ion-icon *ngIf="t.tabIcon" [name]="t.tabIcon" [isActive]="t.isSelected" class="tab-button-icon"></ion-icon>' +
-        '<span *ngIf="t.tabTitle" class="tab-button-text">{{t.tabTitle}}</span>' +
-        '<ion-badge *ngIf="t.tabBadge" class="tab-badge" [color]="t.tabBadgeStyle">{{t.tabBadge}}</ion-badge>' +
-        '<div class="button-effect"></div>' +
-      '</a>' +
+      '<a *ngFor="let t of _tabs" [tab]="t" class="tab-button" role="tab" href="#" (ionSelect)="select(t)"></a>' +
       '<div class="tab-highlight"></div>' +
     '</div>' +
     '<ng-content></ng-content>' +