diff --git a/ionic/components/action-menu/action-menu.js b/ionic/components/action-menu/action-menu.js
index 60b7d14748..2c40d0a481 100644
--- a/ionic/components/action-menu/action-menu.js
+++ b/ionic/components/action-menu/action-menu.js
@@ -27,11 +27,11 @@ import {ClickBlock} from '../../util/click-block';
       <div class="action-menu-container">
         <div class="action-menu-group action-menu-options">
           <div class="action-menu-title" *ng-if="options.titleText">{{options.titleText}}</div>
-          <button (click)="_buttonClicked(index)" *ng-for="#b of options.buttons; #index = index" class="button action-menu-option">{{b.text}}</button>
-          <button *ng-if="options.destructiveText" (click)="_destructiveButtonClicked()" class="button destructive action-menu-destructive">{{options.destructiveText}}</button>
+          <button (click)="_buttonClicked(index)" *ng-for="#b of options.buttons; #index = index" class="action-menu-option">{{b.text}}</button>
+          <button *ng-if="options.destructiveText" (click)="_destructiveButtonClicked()" class="destructive action-menu-destructive">{{options.destructiveText}}</button>
         </div>
         <div class="action-menu-group action-menu-cancel" *ng-if="options.cancelText">
-          <button class="button" (click)="cancel()">{{options.cancelText}}</button>
+          <button (click)="cancel()">{{options.cancelText}}</button>
         </div>
       </div>
     </div>`,
diff --git a/ionic/components/alert/alert.js b/ionic/components/alert/alert.js
index 12f2b7240b..6ff66f0a70 100644
--- a/ionic/components/alert/alert.js
+++ b/ionic/components/alert/alert.js
@@ -17,7 +17,7 @@
           Seriously, who does not like cookies.
         </div>
         <div class="alert-actions">
-          <button class="button">OK</button>
+          <button primary>OK</button>
         </div>
       </div>
     </div>`
diff --git a/ionic/components/app/test/animations/main.html b/ionic/components/app/test/animations/main.html
index 23522b223a..9d3a3f73c8 100644
--- a/ionic/components/app/test/animations/main.html
+++ b/ionic/components/app/test/animations/main.html
@@ -45,8 +45,8 @@
   </p>
 
   <p>
-    <button class="button button-primary" (click)="play($event)">Play</button>
-    <button class="button button-primary" (click)="pause($event)">Pause</button>
+    <button primary (click)="play($event)">Play</button>
+    <button primary (click)="pause($event)">Pause</button>
   </p>
 
 </body>
diff --git a/ionic/components/button/test/clear/main.html b/ionic/components/button/test/clear/main.html
index b225ada853..1279dbf1f8 100644
--- a/ionic/components/button/test/clear/main.html
+++ b/ionic/components/button/test/clear/main.html
@@ -1,49 +1,49 @@
 
 <div>
