diff --git a/ionic/components/badge/badge.ios.scss b/ionic/components/badge/badge.ios.scss
index 13d0435ee2..b75be288c1 100644
--- a/ionic/components/badge/badge.ios.scss
+++ b/ionic/components/badge/badge.ios.scss
@@ -16,7 +16,7 @@ ion-badge {
 
 @each $color-name, $color-value in $colors-ios {
 
-  ion-badge[#{$color-name}] {
+  .badge-#{$color-name} {
     background-color: $color-value;
     color: inverse($color-value);
   }
diff --git a/ionic/components/badge/badge.md.scss b/ionic/components/badge/badge.md.scss
index d3f6ca03f4..2be494f571 100644
--- a/ionic/components/badge/badge.md.scss
+++ b/ionic/components/badge/badge.md.scss
@@ -16,7 +16,7 @@ ion-badge {
 
 @each $color-name, $color-value in $colors-md {
 
-  ion-badge[#{$color-name}] {
+  .badge-#{$color-name} {
     background-color: $color-value;
     color: inverse($color-value);
   }
diff --git a/ionic/components/badge/badge.ts b/ionic/components/badge/badge.ts
new file mode 100644
index 0000000000..348cd998e7
--- /dev/null
+++ b/ionic/components/badge/badge.ts
@@ -0,0 +1,53 @@
+import {Directive, ElementRef, Renderer, Attribute} from 'angular2/core';
+
+import {Config} from '../../config/config';
+
+
+/**
+  * @name Badge
+  * @module ionic
+  * @description
+  * Badges are simple components in Ionic containing numbers or text. You can display a badge to indicate that there is new information associated with the item it is on.
+  * @see {@link /docs/v2/components/#badges Badges Component Docs}
+
+ */
+@Directive({
+  selector: 'ion-badge'
+})
+export class Badge {
+
+  constructor(
+    config: Config,
+    private _elementRef: ElementRef,
+    private _renderer: Renderer
+  ) {
+    let element = _elementRef.nativeElement;
+
+    this._readAttrs(element);
+  }
+
+  /**
+   * @private
+   */
+  private _readAttrs(element: HTMLElement) {
+    let elementAttrs = element.attributes;
+    let attrName;
+    for (let i = 0, l = elementAttrs.length; i < l; i++) {
+      if (elementAttrs[i].value !== '') continue;
+
+      attrName = elementAttrs[i].name;
+
+      // Ignore attributes item-left, item-right
+      if (attrName.indexOf('item') == -1) {
+        this._setClass(attrName);
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  private _setClass(color: string) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, 'badge-' + color, true);
+  }
+}
diff --git a/ionic/config/directives.ts b/ionic/config/directives.ts
index 073cae169a..d0367d1aaf 100644
--- a/ionic/config/directives.ts
+++ b/ionic/config/directives.ts
@@ -5,6 +5,7 @@ import {OverlayNav} from '../components/overlay/overlay';
 import {Menu} from '../components/menu/menu';
 import {MenuToggle} from '../components/menu/menu-toggle';
 import {MenuClose} from '../components/menu/menu-close';
+import {Badge} from '../components/badge/badge';
 import {Button} from '../components/button/button';
 import {Blur} from '../components/blur/blur';
 import {Content} from '../components/content/content';
@@ -117,6 +118,7 @@ export const IONIC_DIRECTIVES = [
   MenuToggle,
   MenuClose,
 
+  Badge,
   Button,
   Blur,
   Content,