diff --git a/demos/component-docs/badge/badge.ts b/demos/component-docs/badge/badge.ts
new file mode 100644
index 0000000000..ebdd570b29
--- /dev/null
+++ b/demos/component-docs/badge/badge.ts
@@ -0,0 +1 @@
+export * from './basic/pages';
diff --git a/demos/component-docs/badge/basic/pages.ts b/demos/component-docs/badge/basic/pages.ts
new file mode 100644
index 0000000000..64337c90c0
--- /dev/null
+++ b/demos/component-docs/badge/basic/pages.ts
@@ -0,0 +1,13 @@
+import {Page} from 'ionic/ionic';
+import {forwardRef} from 'angular2/angular2';
+import {AndroidAttribute} from '../../helpers';
+
+@Page({
+    templateUrl: 'badge/basic/template.html',
+    directives: [forwardRef(() => AndroidAttribute)]
+})
+export class BasicPage {
+    constructor() {
+
+    }
+}
diff --git a/demos/component-docs/badge/basic/styles.scss b/demos/component-docs/badge/basic/styles.scss
new file mode 100644
index 0000000000..58268ec460
--- /dev/null
+++ b/demos/component-docs/badge/basic/styles.scss
@@ -0,0 +1,4 @@
+.preview-icons {
+  font-size: 2em;
+  text-align: center;
+}
\ No newline at end of file
diff --git a/demos/component-docs/badge/basic/template.html b/demos/component-docs/badge/basic/template.html
new file mode 100644
index 0000000000..b8056f08b3
--- /dev/null
+++ b/demos/component-docs/badge/basic/template.html
@@ -0,0 +1,35 @@
+
+<ion-navbar *navbar hide-back-button class="show-navbar android-attr">
+  <ion-title>Badge</ion-title>
+</ion-navbar>
+
+<ion-content>
+
+  <ion-card>
+
+    <img src="img/bjork-live.png"/>
+
+    <ion-card-content>
+      <h2 class="card-title">
+        Björk
+      </h2>
+      <p>
+        Björk first came to prominence as one of the lead vocalists of the avant pop Icelandic sextet the Sugarcubes, but when...     
+      </p>
+    </ion-card-content>
+
+    <ion-item>
+      <icon musical-notes item-left style="color: #d03e84"></icon>
+      Albums
+      <ion-badge item-right>9</ion-badge>
+    </ion-item>
+
+    <ion-item>
+      <icon ion-social-twitter item-left style="color: #55acee"></icon>
+      Followers
+      <ion-badge item-right>260k</ion-badge>
+    </ion-item>
+
+  </ion-card>
+
+</ion-content>
diff --git a/demos/component-docs/helpers.ts b/demos/component-docs/helpers.ts
index dc38d6832e..9dc7eeea4c 100644
--- a/demos/component-docs/helpers.ts
+++ b/demos/component-docs/helpers.ts
@@ -2,6 +2,7 @@ import {Directive, ElementRef, Renderer} from 'angular2/angular2';
 import {Platform, Navbar} from 'ionic/ionic';
 
 import * as actionSheets from './action-sheets/action-sheets';
+import * as badges from './badge/badge';
 import * as buttons from './buttons/buttons';
 import * as cards from './cards/cards';
 import * as grid from './grid/grid';
@@ -71,6 +72,7 @@ export function getPageFor(hash) {
     return {
         'overview': actionSheets.BasicPage,
         'action-sheets': actionSheets.BasicPage,
+        'badges': badges.BasicPage,
 
         'buttons': buttons.BasicPage,
         'block-buttons': buttons.BlockPage,
diff --git a/demos/component-docs/img/bjork-live.png b/demos/component-docs/img/bjork-live.png
new file mode 100644
index 0000000000..7b48920354
Binary files /dev/null and b/demos/component-docs/img/bjork-live.png differ