-  <a class="button button-clear" href="#">a (default)</a>
-  <button class="button button-clear">button (default)</button>
-  <button class="button button-clear hover">hover</button>
-  <button class="button button-clear activated">activated</button>
+  <a button clear href="#">a[button][clear]</a>
+  <button clear>button[clear]</button>
+  <button clear class="hover">hover</button>
+  <button clear class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-clear button-primary" href="#">a.primary</a>
-  <button class="button button-clear button-primary">button.primary</button>
-  <button class="button button-clear button-primary hover">hover</button>
-  <button class="button button-clear button-primary activated">activated</button>
+  <a button clear primary href="#">a.primary</a>
+  <button clear primary>button.primary</button>
+  <button clear primary class="hover">hover</button>
+  <button clear primary class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-clear button-secondary" href="#">a.secondary</a>
-  <button class="button button-clear button-secondary">button.secondary</button>
-  <button class="button button-clear button-secondary hover">hover</button>
-  <button class="button button-clear button-secondary activated">activated</button>
+  <a button clear secondary href="#">a.secondary</a>
+  <button clear secondary>button.secondary</button>
+  <button clear secondary class="hover">hover</button>
+  <button clear secondary class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-clear button-danger" href="#">a.danger</a>
-  <button class="button button-clear button-danger">button.danger</button>
-  <button class="button button-clear button-danger hover">hover</button>
-  <button class="button button-clear button-danger activated">activated</button>
+  <a button clear danger href="#">a.danger</a>
+  <button clear danger>button.danger</button>
+  <button clear danger class="hover">hover</button>
+  <button clear danger class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-clear button-light" href="#">a.light</a>
-  <button class="button button-clear button-light">button.light</button>
-  <button class="button button-clear button-light hover">hover</button>
-  <button class="button button-clear button-light activated">activated</button>
+  <a button clear light href="#">a.light</a>
+  <button clear light>button.light</button>
+  <button clear light class="hover">hover</button>
+  <button clear light class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-clear button-stable" href="#">a.stable</a>
-  <button class="button button-clear button-stable">button.stable</button>
-  <button class="button button-clear button-stable hover">hover</button>
-  <button class="button button-clear button-stable activated">activated</button>
+  <a button clear stable href="#">a.stable</a>
+  <button clear stable>button.stable</button>
+  <button clear stable class="hover">hover</button>
+  <button clear stable class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-clear button-dark" href="#">a.dark</a>
-  <button class="button button-clear button-dark">button.dark</button>
-  <button class="button button-clear button-dark hover">hover</button>
-  <button class="button button-clear button-dark activated">activated</button>
+  <a button clear dark href="#">a.dark</a>
+  <button clear dark>button.dark</button>
+  <button clear dark class="hover">hover</button>
+  <button clear dark class="activated">activated</button>
 </div>
diff --git a/ionic/components/button/test/full/main.html b/ionic/components/button/test/full/main.html
index 8b51e516d3..2db73cae0b 100644
--- a/ionic/components/button/test/full/main.html
+++ b/ionic/components/button/test/full/main.html
@@ -1,15 +1,15 @@
 
 <div>
-  <a class="button button-full button-primary" href="#">a.button-full</a>
-  <button class="button button-full button-primary">button.button-full</button>
+  <a button full primary href="#">a[button][full]</a>
+  <button full primary>button[full]</button>
 </div>
 
 <div>
-  <a class="button button-full button-outline button-primary" href="#">a.button-full</a>
-  <button class="button button-full button-outline button-primary">button.button-full</button>
+  <a button full outline primary href="#">a[button][full][outline]</a>
+  <button full outline primary>button[full][outline]</button>
 </div>
 
 <div>
-  <a class="button button-full button-clear button-primary" href="#">a.button-full</a>
-  <button class="button button-full button-clear button-primary">button.button-full</button>
+  <a button full clear primary href="#">a[button][full][clear]</a>
+  <button full clear primary>button[full][clear]</button>
 </div>
diff --git a/ionic/components/button/test/icons/main.html b/ionic/components/button/test/icons/main.html
index 7e0c35901c..1a73b0bd3d 100644
--- a/ionic/components/button/test/icons/main.html
+++ b/ionic/components/button/test/icons/main.html
@@ -2,77 +2,77 @@
 <div class="padding">
 
   <div>
-    <button class="button button-primary ion-home icon-left">
+    <button primary class="ion-home icon-left">
       Left Icon
     </button>
-    <a class="button button-primary ion-home icon-left">
+    <a button primary class="ion-home icon-left">
       Left Icon
     </a>
   </div>
 
   <div>
-    <button class="button button-primary ion-star icon-right">
+    <button primary class="ion-star icon-right">
       Right Icon
     </button>
-    <a class="button button-primary ion-star icon-right">
+    <a button primary class="ion-star icon-right">
       Right Icon
     </a>
   </div>
 
   <div>
-    <button class="button button-primary ion-ionic button-icon">
+    <button primary class="ion-ionic button-icon">
     </button>
