diff --git a/demos/tabs/main.html b/demos/tabs/main.html
index 6a0f7adaa0..4a09a91c59 100644
--- a/demos/tabs/main.html
+++ b/demos/tabs/main.html
@@ -6,46 +6,46 @@
   <!-- Text -->
   <ion-tabs no-navbar>
     <ion-tab tabTitle="Recents" [root]="root"></ion-tab>
-    <ion-tab tabTitle="Favorites" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" [root]="root" tabBadge="23"></ion-tab>
     <ion-tab tabTitle="Settings" [root]="root"></ion-tab>
   </ion-tabs>
 
 
   <!-- Icons -->
-  <ion-tabs no-navbar selectedIndex="1">
+  <ion-tabs no-navbar selectedIndex="1" primary>
     <ion-tab tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabIcon="heart" [root]="root"></ion-tab>
-    <ion-tab tabIcon="settings" [root]="root"></ion-tab>
+    <ion-tab tabIcon="settings" [root]="root" tabBadge="2" tabBadgeStyle="danger"></ion-tab>
   </ion-tabs>
 
 
   <!-- Icons on top of text -->
-  <ion-tabs no-navbar selectedIndex="2">
+  <ion-tabs no-navbar selectedIndex="2" secondary>
     <ion-tab tabTitle="Location" tabIcon="navigate" [root]="root"></ion-tab>
-    <ion-tab tabTitle="Favorites" tabIcon="star" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" tabIcon="star" [root]="root" tabBadge="12" tabBadgeStyle="dark"></ion-tab>
     <ion-tab tabTitle="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>
   </ion-tabs>
 
 
   <!-- Icons below text -->
-  <ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
-    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1" danger>
+    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="47" tabBadgeStyle="light"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
   </ion-tabs>
 
 
   <!-- Icons right of text -->
-  <ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0">
+  <ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0" light>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
-    <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
   </ion-tabs>
 
 
   <!-- Icons left of text -->
-  <ion-tabs tabbarLayout="icon-left" no-navbar>
-    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
+  <ion-tabs tabbarLayout="icon-left" no-navbar dark>
+    <ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
     <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
   </ion-tabs>
@@ -54,30 +54,15 @@
   <!-- No icons -->
   <ion-tabs tabbarLayout="icon-hide" no-navbar>
     <ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
-    <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
+    <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="61" tabBadgeStyle="dark"></ion-tab>
     <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
   </ion-tabs>
 
 
   <!-- No overflow text -->
-  <ion-tabs no-navbar>
+  <ion-tabs no-navbar primary>
     <ion-tab tabTitle="Indiana Jones and the Raiders of the Lost Ark" [root]="root"></ion-tab>
     <ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
     <ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
   </ion-tabs>
-
-
-  <!-- primary color tabbar -->
-  <ion-tabs no-navbar primary>
-    <ion-tab tabIcon="call" [root]="root"></ion-tab>
-    <ion-tab tabIcon="heart" [root]="root"></ion-tab>
-    <ion-tab tabIcon="settings" [root]="root"></ion-tab>
-  </ion-tabs>
-
-  <!-- primary color tabbar with a badge -->
-  <ion-tabs no-navbar primary>
-    <ion-tab tabIcon="call" [root]="root"></ion-tab>
-    <ion-tab tabIcon="heart" [root]="root" tabBadge="23" tabBadgeStyle="danger"></ion-tab>
-    <ion-tab tabIcon="settings" [root]="root"></ion-tab>
-  </ion-tabs>
 </ion-content>
diff --git a/ionic/components/tabs/tabs.scss b/ionic/components/tabs/tabs.scss
index 7d5866ceba..c44040e79e 100644
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -159,6 +159,7 @@ tab-highlight {
   right: calc(50% - 30px);
 }
 
+[tabbarLayout=icon-hide] .tab-badge,
 [tabbarLayout=icon-bottom] .tab-badge,
 [tabbarLayout=icon-left] .tab-badge,
 [tabbarLayout=icon-right] .tab-badge {