diff --git a/core/src/components/tabs/test/basic/index.html b/core/src/components/tabs/test/basic/index.html
index d3ef8e4af5..8b6c830887 100644
--- a/core/src/components/tabs/test/basic/index.html
+++ b/core/src/components/tabs/test/basic/index.html
@@ -20,7 +20,10 @@
           </ion-toolbar>
         </ion-header>
         <ion-content padding>
-          Tab One
+          <h1>Tab One</h1>
+
+          <ion-button expand="block" onclick="updateBadgeCount()">Update Badge Count</ion-button>
+          <ion-button color="secondary" expand="block" onclick="updateBadgeColor()">Update Badge Color</ion-button>
         </ion-content>
       </ion-tab>
 
@@ -31,18 +34,18 @@
           </ion-toolbar>
         </ion-header>
         <ion-content padding>
-          Tab Two
+          <h1>Tab Two</h1>
         </ion-content>
       </ion-tab>
 
-      <ion-tab label="Stopwatch" icon="logo-facebook">
+      <ion-tab id="tabWithBadge" badge="6" badgeColor="primary" label="Stopwatch" icon="logo-facebook">
         <ion-header>
           <ion-toolbar>
             <ion-title>Tab Three</ion-title>
           </ion-toolbar>
         </ion-header>
         <ion-content padding>
-          Tab Three
+          <h1>Tab Three</h1>
         </ion-content>
       </ion-tab>
 
@@ -53,7 +56,7 @@
           </ion-toolbar>
         </ion-header>
         <ion-content padding>
-          Hidden Tab
+          <h1>Hidden Tab</h1>
         </ion-content>
       </ion-tab>
 
@@ -61,6 +64,20 @@
       </ion-tab>
     </ion-tabs>
   </ion-app>
+
+  <script>
+    var tab = document.getElementById('tabWithBadge');
+
+    function updateBadgeCount() {
+      var current = parseInt(tab.badge);
+      tab.badge = ++current;
+    }
+
+    function updateBadgeColor() {
+      var current = tab.badgeColor;
+      tab.badgeColor = current === 'primary' ? 'danger' : 'primary';
+    }
+  </script>
 </body>
 
 </html>