-    <a class="button button-primary ion-ionic button-icon">
+    <a button primary class="ion-ionic button-icon">
     </a>
   </div>
 
   <div>
-    <button class="button button-primary button-large ion-home icon-left">
+    <button large primary class="ion-home icon-left">
       Left, Large
     </button>
-    <a class="button button-primary button-large ion-home icon-left">
+    <a button large primary class="ion-home icon-left">
       Left, Large
     </a>
   </div>
 
   <div>
-    <button class="button button-primary button-large ion-star icon-right">
+    <button large primary class="ion-star icon-right">
       Right, Large
     </button>
-    <a class="button button-primary button-large ion-star icon-right">
+    <a button large primary class="ion-star icon-right">
       Right, Large
     </a>
   </div>
 
   <div>
-    <button class="button button-primary ion-ionic button-icon button-large">
+    <button primary class="ion-ionic button-icon button-large">
     </button>
-    <a class="button button-primary ion-ionic button-icon button-large">
+    <a button primary class="ion-ionic button-icon button-large">
     </a>
   </div>
 
   <div>
-    <button class="button button-primary button-small ion-home icon-left">
+    <button small primary class="ion-home icon-left">
       Left Icon, Small
     </button>
-    <a class="button button-primary button-small ion-home icon-left">
+    <a button small primary class="ion-home icon-left">
       Left Icon, Small
     </a>
   </div>
 
   <div>
-    <button class="button button-primary button-small ion-star icon-right">
+    <button small primary class="ion-star icon-right">
       Right Icon, Small
     </button>
-    <a class="button button-primary button-small ion-star icon-right">
+    <a button small primary class="ion-star icon-right">
       Right Icon, Small
     </a>
   </div>
 
   <div>
-    <button class="button button-primary ion-ionic button-icon button-small">
+    <button small icon primary class="ion-ionic">
     </button>
-    <a class="button button-primary ion-ionic button-icon button-small">
+    <a button small icon primary class="ion-ionic">
     </a>
   </div>
 
diff --git a/ionic/components/button/test/outline/main.html b/ionic/components/button/test/outline/main.html
index c48979b6a6..4bb8865ce0 100644
--- a/ionic/components/button/test/outline/main.html
+++ b/ionic/components/button/test/outline/main.html
@@ -1,42 +1,42 @@
 
 <div>
-  <a class="button button-outline button-primary" href="#">a.primary</a>
-  <button class="button button-outline button-primary">button.primary</button>
-  <button class="button button-outline button-primary hover">hover</button>
-  <button class="button button-outline button-primary activated">activated</button>
+  <a button outline primary href="#">a.primary</a>
+  <button outline primary>button.primary</button>
+  <button outline primary class="hover">hover</button>
+  <button outline primary class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-outline button-secondary" href="#">a.secondary</a>
-  <button class="button button-outline button-secondary">button.secondary</button>
-  <button class="button button-outline button-secondary hover">hover</button>
-  <button class="button button-outline button-secondary activated">activated</button>
+  <a button outline secondary href="#">a.secondary</a>
+  <button outline secondary>button.secondary</button>
+  <button outline secondary class="hover">hover</button>
+  <button outline secondary class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-outline button-danger" href="#">a.danger</a>
-  <button class="button button-outline button-danger">button.danger</button>
-  <button class="button button-outline button-danger hover">hover</button>
-  <button class="button button-outline button-danger activated">activated</button>
+  <a button outline danger href="#">a.danger</a>
+  <button outline danger>button.danger</button>
+  <button outline danger class="hover">hover</button>
+  <button outline danger class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-outline button-light" href="#">a.light</a>
-  <button class="button button-outline button-light">button.light</button>
-  <button class="button button-outline button-light hover">hover</button>
-  <button class="button button-outline button-light activated">activated</button>
+  <a button outline light href="#">a.light</a>
+  <button outline light>button.light</button>
+  <button outline light class="hover">hover</button>
+  <button outline light class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-outline button-stable" href="#">a.stable</a>
-  <button class="button button-outline button-stable">button.stable</button>
-  <button class="button button-outline button-stable hover">hover</button>
-  <button class="button button-outline button-stable activated">activated</button>
+  <a button outline stable href="#">a.stable</a>
+  <button outline stable>button.stable</button>
+  <button outline stable class="hover">hover</button>
+  <button outline stable class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-outline button-dark" href="#">a.dark</a>
-  <button class="button button-outline button-dark">button.dark</button>
-  <button class="button button-outline button-dark hover">hover</button>
-  <button class="button button-outline button-dark activated">activated</button>
+  <a button outline dark href="#">a.dark</a>
+  <button outline dark>button.dark</button>
+  <button outline dark class="hover">hover</button>
+  <button outline dark class="activated">activated</button>
 </div>
