button refactor

ionic/components/action-menu/test/basic/index.js

@@ -1,14 +1,14 @@
 import {Component} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button, Content} from 'ionic/ionic';
+import {Content} from 'ionic/ionic';
 import {ActionMenu} from 'ionic/components/action-menu/action-menu';
 
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button, Content]
+  directives: [Content]
 })
 export default class IonicApp {
 

ionic/components/app/test/barkpark/index.js

@@ -8,14 +8,14 @@ import {Log} from 'ionic/util'
 
 import {
   Router, Routable, List, Item, HeaderTemplate, Nav, NavController,
-  Toolbar, Button, Input, Tabs,
+  Toolbar, Input, Tabs,
   Tab, Content, Aside
 } from 'ionic/ionic'
 
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/login.html',
-  directives: [FormDirectives, Button, Input, Content, HeaderTemplate, Toolbar]
+  directives: [FormDirectives, Input, Content, HeaderTemplate, Toolbar]
 })
 class LoginPage {
   constructor( nav: NavController ) {
@@ -53,7 +53,7 @@ new Routable(LoginPage, {
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/signup.html',
-  directives: [FormDirectives, Button, Input]
+  directives: [FormDirectives, Input]
 })
 export class SignupPage {
   constructor( nav: NavController ) { //, fb: FormBuilder ) {
@@ -89,7 +89,7 @@ export class SignupPage {
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/app.html',
-  directives: [FormDirectives, Button, Input, Tabs, Tab]
+  directives: [FormDirectives, Input, Tabs, Tab]
 })
 export class AppPage {
   constructor( nav: NavController ) { //, fb: FormBuilder ) {
@@ -139,7 +139,7 @@ class PostDetail {
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/splash.html',
-  directives: [Content, Button]
+  directives: [Content]
 })
 export default class SplashPage {
   constructor(nav: NavController) {

ionic/components/app/test/music/index.js

@@ -8,7 +8,7 @@ import {Log} from 'ionic/util'
 
 import {
   Router, Routable, List, Item, HeaderTemplate, Nav, NavController,
-  Toolbar, Button, Input, Tabs,
+  Toolbar, Input, Tabs,
   Tab, Content, Aside
 } from 'ionic/ionic'
 
@@ -16,7 +16,7 @@ import {
 @Component({selector: 'ion-view'})
 @View({
   templateUrl: 'pages/app.html',
-  directives: [Nav, List, Item, Content, Button, HeaderTemplate, Toolbar]
+  directives: [Nav, List, Item, Content, HeaderTemplate, Toolbar]
 })
 class AppPage {
   constructor(nav: NavController) {

ionic/components/app/test/profile/index.js

@@ -5,14 +5,14 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
 import {Modal, ModalRef, Nav, Segment, Animation,
-  SegmentButton, Slides, Slide, Content, Button, List, Item} from 'ionic/ionic';
+  SegmentButton, Slides, Slide, Content, List, Item} from 'ionic/ionic';
 import {NavController, NavbarTemplate, NavParams, Navbar} from 'ionic/ionic';
 import {dom} from 'ionic/util';
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [formDirectives, Nav, Slides, Slide, Content, Button, List, Item, NgFor, ParallaxEffect]
+  directives: [formDirectives, Nav, Slides, Slide, Content, List, Item, NgFor, ParallaxEffect]
 })
 export default class IonicApp {
   constructor() {

ionic/components/app/test/sink/index.js

@@ -6,7 +6,7 @@ import {Query} from 'angular2/src/core/annotations_impl/di';
 
 console.log(Query, QueryList);
 
-import {Ionic, Nav, ViewContainer, Aside, List, Item, Content, Button} from 'ionic/ionic';
+import {Ionic, Nav, ViewContainer, Aside, List, Item, Content} from 'ionic/ionic';
 
 import {ButtonPage} from './pages/button'
 import {NavPage} from './pages/nav'
@@ -23,14 +23,14 @@ import {SlidePage} from './pages/slides'
 import {ActionMenuPage} from './pages/action-menu'
 import {ModalPage} from './pages/modal'
 
-console.log('Loaded', Nav, NgFor, NgIf, Aside, List, ViewContainer, Item, Content, Button);
+console.log('Loaded', Nav, NgFor, NgIf, Aside, List, ViewContainer, Item, Content);
 
 @Component({
   selector: 'ion-view',
 })
 @View({
   templateUrl: 'main.html',
-  directives: [Nav, NgFor, NgIf, Aside, List, ViewContainer, Item, Content, Button]
+  directives: [Nav, NgFor, NgIf, Aside, List, ViewContainer, Item, Content]
 })
 export default class IonicApp {
   constructor(elementRef: ElementRef) {//, @Query(Aside) nav: QueryList) {//, @Descendant() aside: Aside) {

ionic/components/app/test/sink/pages/action-menu.js

@@ -3,7 +3,7 @@ import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {ActionMenu, NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+import {ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'
@@ -25,7 +25,7 @@ import {ActionMenu, NavbarTemplate, Navbar, NavController, Button, Content} from
     <button primary (click)="openMenu()">Open Menu</button>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, Button]
+  directives: [NavbarTemplate, Navbar, Content]
 })
 export class ActionMenuPage {
   constructor(nav: NavController) {

ionic/components/app/test/sink/pages/aside.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'

ionic/components/app/test/sink/pages/button.js

@@ -3,7 +3,7 @@ import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Routable, NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+import {Routable, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'
@@ -38,7 +38,7 @@ import {Routable, NavbarTemplate, Navbar, NavController, Button, Content} from '
 
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, Button, NgIf]
+  directives: [NavbarTemplate, Navbar, Content, NgIf]
 })
 export class ButtonPage {
   constructor(nav: NavController) {

ionic/components/app/test/sink/pages/card.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'

ionic/components/app/test/sink/pages/form.js

@@ -6,7 +6,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
 import {List, Item, Input, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'
@@ -36,7 +36,7 @@ import {List, Item, Input, ActionMenu, Modal, ModalRef,
     </form>
   </ion-content>
   `,
-  directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input, Button]
+  directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input]
 })
 export class FormPage {
   constructor() {

ionic/components/app/test/sink/pages/ionicons.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'

ionic/components/app/test/sink/pages/list.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'

ionic/components/app/test/sink/pages/modal.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'
@@ -26,7 +26,7 @@ import {ActionMenu, Modal, ModalRef,
     <button primary (click)="openModal()">Open Modal</button>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, Button]
+  directives: [NavbarTemplate, Navbar, Content]
 })
 export class ModalPage {
   constructor(nav: NavController, loader: DynamicComponentLoader, injector: Injector, domRenderer: DomRenderer, elementRef: ElementRef) {
@@ -59,7 +59,7 @@ export class ModalPage {
 })
 @View({
   template: '<ion-content padding><button (click)="close()" primary>Close Modal</button></ion-content>',
-  directives: [Button, Content]
+  directives: [Content]
 })
 export class MyModal {
   constructor(modalRef: ModalRef) {

ionic/components/app/test/sink/pages/nav.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'
@@ -26,7 +26,7 @@ import {List, Item, ActionMenu, Modal, ModalRef,
     <button primary (click)="push()">Push</button>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, List, Item, Button]
+  directives: [NavbarTemplate, Navbar, Content, List, Item]
 })
 export class NavPage {
   constructor(nav: NavController) {
@@ -45,7 +45,7 @@ export class NavPage {
     <button primary (click)="pop()">Pop</button>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, Button]
+  directives: [NavbarTemplate, Navbar, Content]
 })
 export class NavSecondPage {
   constructor(nav: NavController) {

ionic/components/app/test/sink/pages/search-bar.js

@@ -5,7 +5,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
 import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
   console.log(NavbarTemplate, Navbar, Content, formDirectives);
 

ionic/components/app/test/sink/pages/segment.js

@@ -5,7 +5,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
 import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'
@@ -70,7 +70,7 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
     </div>
   </ion-content>
   `,
-  directives: [NavbarTemplate, Navbar, Content, List, Item, Button, Segment, SegmentButton, formDirectives]
+  directives: [NavbarTemplate, Navbar, Content, List, Item, Segment, SegmentButton, formDirectives]
 })
 export class SegmentPage {
   constructor() {

ionic/components/app/test/sink/pages/slides.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'

ionic/components/app/test/sink/pages/table-search.js

@@ -5,7 +5,7 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
 import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
-  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
   console.log(NavbarTemplate, Navbar, Content, formDirectives);
 

ionic/components/app/test/sink/pages/tabs.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
-import {NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+import {NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
 
 @Component({
   selector: 'ion-view'

ionic/components/app/test/snapcat/index.js

@@ -5,7 +5,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
 
-import {Modal, ModalRef, Nav, Segment, Animation, SegmentButton, Slides, Slide, Content, Button, List, Item} from 'ionic/ionic';
+import {Modal, ModalRef, Nav, Segment, Animation, SegmentButton, Slides, Slide, Content, List, Item} from 'ionic/ionic';
 import {NavController, NavbarTemplate, NavParams, Navbar} from 'ionic/ionic';
 
 
@@ -38,7 +38,7 @@ Animation.register('my-fade-out', FadeOut);
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'detail.html',
-  directives: [formDirectives, NavbarTemplate, Navbar, Content, Button, List, Item]
+  directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item]
 })
 export class DetailPage {
   constructor(params: NavParams) {
@@ -49,7 +49,7 @@ export class DetailPage {
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'feed.html',
-  directives: [formDirectives, NgFor, NavbarTemplate, Navbar, Segment, SegmentButton, Content, Button, List, Item]
+  directives: [formDirectives, NgFor, NavbarTemplate, Navbar, Segment, SegmentButton, Content, List, Item]
 })
 export class FeedPage {
   constructor(nav: NavController) {
@@ -100,7 +100,7 @@ export class FeedPage {
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [formDirectives, Nav, Slides, Slide, Content, Button, List, Item]
+  directives: [formDirectives, Nav, Slides, Slide, Content, List, Item]
 })
 export default class IonicApp {
   constructor() {
@@ -129,7 +129,7 @@ export default class IonicApp {
 })
 @View({
   template: '<ion-modal><ion-content padding><button primary (click)="close()">Close</button></ion-content></ion-modal>',
-  directives: [Nav, Button, Content, ModalContainer]
+  directives: [Nav, Content, ModalContainer]
 })
 export class SettingsModal extends Modal {
   // constructor() {
@@ -142,7 +142,7 @@ export class SettingsModal extends Modal {
 })
 @View({
   template: '<ion-modal><button icon (click)="close()"><i class="icon ion-close"></i></button><h2>20</h2><p>You\'re pretty awesome</p></ion-modal>',
-  directives: [Nav, Button, Content, ModalContainer]
+  directives: [Nav, Content, ModalContainer]
 })
 export class HeartModal {
   constructor(modalRef: ModalRef) {

ionic/components/aside/test/basic/index.js

@@ -1,7 +1,7 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Aside, List, Item, Content, Button} from 'ionic/ionic';
+import {Aside, List, Item, Content} from 'ionic/ionic';
 
 
 @Component({

ionic/components/button/button.js

@@ -1,21 +0,0 @@
-import { ElementRef} from 'angular2/angular2'
-import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
-
-import {IonicComponent_OLD} from 'ionic/config/component'
-
-
-@Directive({
-  selector: 'button, ion-button, [ion-button],.button',
-})
-export class Button {
-  constructor(
-    elementRef: ElementRef
-  ) {
-    this.domElement = elementRef.domElement;
-    this.config = Button.config.invoke(this);
-  }
-}
-new IonicComponent_OLD(Button, {
-   enhanceRawElement: true,
-   propClasses: ['primary', 'secondary', 'danger', 'light', 'stable', 'dark', 'block', 'clear', 'full', 'icon']
-})

ionic/components/button/button.scss

@@ -24,7 +24,8 @@ $button-small-icon-size:          2.1rem !default;
 // Core Button
 // --------------------------------------------------
 
-.button {
+button,
+[button] {
   display: inline-flex;
   flex-shrink: 0;
   flex-flow: row nowrap;
@@ -49,13 +50,7 @@ $button-small-icon-size:          2.1rem !default;
 
   cursor: pointer;
   user-select: none;
-}
 
-
-// Core Button Styling
-// --------------------------------------------------
-
-.button {
   border: 1px solid #ccc;
   padding: $button-padding;
   min-height: $button-height;
@@ -66,84 +61,89 @@ $button-small-icon-size:          2.1rem !default;
   border: transparent;
   border-radius: $button-border-radius;
 
-  &.button-icon {
+  &[icon] {
     font-size: $button-icon-size;
     background: none;
     border: none;
   }
 
-  &.button-large {
+  &[large] {
     padding: 0 $button-large-padding;
     min-width: ($button-large-padding * 4);
     min-height: $button-large-height;
     font-size: $button-large-font-size;
 
-    &.button-icon {
+    &[icon] {
       font-size: $button-large-icon-size;
     }
   }
 
-  &.button-small {
+  &[small] {
     padding: 0 $button-small-padding;
     min-width: ($button-small-padding * 3);
     min-height: $button-small-height;
     font-size: $button-small-font-size;
 
-    &.button-icon {
+    &[icon] {
       font-size: $button-small-icon-size;
     }
   }
-}
 
 
-// Core Button Types
-// --------------------------------------------------
+  // Core Button Types
+  // --------------------------------------------------
 
-.button-clear {
-  border-color: transparent;
-  background: none;
+  &[clear] {
+    border-color: transparent;
+    background: none;
 
-  &.activated {
-    opacity: 0.3;
+    &.activated {
+      opacity: 0.3;
+    }
   }
-}
 
-.button-outline {
-  background: none;
-}
+  &[outline] {
+    background: none;
+  }
 
-.button-block {
-  display: flex;
-  clear: both;
-  margin-right: 0;
-  margin-left: 0;
-
-  &:after {
+  &[block] {
+    display: flex;
     clear: both;
+    margin-right: 0;
+    margin-left: 0;
+    width: 100%;
+
+    &:after {
+      clear: both;
+    }
   }
+
+  &.disabled,
+  &[disabled] {
+    opacity: .4;
+    cursor: default !important;
+    pointer-events: none;
+  }
+
 }
 
-.button-full,
-.button-full > .button {
+[full],
+[full] > button,
+[full] > [button] {
   display: flex;
   margin-right: 0;
   margin-left: 0;
+  width: 100%;
   border-radius: 0;
 
-  &.button-outline.button-outline {
+  &[outline][outline] {
     border-right-width: 0;
     border-left-width: 0;
   }
 }
 
-button.button-block,
-button.button-full,
-.button-full > button.button,
-input.button.button-block  {
-  width: 100%;
-}
-
-.padding > .button.button-block:first-child {
+.padding > button[block]:first-child,
+.padding > [button][block]:first-child {
   margin-top: 0;
 }
 
@@ -164,17 +164,11 @@ input.button.button-block  {
 // Button Misc
 // --------------------------------------------------
 
-a.button {
+a[button] {
+  color: inherit;
   text-decoration: none;
 }
 
-.button.disabled,
-.button[disabled] {
-  opacity: .4;
-  cursor: default !important;
-  pointer-events: none;
-}
-
 
 // Core Button Mixins
 // --------------------------------------------------
@@ -198,14 +192,14 @@ a.button {
 }
 
 @mixin button-clear($fg-color) {
-  &.button-clear {
+  &[clear] {
     background: none;
     color: $fg-color;
   }
 }
 
 @mixin button-outline($fg-color) {
-  &.button-outline {
+  &[outline] {
     border: 1px solid $fg-color;
     background: transparent;
     color: $fg-color;
@@ -222,7 +216,8 @@ a.button {
 
 @each $color, $value in $colors {
 
-  .button-#{$color} {
+  button[#{$color}],
+  [button][#{$color}] {
     @include button-default(get-color($color, base),
                             get-color($color, inverse));
 

ionic/components/button/test/basic/index.js

@@ -1,11 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/basic/main.html

@@ -1,60 +1,49 @@
 
 <div>
-  <a class="button" href="#">a (default)</a>
-  <button class="button">button (default)</button>
-  <button class="button hover">hover</button>
-  <button class="button activated">activated</button>
+  <a button href="#">a[button]</a>
+  <button>button</button>
+  <button class="hover">hover</button>
+  <button class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-primary" href="#">a.primary</a>
-  <button class="button button-primary">button.primary</button>
-  <button class="button button-primary hover">hover</button>
-  <button class="button button-primary activated">activated</button>
+  <a button primary href="#">a[primary]</a>
+  <button primary>button[primary]</button>
+  <button primary class="hover">hover</button>
+  <button primary class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-secondary" href="#">a.secondary</a>
-  <button class="button button-secondary">button.secondary</button>
-  <button class="button button-secondary hover">hover</button>
-  <button class="button button-secondary activated">activated</button>
+  <a button secondary href="#">a[secondary]</a>
+  <button secondary>button[secondary]</button>
+  <button secondary class="hover">hover</button>
+  <button secondary class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-danger" href="#">a.danger</a>
-  <button class="button button-danger">button.danger</button>
-  <button class="button button-danger hover">hover</button>
-  <button class="button button-danger activated">activated</button>
+  <a button danger href="#">a[danger]</a>
+  <button danger>button[danger]</button>
+  <button danger class="hover">hover</button>
+  <button danger class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-light" href="#">a.light</a>
-  <button class="button button-light">button.light</button>
-  <button class="button button-light hover">hover</button>
-  <button class="button button-light activated">activated</button>
+  <a button light href="#">a[light]</a>
+  <button light>button[light]</button>
+  <button light class="hover">hover</button>
+  <button light class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-stable" href="#">a.stable</a>
-  <button class="button button-stable">button.stable</button>
-  <button class="button button-stable hover">hover</button>
-  <button class="button button-stable activated">activated</button>
+  <a button stable href="#">a[stable]</a>
+  <button stable>button[stable]</button>
+  <button stable class="hover">hover</button>
+  <button stable class="activated">activated</button>
 </div>
 
 <div>
-  <a class="button button-dark" href="#">a.dark</a>
-  <button class="button button-dark">button.dark</button>
-  <button class="button button-dark hover">hover</button>
-  <button class="button button-dark activated">activated</button>
-</div>
-
-<h2>With Properties</h2>
-
-<div>
-  <button primary>button.primary</button>
-  <button secondary>button.secondary</button>
-  <button stable>button.stable</button>
-  <button light>button.light</button>
-  <button dark>button.dark</button>
-  <button danger>button.danger</button>
+  <a button dark href="#">a[dark]</a>
+  <button dark>button[dark]</button>
+  <button dark class="hover">hover</button>
+  <button dark class="activated">activated</button>
 </div>

ionic/components/button/test/block/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/block/main.html

@@ -2,18 +2,18 @@
 <div class="padding">
 
   <div>
-    <a class="button button-block button-primary" href="#">a.button-block</a>
-    <button class="button button-block button-primary">button.button-block</button>
+    <a button block primary href="#">a[button][block]</a>
+    <button block primary>button[button][block]</button>
   </div>
 
   <div>
-    <a class="button button-block button-outline button-primary" href="#">a.button-block</a>
-    <button class="button button-block button-outline button-primary">button.button-block</button>
+    <a button block outline primary href="#">a[button][block][outline]</a>
+    <button block outline primary>button[block][outline</button>
   </div>
 
   <div>
-    <a class="button button-block button-clear button-primary" href="#">a.button-block</a>
-    <button class="button button-block button-clear button-primary">button.button-block</button>
+    <a button block clear primary href="#">a[button][block][clear]</a>
+    <button block clear primary>button[button][block]</button>
   </div>
 
 </div>

ionic/components/button/test/clear/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/full/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/icons/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/outline/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/button/test/sizes/index.js

@@ -1,12 +1,10 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button} from 'ionic/components/button/button'
-
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Button]
+  directives: []
 })
 export default class IonicApp {}

ionic/components/checkbox/test/basic/index.js

@@ -2,13 +2,13 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 //import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {Checkbox, Content, Button, List} from 'ionic/ionic';
+import {Checkbox, Content, List} from 'ionic/ionic';
 //import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Checkbox, List, Content, Button]
+  directives: [Checkbox, List, Content]
 })
 export default class IonicApp {
   constructor() {

ionic/components/form/test/basic/index.js

@@ -3,7 +3,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
-//import {Button, Switch, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
+//import {Switch, Form, List, Label, Item, Input, Content} from 'ionic/ionic';
 import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
 console.log([formDirectives].concat(IONIC_DIRECTIVES));

ionic/components/modal/test/basic/index.js

@@ -4,7 +4,7 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {Parent, Ancestor} from 'angular2/src/core/annotations_impl/visibility';
 
-import {Content, List, Item, Button, Modal, ModalRef} from 'ionic/ionic';
+import {Content, List, Item, Modal, ModalRef} from 'ionic/ionic';
 
 import {Nav, IonicComponent} from 'ionic/ionic';
 import {NavController, NavParams, NavbarTemplate, Navbar} from 'ionic/ionic';
@@ -13,7 +13,7 @@ import {NavController, NavParams, NavbarTemplate, Navbar} from 'ionic/ionic';
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [Content, List, Item, Button]
+  directives: [Content, List, Item]
 })
 export default class IonicApp {
   openModal() {
@@ -25,7 +25,7 @@ export default class IonicApp {
 @IonicComponent(Modal)
 @View({
   template: '<ion-nav [initial]="initial"></ion-nav>',
-  directives: [Nav, Button, Content]
+  directives: [Nav, Content]
 })
 export class ContactModal extends Modal {
   constructor() {

ionic/components/nav/test/basic/index.js

@@ -2,7 +2,7 @@ import {bootstrap, QueryList} from 'angular2/angular2'
 import {Component, Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Button, Nav, NavPush, NavPop, NavParams, Routable, Router, NavController, NavbarTemplate, Navbar, NavPush, Content} from 'ionic/ionic';
+import {Nav, NavPush, NavPop, NavParams, Routable, Router, NavController, NavbarTemplate, Navbar, NavPush, Content} from 'ionic/ionic';
 
 import {SecondPage} from './pages/second-page'
 
@@ -30,7 +30,7 @@ import {SecondPage} from './pages/second-page'
       '<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: [Button, NavbarTemplate, Navbar, NavPush, Content]
+  directives: [NavbarTemplate, Navbar, NavPush, Content]
 })
 export default class FirstPage {
   constructor(

ionic/components/radio/test/basic/index.js

@@ -2,13 +2,13 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 //import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {RadioGroup, RadioButton, Content, Button, List} from 'ionic/ionic';
+import {RadioGroup, RadioButton, Content, List} from 'ionic/ionic';
 
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [RadioGroup, RadioButton, List, Content, Button]
+  directives: [RadioGroup, RadioButton, List, Content]
 })
 export default class IonicApp {
   constructor() {

ionic/components/segment/segment.js

@@ -7,7 +7,6 @@ import {View} from 'angular2/src/core/annotations_impl/view';
 import {ControlGroup, ControlDirective} from 'angular2/forms'
 import {dom} from 'ionic/util';
 import {IonicComponent} from 'ionic/config/component'
-import {Button} from 'ionic/components/button/button'
 
 
 @IonicComponent(Segment)
@@ -16,7 +15,7 @@ import {Button} from 'ionic/components/button/button'
     <content></content>
   </div>
   `,
-  directives: [Button, SegmentButton]
+  directives: [SegmentButton]
 })
 export class Segment {
 

ionic/components/segment/test/basic/index.js

@@ -2,14 +2,14 @@ import {NgSwitch, NgSwitchWhen} from 'angular2/angular2'
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Segment, SegmentButton, Content, Button} from 'ionic/ionic';
+import {Segment, SegmentButton, Content} from 'ionic/ionic';
 import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
 
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [formDirectives].concat([Segment, SegmentButton, Content, Button, NgSwitch, NgSwitchWhen])
+  directives: [formDirectives].concat([Segment, SegmentButton, Content, NgSwitch, NgSwitchWhen])
 })
 export default class IonicApp {
   constructor() {

ionic/components/slides/test/basic/index.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Slides, Slide, SlidePager, List, Item, Content, Button} from 'ionic/ionic';
+import {Slides, Slide, SlidePager, List, Item, Content} from 'ionic/ionic';
 
 
 @Component({
   selector: 'ion-view'
 })
 @View({
-  directives: [Slides, Slide, SlidePager, Content, Button, List, Item],
+  directives: [Slides, Slide, SlidePager, Content, List, Item],
   templateUrl: 'main.html'
 })
 export default class IonicApp {

ionic/components/slides/test/continuous/index.js

@@ -1,14 +1,14 @@
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 
-import {Slides, Slide, SlidePager, List, Item, Content, Button} from 'ionic/ionic';
+import {Slides, Slide, SlidePager, List, Item, Content} from 'ionic/ionic';
 
 
 @Component({
   selector: 'ion-view'
 })
 @View({
-  directives: [Slides, Slide, SlidePager, Content, Button, List, Item],
+  directives: [Slides, Slide, SlidePager, Content, List, Item],
   template: `
     <ion-slides #slides loop>
       <ion-slide style="background-color: blue">

ionic/components/switch/test/basic/index.js

@@ -2,13 +2,13 @@ import {Component, Directive} from 'angular2/src/core/annotations_impl/annotatio
 import {View} from 'angular2/src/core/annotations_impl/view';
 
 import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
-import {Switch, Content, Button, List} from 'ionic/ionic';
+import {Switch, Content, List} from 'ionic/ionic';
 //import {IONIC_DIRECTIVES} from 'ionic/ionic'
 
 @Component({ selector: 'ion-view' })
 @View({
   templateUrl: 'main.html',
-  directives: [FormDirectives].concat([Switch, List, Content, Button])
+  directives: [FormDirectives].concat([Switch, List, Content])
 })
 export default class IonicApp {
   constructor() {

ionic/directives.js

@@ -1,5 +1,5 @@
 import {
-  Button, List, Content,
+  List, Content,
 
   Icon,
 
@@ -9,7 +9,7 @@ import {
 } from 'ionic/ionic';
 
 var IONIC_DIRECTIVES = [
-  Button, List, Content,
+  List, Content,
 
   Icon,