diff --git a/ionic/components/button/test/sizes/main.html b/ionic/components/button/test/sizes/main.html
index fc70874c3d..2051d9ea84 100644
--- a/ionic/components/button/test/sizes/main.html
+++ b/ionic/components/button/test/sizes/main.html
@@ -1,36 +1,36 @@
 
 <div>
-  <a class="button button-primary" href="#">a (default)</a>
-  <button class="button button-primary">button (default)</button>
+  <a button primary href="#">a[button]</a>
+  <button primary>button</button>
 </div>
 
 <div>
-  <a class="button button-small button-primary" href="#">a.small</a>
-  <button class="button button-small button-primary">button.small</button>
+  <a button small primary href="#">a[small]</a>
+  <button small primary>button[small]</button>
 
-  <a class="button button-outline button-small button-primary" href="#">a.outline.small</a>
-  <button class="button button-outline button-small button-primary">button.outline.small</button>
+  <a button outline small primary href="#">a[outline][small]</a>
+  <button outline small primary>button[outline][small]</button>
 </div>
 
 <div>
-  <a class="button button-clear button-small button-primary" href="#">a.clear.small</a>
-  <button class="button button-clear button-small button-primary">button.clear.small</button>
+  <a button clear small primary href="#">a[clear][small]</a>
+  <button clear small primary>button[clear][small]</button>
 </div>
 
 <div>
-  <a class="button button-large button-primary" href="#">
+  <a button large primary href="#">
     <span style="font-size:48px">H</span>
     <span style="font-size:38px">E</span>
     <span style="font-size:32px">L</span>
     <span style="font-size:24px">L</span>
     O</a>
-  <button class="button button-large button-primary">button</button>
+  <button large primary>button</button>
 </div>
 
 <div>
-  <a class="button button-outline button-large button-primary" href="#">a</a>
-  <button class="button button-outline button-large button-primary">button</button>
+  <a  button outline large primary href="#">a</a>
+  <button outline large primary>button</button>
 
-  <a class="button button-clear button-large button-primary" href="#">a</a>
-  <button class="button button-clear button-large button-primary">button</button>
+  <a button clear large primary href="#">a</a>
+  <button clear large primary>button</button>
 </div>
diff --git a/ionic/components/modal/test/basic/index.js b/ionic/components/modal/test/basic/index.js
index bcea6378b8..5fe3fdc7fb 100644
--- a/ionic/components/modal/test/basic/index.js
+++ b/ionic/components/modal/test/basic/index.js
@@ -37,14 +37,14 @@ export class ContactModal extends Modal {
 @Component({selector: 'ion-view'})
 @View({
   template: `
-    <ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title><ion-nav-items primary><button primary class="button" (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
+    <ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title><ion-nav-items primary><button primary (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
 
     <ion-content class="padding">
 
       <p>First Page: {{ val }}</p>
 
       <p>
-        <button class="button" (click)="push()">Push (Go to 2nd)</button>
+        <button primary (click)="push()">Push (Go to 2nd)</button>
       </p>
 
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
@@ -85,11 +85,11 @@ export class ModalFirstPage {
     <ion-content class="padding">
 
       <p>
-        <button class="button" (click)="pop()">Pop (Go back to 1st)</button>
+        <button primary (click)="pop()">Pop (Go back to 1st)</button>
       </p>
 
       <p>
-        <button class="button" (click)="push()">Push (Go to 3rd)</button>
+        <button primary (click)="push()">Push (Go to 3rd)</button>
       </p>
 
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
diff --git a/ionic/components/nav-bar/test/html-title/main.html b/ionic/components/nav-bar/test/html-title/main.html
index 1f3874348d..87f9edbec9 100644
--- a/ionic/components/nav-bar/test/html-title/main.html
+++ b/ionic/components/nav-bar/test/html-title/main.html
@@ -8,11 +8,11 @@
   </ion-nav-title>
 
   <ion-nav-items side="primary">
-    <button class="button">p1</button>
+    <button>p1</button>
   </ion-nav-items>
 
   <ion-nav-items side="secondary">
-    <button class="button">s1</button>
+    <button>s1</button>
   </ion-nav-items>
 
 </ion-view>
diff --git a/ionic/components/nav-bar/test/long-title/main.html b/ionic/components/nav-bar/test/long-title/main.html
index 4ff15071f7..8aa9b7c4bc 100644
--- a/ionic/components/nav-bar/test/long-title/main.html
+++ b/ionic/components/nav-bar/test/long-title/main.html
@@ -2,13 +2,13 @@
 <ion-view nav-title="What we have here is an extremely long title that probably would not fit inside of a standard title block that is on top of the view and things.">
 
   <ion-nav-items side="primary">
-    <button class="button">p1</button>
-    <button class="button">p2</button>
-    <button class="button">p3</button>
+    <button>p1</button>
+    <button>p2</button>
+    <button>p3</button>
   </ion-nav-items>
 
   <ion-nav-items side="secondary">
-    <button class="button">s1</button>
+    <button>s1</button>
   </ion-nav-items>
 
 </ion-view>
diff --git a/ionic/components/nav-bar/test/lopsided-buttons/main.html b/ionic/components/nav-bar/test/lopsided-buttons/main.html
index 7efc49ace6..4eb7e73c5f 100644
--- a/ionic/components/nav-bar/test/lopsided-buttons/main.html
+++ b/ionic/components/nav-bar/test/lopsided-buttons/main.html
@@ -2,13 +2,13 @@
 <ion-view nav-title="Attribute Title">
 
   <ion-nav-items side="primary">
-    <button class="button">p1</button>
-    <button class="button">p2</button>
-    <button class="button">p3</button>
+    <button>p1</button>
+    <button>p2</button>
+    <button>p3</button>
   </ion-nav-items>
 
   <ion-nav-items side="secondary">
-    <button class="button">s1</button>
+    <button>s1</button>
   </ion-nav-items>
 
   <ion-content class="padding" style="text-align:center">
diff --git a/ionic/components/nav/test/basic/index.js b/ionic/components/nav/test/basic/index.js
index c10dc87e9f..efe28b8d62 100644
--- a/ionic/components/nav/test/basic/index.js
+++ b/ionic/components/nav/test/basic/index.js
@@ -15,17 +15,17 @@ import {SecondPage} from './pages/second-page'
     '<ion-navbar *navbar>' +
       '<ion-title>First Page: {{ val }}</ion-title>' +
       '<ion-nav-items primary>' +
-        '<button class="button">P1</button>' +
+        '<button>P1</button>' +
       '</ion-nav-items>' +
       '<ion-nav-items secondary>' +
-        '<button class="button">S1</button>' +
+        '<button>S1</button>' +
         '<button icon><i class="icon ion-navicon"></i></button>' +
       '</ion-nav-items>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
       '<p>First Page: {{ val }}</p>' +
-      '<p><button class="button" (click)="push()">Push (Go to 2nd)</button></p>' +
-      '<p><button class="button" [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
+      '<p><button (click)="push()">Push (Go to 2nd)</button></p>' +
+      '<p><button [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
       '<icon class="ion-ios-arrow-back"></icon>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
diff --git a/ionic/components/nav/test/basic/pages/first-page.js b/ionic/components/nav/test/basic/pages/first-page.js
deleted file mode 100644
index 97541f7c35..0000000000
--- a/ionic/components/nav/test/basic/pages/first-page.js
+++ /dev/null
@@ -1,99 +0,0 @@
-import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
-import {View} from 'angular2/src/core/annotations_impl/view';
-
-import {Routable, Router, NavController, NavbarTemplate, Navbar, NavPush, Content} from 'ionic/ionic';
-import {IonicApp} from '../index';
-import {SecondPage} from './second-page';
-
-@Component({
-  selector: 'ion-view',
-  lifecycle: [onInit]
-})
-@View({
-  template: '' +
-    '<ion-navbar *navbar>' +
-      '<ion-title>First Page: {{ val }}</ion-title>' +
-      '<ion-nav-items primary>' +
-        '<button class="button">P1</button>' +
-      '</ion-nav-items>' +
-      '<ion-nav-items secondary>' +
-        '<button class="button">S1</button>' +
-        '<button class="button">S2</button>' +
-      '</ion-nav-items>' +
-    '</ion-navbar>' +
-    '<ion-content class="padding">' +
-      '<p>First Page: {{ val }}</p>' +
-      '<p><button class="button" (click)="push()">Push (Go to 2nd)</button></p>' +
-      '<p><button class="button" [push-data]="pushData" [nav-push]="pushPage">Push w/ nav-push (Go to 2nd)</button></p>' +
-      '<icon class="ion-ios-arrow-back"></icon>' +
-      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-      '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
-    '</ion-content>',
-  directives: [NavbarTemplate, Navbar, NavPush, Content]
-})
-export class FirstPage {
-  constructor(
-    nav: NavController
-  ) {
-
-    // TODO: Shouldn't have to do this
-    Router.setNavController(nav);
-
-    this.nav = nav;
-    this.val = Math.round(Math.random() * 8999) + 1000;
-
-
-    this.pushPage = SecondPage;
-    this.pushData = {
-      id: 420
-    }
-  }
-
-  onInit() {
-  }
-
-  viewLoaded() {
-    this.router = FirstPage.router.invoke(this);
-    console.log('viewLoaded first page');
-  }
-
-  viewWillEnter() {
-    console.log('viewWillEnter first page');
-  }
-
-  viewDidEnter() {
-    console.log('viewDidEnter first page');
-  }
-
-  viewWillLeave() {
-    console.log('viewWillLeave first page');
-  }
-
-  viewDidLeave() {
-    console.log('viewDidLeave first page');
-  }
-
-  viewWillCache() {
-    console.log('viewWillCache first page');
-  }
-
-  viewDidCache() {
-    console.log('viewDidCache first page');
-  }
-
-  viewWillUnload() {
-    console.log('viewWillUnload first page');
-  }
-
-  viewDidUnload() {
-    console.log('viewDidUnload first page');
-  }
-
-  push() {
-    this.nav.push(SecondPage, { id: 8675309, myData: [1,2,3,4] }, { animation: 'ios' });
-  }
-}
-
-new Routable(FirstPage, {
-  url: '/first-page'
-})
diff --git a/ionic/components/nav/test/basic/pages/second-page.js b/ionic/components/nav/test/basic/pages/second-page.js
index 94ba640359..a1cdc4667c 100644
--- a/ionic/components/nav/test/basic/pages/second-page.js
+++ b/ionic/components/nav/test/basic/pages/second-page.js
@@ -11,13 +11,13 @@ import {ThirdPage} from './third-page';
     <ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
     <ion-content class="padding">
       <p>
-        <button class="button" (click)="pop()">Pop (Go back to 1st)</button>
+        <button primary (click)="pop()">Pop (Go back to 1st)</button>
       </p>
       <p>
-        <button class="button" nav-pop>Pop with NavPop (Go back to 1st)</button>
+        <button primary nav-pop>Pop with NavPop (Go back to 1st)</button>
       </p>
       <p>
-        <button class="button" (click)="push()">Push (Go to 3rd)</button>
+        <button primary (click)="push()">Push (Go to 3rd)</button>
       </p>
       <p>
         Random: {{ val }}
diff --git a/ionic/components/nav/test/basic/pages/third-page.js b/ionic/components/nav/test/basic/pages/third-page.js
index 64c8fc7fc7..8f29cdb902 100644
--- a/ionic/components/nav/test/basic/pages/third-page.js
+++ b/ionic/components/nav/test/basic/pages/third-page.js
@@ -10,7 +10,7 @@ import {Router, Routable, NavController, NavbarTemplate, Navbar, Content} from '
     <ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
     <ion-content class="padding">
       <p>
-        <button class="button" (click)="pop()">Pop (Go back to 2nd)</button>
+        <button primary (click)="pop()">Pop (Go back to 2nd)</button>
       </p>
       <div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
     </ion-content>
diff --git a/ionic/components/search-bar/search-bar.js b/ionic/components/search-bar/search-bar.js
index 69d1c37e7c..b98d6d5885 100644
--- a/ionic/components/search-bar/search-bar.js
+++ b/ionic/components/search-bar/search-bar.js
@@ -15,7 +15,7 @@ import {IonicComponent} from 'ionic/config/component'
     <input (focus)="inputFocused()" (blur)="inputBlurred()"
     (input)="inputChanged($event)" class="search-bar-input" type="search" [attr.placeholder]="placeholder">
   </div>
-  <button class="button search-bar-cancel">{{ cancelText }}</button>`
+  <button class="search-bar-cancel">{{ cancelText }}</button>`
 })
 export class SearchBar {
 
diff --git a/ionic/components/split-view/test/settings/groups/general.js b/ionic/components/split-view/test/settings/groups/general.js
deleted file mode 100644
index 5dbe1b2c00..0000000000
--- a/ionic/components/split-view/test/settings/groups/general.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import {Component, View} from 'angular2/angular2'
-
-
-@Component({
-  selector: 'settings-general'
-})
-@View({
-  template: `
-<ion-view nav-title="General Stuff">
-  General Settings
-</ion-view>
-  `,
-  directives: []
-})
-export class GeneralPage {
-}
diff --git a/ionic/components/split-view/test/settings/groups/privacy.js b/ionic/components/split-view/test/settings/groups/privacy.js
deleted file mode 100644
index 8b068db786..0000000000
--- a/ionic/components/split-view/test/settings/groups/privacy.js
+++ /dev/null
@@ -1,74 +0,0 @@
-import {Component, View} from 'angular2/angular2'
-import {NavPane} from 'ionic/ionic'
-
-@Component({ selector: 'privacy-settings' })
-@View({
-  template: `
-<ion-view nav-title="Privacy">
-  Privacy
-<button class="button button-primary" (click)="next()">
-  Next
-</button>
-</ion-view>`,
-  directives: []
-})
-export class PrivacyPage {
-  constructor(navPane: NavPane) {
-    this.navPane = navPane
-  }
-  next() {
-    this.navPane.push(PrivacyP1)
-  }
-}
-
-@Component({ selector: 'privp1' })
-@View({
-  template: `
-<ion-view nav-title="Privacy Page 1">
-This is page 1
-<br/>
-<button class="button button-primary" (click)="next()">
-  Next
-</button>
-<br/>
-<button class="button" (click)="pop()">
-  Back
-</button>
-</ion-view>
-`,
-  directives: []
-})
-class PrivacyP1 {
-  constructor(navPane: NavPane) {
-    this.navPane = navPane
-  }
-  next() {
-    this.navPane.push(PrivacyP2)
-  }
-  pop() {
-    this.navPane.pop()
-  }
-}
-
-@Component({ selector: 'privp2' })
-@View({
-  template: `
-<ion-view nav-title="Privacy Page 2">
-Page 2 here
-<br/>
-<button class="button" (click)="pop()">
-  Back
-</button>
-<br/>
-</ion-view>
-`,
-  directives: []
-})
-class PrivacyP2 {
-  constructor(navPane: NavPane) {
-    this.navPane = navPane
-  }
-  pop() {
-    this.navPane.pop()
-  }
-}
diff --git a/ionic/components/split-view/test/settings/main.html b/ionic/components/split-view/test/settings/main.html
deleted file mode 100644
index a942ebb790..0000000000
--- a/ionic/components/split-view/test/settings/main.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<ion-nav [initial]="initial">
-</ion-nav>
diff --git a/ionic/components/tabs/test/advanced/index.js b/ionic/components/tabs/test/advanced/index.js
index c89e82927e..90662e74f2 100644
--- a/ionic/components/tabs/test/advanced/index.js
+++ b/ionic/components/tabs/test/advanced/index.js
@@ -11,7 +11,7 @@ import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/i
       '<ion-title>Sign In</ion-title>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p><button class="button" (click)="push()">Go to tabs</button></p>' +
+      '<p><button primary (click)="push()">Go to tabs</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',
@@ -54,7 +54,7 @@ class TabsPage {
       '<ion-title>Tabs 1 Page 1</ion-title>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p><button class="button" (click)="push()">Go to Tab 1, Page 2</button></p>' +
+      '<p><button primary (click)="push()">Go to Tab 1, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',
@@ -77,8 +77,8 @@ class Tab1Page1 {
       '<ion-title>Tabs 1 Page 2</ion-title>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p><button class="button" (click)="push()">Go to Tab 1, Page 3</button></p>' +
-      '<p><button class="button" (click)="nav.pop()">Back to Tab 1, Page 1</button></p>' +
+      '<p><button primary (click)="push()">Go to Tab 1, Page 3</button></p>' +
+      '<p><button primary (click)="nav.pop()">Back to Tab 1, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',
@@ -101,7 +101,7 @@ class Tab1Page2 {
       '<ion-title>Tabs 1 Page 3</ion-title>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p><button class="button" (click)="nav.pop()">Back to Tab 1, Page 2</button></p>' +
+      '<p><button primary (click)="nav.pop()">Back to Tab 1, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',
@@ -125,7 +125,7 @@ class Tab1Page3 {
       '<ion-title>Tabs 2 Page 1</ion-title>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p><button class="button" (click)="push()">Go to Tab 2, Page 2</button></p>' +
+      '<p><button primary (click)="push()">Go to Tab 2, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',
@@ -148,8 +148,8 @@ class Tab2Page1 {
       '<ion-title>Tabs 2 Page 2</ion-title>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p><button class="button" (click)="push()">Go to Tab 2, Page 3</button></p>' +
-      '<p><button class="button" (click)="nav.pop()">Back to Tab 2, Page 1</button></p>' +
+      '<p><button primary (click)="push()">Go to Tab 2, Page 3</button></p>' +
+      '<p><button primary (click)="nav.pop()">Back to Tab 2, Page 1</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',
@@ -172,7 +172,7 @@ class Tab2Page2 {
       '<ion-title>Tabs 2 Page 3</ion-title>' +
     '</ion-navbar>' +
     '<ion-content class="padding">' +
-      '<p><button class="button" (click)="nav.pop()">Back to Tab 2, Page 2</button></p>' +
+      '<p><button primary (click)="nav.pop()">Back to Tab 2, Page 2</button></p>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
       '<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
     '</ion-content>',