chore(): begin adding ionic components to mono-repo.

packages/ionic-angular/src/components/button/test/anchors/app/app.component.ts

@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/anchors/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/anchors/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/anchors/e2e.ts

@@ -0,0 +1 @@
+

packages/ionic-angular/src/components/button/test/anchors/pages/page-one/page-one.html

@@ -0,0 +1,52 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Anchor Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center" no-bounce>
+
+  <p>
+    <ion-button href="#">Default</ion-button>
+    <ion-button href="#" class="activated">Default.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button href="#" color="primary">Primary</ion-button>
+    <ion-button href="#" color="primary" class="activated">Primary.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button href="#" color="secondary">Secondary</ion-button>
+    <ion-button href="#" color="secondary" class="activated">Secondary.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button href="#" color="danger">Danger</ion-button>
+    <ion-button href="#" color="danger" class="activated">Danger.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button href="#" color="light">Light</ion-button>
+    <ion-button href="#" color="light" class="activated">Light.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button href="#" color="dark">Dark</ion-button>
+    <ion-button href="#" color="dark" class="activated">Dark.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button href="#" disabled>A Disabled</ion-button>
+    <ion-button href="#" color="secondary" disabled>Secondary Disabled</ion-button>
+  </p>
+
+  <p>
+    <ion-button href="#" [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
+    <ion-button href="#" outline [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/anchors/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/anchors/pages/page-one/page-one.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { App } from '../../../../../..';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  btnColor: string;
+  testingColors = ['primary', 'secondary', 'danger', 'dark'];
+  testingColorIndex = 0;
+
+  constructor(app: App) {
+    app.setTitle('Basic Buttons');
+    this.chgColor();
+  }
+
+  chgColor() {
+    this.btnColor = this.testingColors[this.testingColorIndex];
+    console.log('dynamic btnColor', this.btnColor);
+    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
+  }
+}

packages/ionic-angular/src/components/button/test/attributes/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/attributes/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/attributes/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/attributes/e2e.ts

@@ -0,0 +1 @@
+

packages/ionic-angular/src/components/button/test/attributes/pages/page-one/page-one.html

@@ -0,0 +1,51 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-buttons end>
+      <ion-button>Default</ion-button>
+      <ion-button solid>Solid</ion-button>
+      <ion-button outline>Outline</ion-button>
+      <ion-button [clear]="isBarClear" (click)="toggleBarClear()">Clear</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center" no-bounce>
+  <h5>Button Displays</h5>
+  <ion-button [block]="isBlock" (click)="toggleBlock()">Block (toggle)</ion-button>
+  <ion-button [full]="isFull">Full</ion-button>
+  <ion-button full block>Both</ion-button>
+
+  <h5>Button Styles (Click to Toggle)</h5>
+  <ion-button [solid]="isSolid" (click)="toggleStyles()">Solid</ion-button>
+  <ion-button [outline]="isOutline" (click)="toggleStyles()">Outline</ion-button>
+  <ion-button [clear]="isClear" (click)="toggleStyles()">Clear</ion-button>
+
+  <h5>Button Sizes</h5>
+  <ion-button small="true">Small</ion-button>
+  <ion-button default="true">Default</ion-button>
+  <ion-button large>Large</ion-button>
+
+  <h5>Button Colors (Click to Toggle)</h5>
+  <ion-button block [color]="isSecondary" (click)="toggleColors()">Block</ion-button>
+  <ion-button solid [color]="isDanger" (click)="toggleColors()">Solid</ion-button>
+  <ion-button outline [color]="isDark" (click)="toggleColors()">Outline</ion-button>
+  <ion-button clear [color]="isSecondary" (click)="toggleColors()">Clear</ion-button>
+  <ion-button (click)="removeColors()">Remove Colors</ion-button>
+
+</ion-content>
+
+<ion-footer>
+
+  <ion-toolbar>
+    <ion-buttons end>
+      <ion-button color="secondary">Default</ion-button>
+      <ion-button solid color="danger">Solid</ion-button>
+      <ion-button outline color="dark">Outline</ion-button>
+      <ion-button clear color="secondary">Clear</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+</ion-footer>

packages/ionic-angular/src/components/button/test/attributes/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/attributes/pages/page-one/page-one.ts

@@ -0,0 +1,49 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  isFull: boolean = true;
+  isBlock: boolean = true;
+  isBarClear: boolean = true;
+
+  // Styles
+  isSolid: boolean = true;
+  isOutline: boolean = true;
+  isClear: boolean = true;
+
+  // Colors
+  isSecondary: string = 'secondary';
+  isDanger: string = 'danger';
+  isDark: string = 'dark';
+
+  toggleBlock() {
+    this.isFull = !this.isFull;
+    this.isBlock = !this.isBlock;
+  }
+
+  // Toggles solid, outline, and clear buttons
+  toggleStyles() {
+    this.isSolid = !this.isSolid;
+    this.isOutline = !this.isOutline;
+    this.isClear = !this.isClear;
+  }
+
+  // Toggles the colors on the buttons (secondary, danger, dark)
+  toggleColors() {
+    this.isSecondary = (this.isSecondary === 'secondary' ? '' : 'secondary');
+    this.isDanger = (this.isDanger === 'danger' ? '' : 'danger');
+    this.isDark = (this.isDark === 'dark' ? '' : 'dark');
+  }
+
+  toggleBarClear() {
+    this.isBarClear = !this.isBarClear;
+  }
+
+  removeColors() {
+    this.isSecondary = null;
+    this.isDanger = null;
+    this.isDark = null;
+  }
+}

packages/ionic-angular/src/components/button/test/basic/app/app.component.ts

@@ -0,0 +1,9 @@
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/basic/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/basic/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/basic/e2e.ts

@@ -0,0 +1 @@
+

packages/ionic-angular/src/components/button/test/basic/pages/page-one/page-one.html

@@ -0,0 +1,52 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Default Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center" no-bounce>
+
+  <p>
+    <ion-button (click)="test($event)">Default</ion-button>
+    <ion-button (click)="test($event)" class="activated">Default.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button color="primary">Primary</ion-button>
+    <ion-button color="primary" class="activated">Primary.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button color="secondary">Secondary</ion-button>
+    <ion-button color="secondary" class="activated">Secondary.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button color="danger">Danger</ion-button>
+    <ion-button color="danger" class="activated">Danger.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button color="light">Light</ion-button>
+    <ion-button color="light" class="activated">Light.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button color="dark">Dark</ion-button>
+    <ion-button color="dark" class="activated">Dark.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button disabled>Button Disabled</ion-button>
+    <ion-button color="secondary" disabled>Secondary Disabled</ion-button>
+  </p>
+
+  <p>
+    <ion-button [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
+    <ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/basic/pages/page-one/page-one.module.ts

@@ -0,0 +1,19 @@
+
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/basic/pages/page-one/page-one.ts

@@ -0,0 +1,26 @@
+import { Component } from '@angular/core';
+import { App } from '../../../../../..';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  btnColor: string;
+  testingColors = ['primary', 'secondary', 'danger', 'dark'];
+  testingColorIndex = 0;
+
+  constructor(app: App) {
+    app.setTitle('Basic Buttons');
+    this.chgColor();
+  }
+
+  chgColor() {
+    this.btnColor = this.testingColors[this.testingColorIndex];
+    console.log('dynamic btnColor', this.btnColor);
+    this.testingColorIndex = (this.testingColorIndex >= this.testingColors.length - 1 ? 0 : this.testingColorIndex + 1);
+  }
+
+  test(ev: UIEvent) {
+    console.log(`button click from: ${ev.type}, timestamp: ${Date.now()}`);
+  }
+}

packages/ionic-angular/src/components/button/test/block/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/block/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/block/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/block/e2e.ts

@@ -0,0 +1 @@
+

packages/ionic-angular/src/components/button/test/block/pages/page-one/page-one.html

@@ -0,0 +1,46 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Block Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <ion-button block href="#">a[ion-button][block]</ion-button>
+    <ion-button block>button[ion-button][block]</ion-button>
+  </p>
+
+  <p>
+    <ion-button block href="#"><ion-icon slot="start" name="help-circle"></ion-icon> a[ion-button][block] icon</ion-button>
+    <ion-button block><ion-icon slot="start" name="help-circle"></ion-icon> button[ion-button][block] icon</ion-button>
+  </p>
+
+  <p>
+    <ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</ion-button>
+    <ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</ion-button>
+  </p>
+
+  <p>
+    <ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</ion-button>
+    <ion-button block clear color="dark">button[ion-button][clear][block][dark]</ion-button>
+  </p>
+
+  <p>
+    <ion-button block round href="#">a[ion-button][block][round]</ion-button>
+    <ion-button block round>button[ion-button][block][round]</ion-button>
+  </p>
+
+  <p>
+    <ion-button block round outline href="#">a[ion-button][block][round][outline]</ion-button>
+    <ion-button block round outline>button[ion-button][block][round][outline]</ion-button>
+  </p>
+
+  <p>
+    <ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/block/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/block/pages/page-one/page-one.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  blockButton = true;
+
+  toggleBlock() {
+    this.blockButton = !this.blockButton;
+  }
+}

packages/ionic-angular/src/components/button/test/button.spec.ts

@@ -0,0 +1,264 @@
+// import { Button } from '../button';
+// import { Config } from '../../../config/config';
+// import { mockConfig, mockElementRef, mockRenderer } from '../../../util/mock-providers';
+
+
+// describe('button', () => {
+
+//   it('should set a different button role', () => {
+//     let b = mockButton();
+//     b.outline = true;
+//     b.small = true;
+//     b.full = true;
+//     b.color = 'primary';
+//     b.setRole('bar-button');
+//     b._assignCss(true);
+
+//     expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+//     expect(hasClass(b, 'bar-button-small')).toEqual(true);
+//     expect(hasClass(b, 'bar-button-full')).toEqual(true);
+//     expect(hasClass(b, 'bar-button-outline-ios-primary')).toEqual(true);
+
+//     expect(hasClass(b, 'button-outline')).toEqual(false);
+//     expect(hasClass(b, 'button-small')).toEqual(false);
+//     expect(hasClass(b, 'button-full')).toEqual(false);
+//     expect(hasClass(b, 'button-primary')).toEqual(false);
+//   });
+
+//   it('should remove button color attributes and add different role', () => {
+//     let b = mockButton();
+//     b.outline = true;
+//     b.small = true;
+//     b.full = true;
+//     b.color = 'primary';
+
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-outline')).toEqual(true);
+//     expect(hasClass(b, 'button-small')).toEqual(true);
+//     expect(hasClass(b, 'button-full')).toEqual(true);
+//     expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true);
+
+//     b._assignCss(false);
+//     expect(hasClass(b, 'button-outline')).toEqual(false);
+//     expect(hasClass(b, 'button-small')).toEqual(false);
+//     expect(hasClass(b, 'button-full')).toEqual(false);
+//     expect(hasClass(b, 'button-outline-ios-primary')).toEqual(false);
+//   });
+
+//   it('should read button color attributes with styles', () => {
+//     let b = mockButton();
+//     b.outline = true;
+//     b.small = true;
+//     b.full = true;
+//     b.color = 'primary';
+
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button')).toEqual(true);
+//     expect(hasClass(b, 'button-outline')).toEqual(true);
+//     expect(hasClass(b, 'button-small')).toEqual(true);
+//     expect(hasClass(b, 'button-full')).toEqual(true);
+//     expect(hasClass(b, 'button-outline-ios-primary')).toEqual(true);
+
+//     b = mockButton();
+//     b.clear = true;
+//     b.color = 'primary';
+//     b.color = 'secondary';
+
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button')).toEqual(true);
+//     expect(hasClass(b, 'button-clear')).toEqual(true);
+//     expect(hasClass(b, 'button-clear-ios-primary')).toEqual(false);
+//     expect(hasClass(b, 'button-clear-ios-secondary')).toEqual(true);
+
+//     b = mockButton();
+//     b.solid = true;
+//     b.color = 'primary';
+//     b.color = 'secondary';
+
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button')).toEqual(true);
+//     expect(hasClass(b, 'button-solid')).toEqual(true);
+//     expect(hasClass(b, 'button-ios-primary')).toEqual(false);
+//     expect(hasClass(b, 'button-ios-secondary')).toEqual(true);
+
+//     b = mockButton();
+//     b.solid = true;
+//     b.color = 'primary';
+//     b.color = 'secondary';
+
+//     b.setRole('bar-button');
+//     b._assignCss(true);
+//     expect(hasClass(b, 'bar-button-solid')).toEqual(true);
+//     expect(hasClass(b, 'bar-button-solid-ios-primary')).toEqual(false);
+//     expect(hasClass(b, 'bar-button-solid-ios-secondary')).toEqual(true);
+//   });
+
+//   it('should auto add the default style', () => {
+//     let b = mockButton();
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button')).toEqual(true);
+//     expect(hasClass(b, 'button-default')).toEqual(true);
+
+//     b = mockButton();
+//     b.clear = true;
+
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button')).toEqual(true);
+//     expect(hasClass(b, 'button-default')).toEqual(false);
+//     expect(hasClass(b, 'button-clear')).toEqual(true);
+//   });
+
+//   it('should read button color attributes', () => {
+//     let b = mockButton();
+//     b.color = 'primary';
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-ios-primary')).toEqual(true);
+
+//     b = mockButton();
+//     b.color = 'primary';
+//     b.color = 'secondary';
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-ios-primary')).toEqual(false);
+//     expect(hasClass(b, 'button-ios-secondary')).toEqual(true);
+//   });
+
+//   it('should read button style attributes', () => {
+//     let b = mockButton();
+//     b.clear = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-clear')).toEqual(true);
+
+//     b = mockButton();
+//     b.outline = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-outline')).toEqual(true);
+
+//     b = mockButton();
+//     b.solid = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-solid')).toEqual(true);
+
+//     b = mockButton();
+//     b.clear = true;
+//     b.outline = true;
+//     b.small = true;
+//     b.full = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-clear')).toEqual(false);
+//     expect(hasClass(b, 'button-outline')).toEqual(true);
+//     expect(hasClass(b, 'button-small')).toEqual(true);
+//     expect(hasClass(b, 'button-full')).toEqual(true);
+
+//     b = mockButton();
+//     b.outline = true;
+//     b.setRole('bar-button');
+//     b._assignCss(true);
+//     expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+//   });
+
+//   it('should read button shape attributes', () => {
+//     let b = mockButton();
+//     b.round = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-round')).toEqual(true);
+//   });
+
+//   it('should read button display attributes', () => {
+//     let b = mockButton();
+//     b.block = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-block')).toEqual(true);
+
+//     b = mockButton();
+//     b.full = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-full')).toEqual(true);
+
+//     b = mockButton();
+//     b.block = true;
+//     b.full = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-block')).toEqual(false);
+//     expect(hasClass(b, 'button-full')).toEqual(true);
+//   });
+
+//   it('should read button size attributes', () => {
+//     let b = mockButton();
+//     b.small = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-small')).toEqual(true);
+
+//     b = mockButton();
+//     b.large = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-large')).toEqual(true);
+
+//     b = mockButton();
+//     b.large = true;
+//     b.small = true;
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button-large')).toEqual(false);
+//     expect(hasClass(b, 'button-small')).toEqual(true);
+//   });
+
+//   it('should add button css class', () => {
+//     let b = mockButton();
+//     b._assignCss(true);
+//     expect(hasClass(b, 'button')).toEqual(true);
+//   });
+
+//   it('should add disable-hover css class', () => {
+//     let config = mockConfig({
+//       hoverCSS: false
+//     });
+//     let b = mockButton(config);
+
+//     expect(hasClass(b, 'disable-hover')).toEqual(true);
+//   });
+
+//   it('should set defaults', () => {
+//     let b = mockButton();
+//     expect(b._role).toEqual('button');
+//     expect(b._size).toEqual(undefined);
+//     expect(b._color).toEqual(undefined);
+//     expect(b._style).toEqual('default');
+//     expect(b._display).toEqual(undefined);
+//   });
+
+//   it('should set different modes', () => {
+//     let b = mockButton();
+
+//     b._assignCss(true);
+//     expect(b._mode).toEqual('ios');
+//     expect(hasClass(b, 'button')).toEqual(true);
+//     expect(hasClass(b, 'button-ios')).toEqual(true);
+
+//     b.mode = 'wp';
+//     expect(b._mode).toEqual('wp');
+//     expect(hasClass(b, 'button-wp')).toEqual(true);
+
+//     b.mode = 'blah';
+//     expect(b._mode).toEqual('blah');
+//     expect(hasClass(b, 'button-blah')).toEqual(true);
+//   });
+
+//   it('should add alert-button css class', () => {
+//     let b = mockButton(null, 'alert-button');
+//     b._assignCss(true);
+//     expect(hasClass(b, 'alert-button')).toEqual(true);
+//   });
+
+// });
+
+// function mockButton(config?: Config, ionButton?: string) {
+//   config = config || mockConfig();
+//   ionButton = ionButton || '';
+//   let b = new Button(ionButton, config, mockElementRef(), mockRenderer());
+//   b._init = true;
+//   b.mode = 'ios';
+//   return b;
+// }
+
+// function hasClass(button: any, className: string) {
+//   return button._elementRef.nativeElement.classList.contains(className);
+// }

packages/ionic-angular/src/components/button/test/clear/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/clear/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/clear/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/clear/e2e.ts

@@ -0,0 +1 @@
+

packages/ionic-angular/src/components/button/test/clear/pages/page-one/page-one.html

@@ -0,0 +1,46 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Clear Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <ion-button clear>Default</ion-button>
+    <ion-button clear class="activated">Default.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear color="primary">Primary</ion-button>
+    <ion-button clear color="primary" class="activated">Primary.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear color="secondary">Secondary</ion-button>
+    <ion-button clear color="secondary" class="activated">Secondary.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear color="danger">Danger</ion-button>
+    <ion-button clear color="danger" class="activated">Danger.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear color="light">Light</ion-button>
+    <ion-button clear color="light" class="activated">Light.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear color="dark">Dark</ion-button>
+    <ion-button clear color="dark" class="activated">Dark.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/clear/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/clear/pages/page-one/page-one.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  clearButton = true;
+
+  toggleClear() {
+    this.clearButton = !this.clearButton;
+  }
+}

packages/ionic-angular/src/components/button/test/decorator/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/decorator/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/decorator/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/decorator/e2e.ts

@@ -0,0 +1,5 @@
+import { by, element } from 'protractor';
+
+it('should click edit button', function() {
+  element(by.css('.e2eButtonEdit')).click();
+});

packages/ionic-angular/src/components/button/test/decorator/pages/page-one/page-one.html

@@ -0,0 +1,57 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Outline Buttons</ion-title>
+    <ion-buttons end>
+      <ion-button [strong]="strong" (click)="strong = !strong" class="e2eButtonEdit">
+        {{strong ? 'Done' : 'Edit' }}
+      </ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center" class="outer-content">
+
+  <p>
+    <ion-button [strong]="strong" small>Default (small)</ion-button>
+    <ion-button strong small>Default (small)</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline [strong]="strong" color="secondary">Outline</ion-button>
+    <ion-button outline strong color="secondary">Outline</ion-button>
+  </p>
+
+  <p>
+    <ion-button block [strong]="strong" color="danger" large>Block (large)</ion-button>
+    <ion-button block strong color="danger" large>Block (large)</ion-button>
+  </p>
+
+  <p>
+    <ion-button full [strong]="strong" color="dark">Full</ion-button>
+    <ion-button full strong color="dark">Default</ion-button>
+  </p>
+
+  <p>
+    <ion-button raised [strong]="strong" color="light">Raised</ion-button>
+    <ion-button raised strong color="light">Raised</ion-button>
+  </p>
+
+  <p>
+    <ion-button round [strong]="strong">Round</ion-button>
+    <ion-button round strong>Round</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear [strong]="strong">Clear</ion-button>
+    <ion-button clear strong>Clear</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear [strong]="strong">Default</ion-button>
+    <ion-button clear strong>Default</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/decorator/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/decorator/pages/page-one/page-one.ts

@@ -0,0 +1,8 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  strong = false;
+}

packages/ionic-angular/src/components/button/test/dynamic/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/dynamic/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/dynamic/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/dynamic/e2e.ts

@@ -0,0 +1,9 @@
+import { by, element } from 'protractor';
+
+it('should unify buttons', function() {
+  element(by.css('.e2eButtonDynamicUnify')).click();
+});
+
+it('should toggle buttons', function() {
+  element(by.css('.e2eButtonToggle')).click();
+});

packages/ionic-angular/src/components/button/test/dynamic/pages/page-one/page-one.html

@@ -0,0 +1,40 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-buttons start>
+      <ion-button color="danger" *ngIf="showIf">ngIf</ion-button>
+      <ion-button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</ion-button>
+    </ion-buttons>
+    <ion-title>Default Buttons</ion-title>
+    <ion-buttons end>
+      <ion-button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</ion-button>
+    </ion-buttons>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-button block [solid]="isSolid">Solid</ion-button>
+  <ion-button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</ion-button>
+  <ion-button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</ion-button>
+  <ion-button block [color]="myColor1" [round]="isCustom">Custom #1</ion-button>
+  <ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</ion-button>
+  <hr/>
+  <ion-button block color="secondary" [outline]="!liked" (click)="reportLike(true)" class="e2eButtonToggle">Secondary (Toggle)</ion-button>
+  <ion-button block color="danger" [outline]="liked !== false" (click)="reportLike(false)">Danger (Toggle)</ion-button>
+  <hr/>
+  <ion-button block outline color="danger" (click)="showIf = !showIf">Toggle Header</ion-button>
+  <hr/>
+  <ion-button block outline color="danger" (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</ion-button>
+  <ion-button block clear color="danger" (click)="reset()">Reset all buttons</ion-button>
+  <ion-button small *ngFor="let button of buttons"
+          [outline]="!button.selected && button.value !== value"
+          [color]="(button.selected || button.value === value) ? button.value : 'secondary'"
+          (click)="setValue(button.value)">
+    <ion-icon *ngIf="button.icon" name="{{button.icon}}"></ion-icon>
+    {{button.text}}
+  </ion-button>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/dynamic/pages/page-one/page-one.module.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/dynamic/pages/page-one/page-one.ts

@@ -0,0 +1,70 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  isDestructive: boolean;
+  isSecondary: boolean;
+  isCustom: boolean;
+  isSolid: boolean;
+  isOutline: boolean;
+  isClear: boolean;
+  isClicked: boolean;
+  myColor1: string;
+  myColor2: string;
+  multiColor: Array<string>;
+  showIf: boolean = true;
+  liked: boolean = false;
+  value: string;
+
+   public buttons = [
+    {selected: false, value: 'primary', text: 'Primary'},
+    {selected: false, value: 'secondary', text: 'Secondary'},
+    {selected: false, value: 'dark', text: 'Dark'}
+  ];
+
+  constructor() {
+    this.reset();
+  }
+
+  unify() {
+    this.isDestructive = false;
+    this.isSecondary = false;
+    this.isCustom = false;
+    this.isSolid = false;
+    this.isOutline = false;
+    this.isClear = false;
+    this.isClicked = false;
+    this.myColor1 = 'primary';
+    this.myColor2 = 'primary';
+  }
+
+  reset() {
+    this.isDestructive = true;
+    this.isSecondary = true;
+    this.isCustom = true;
+    this.isSolid = true;
+    this.isOutline = true;
+    this.isClear = true;
+    this.isClicked = false;
+    this.myColor1 = 'custom1';
+    this.myColor2 = 'custom2';
+  }
+
+  toggle() {
+    this.isClicked = !this.isClicked;
+  }
+
+  reportLike(liked: boolean): void {
+    this.liked = liked;
+  }
+
+  setValue(value: any) {
+    if (this.value !== value) {
+      this.buttons.forEach((btn: any) => btn.selected = (value === btn.value));
+      this.value = value;
+    }
+  }
+
+}

packages/ionic-angular/src/components/button/test/full/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/full/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/full/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/full/pages/page-one/page-one.html

@@ -0,0 +1,43 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Full Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content>
+
+  <p>
+    <ion-button full href="#">a[ion-button][full]</ion-button>
+    <ion-button full>button[ion-button][full]</ion-button>
+  </p>
+
+  <p>
+    <ion-button full href="#">
+      <ion-icon slot="start" name="help-circle"></ion-icon>
+      a[ion-button][full] + icon
+    </ion-button>
+    <ion-button full>
+      <ion-icon slot="start" name="help-circle"></ion-icon>
+      button[ion-button][full] + icon
+    </ion-button>
+  </p>
+
+  <p>
+    <ion-button full outline color="secondary" href="#">a[ion-button][full][outline][secondary]</ion-button>
+    <ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</ion-button>
+  </p>
+
+  <p>
+    <ion-button full clear color="light" href="#">a[ion-button][full][clear][light]</ion-button>
+    <ion-button full clear color="light">button[ion-button][full][clear][light]</ion-button>
+  </p>
+
+  <p>
+    <ion-button full clear color="dark" href="#">a[ion-button][full][clear][dark]</ion-button>
+    <ion-button full clear color="dark">button[ion-button][full][clear][dark]</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/full/pages/page-one/page-one.module.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/full/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

packages/ionic-angular/src/components/button/test/icons/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/icons/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/icons/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/icons/e2e.ts

@@ -0,0 +1 @@
+

packages/ionic-angular/src/components/button/test/icons/pages/page-one/page-one.html

@@ -0,0 +1,105 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Buttons Icons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <div>
+    <ion-button>
+      <ion-icon slot="start" name="home"></ion-icon>
+      Left Icon
+    </ion-button>
+    <ion-button href="#">
+      <ion-icon slot="start" name="home"></ion-icon>
+      Left Icon
+    </ion-button>
+  </div>
+
+  <div>
+    <ion-button>
+      Right Icon
+      <ion-icon slot="end" name="star"></ion-icon>
+    </ion-button>
+    <ion-button href="#">
+      Right Icon
+      <ion-icon slot="end" name="star"></ion-icon>
+    </ion-button>
+  </div>
+
+  <div>
+    <ion-button>
+      <ion-icon slot="icon-only" name="flag"></ion-icon>
+    </ion-button>
+    <ion-button href="#">
+      <ion-icon slot="icon-only" name="flag"></ion-icon>
+    </ion-button>
+  </div>
+
+  <div>
+    <ion-button large>
+      <ion-icon slot="start" name="help-circle"></ion-icon>
+      Left, Large
+    </ion-button>
+    <ion-button href="#" large>
+      <ion-icon slot="start" name="help-circle"></ion-icon>
+      Left, Large
+    </ion-button>
+  </div>
+
+  <div>
+    <ion-button large>
+      Right, Large
+      <ion-icon slot="end" name="settings"></ion-icon>
+    </ion-button>
+    <ion-button href="#" large>
+      Right, Large
+      <ion-icon slot="end" name="settings"></ion-icon>
+    </ion-button>
+  </div>
+
+  <div>
+    <ion-button large>
+      <ion-icon slot="icon-only" name="heart"></ion-icon>
+    </ion-button>
+    <ion-button href="#" large>
+      <ion-icon slot="icon-only" name="heart"></ion-icon>
+    </ion-button>
+  </div>
+
+  <div>
+    <ion-button small>
+      <ion-icon slot="start" name="checkmark"></ion-icon>
+      Left, Small
+    </ion-button>
+    <ion-button href="#" small>
+      <ion-icon slot="start" name="checkmark"></ion-icon>
+      Left, Small
+    </ion-button>
+  </div>
+
+  <div>
+    <ion-button small>
+      Right, Small
+      <ion-icon slot="end" name="arrow-forward"></ion-icon>
+    </ion-button>
+    <ion-button href="#" small>
+      Right, Small
+      <ion-icon slot="end" name="arrow-forward"></ion-icon>
+    </ion-button>
+  </div>
+
+  <div>
+    <ion-button small>
+      <ion-icon slot="icon-only" name="search"></ion-icon>
+    </ion-button>
+    <ion-button href="#" small>
+      <ion-icon slot="icon-only" name="search"></ion-icon>
+    </ion-button>
+  </div>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/icons/pages/page-one/page-one.module.ts

@@ -0,0 +1,19 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/icons/pages/page-one/page-one.ts

@@ -0,0 +1,6 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {}

packages/ionic-angular/src/components/button/test/outline/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/outline/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/outline/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/outline/pages/page-one/page-one.html

@@ -0,0 +1,62 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Outline Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center" class="outer-content">
+
+  <p>
+    <ion-button outline>Default</ion-button>
+    <ion-button outline class="activated">Default.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline color="primary">Primary</ion-button>
+    <ion-button outline color="primary" class="activated">Primary.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline color="secondary">Secondary</ion-button>
+    <ion-button outline color="secondary" class="activated">Secondary.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline color="danger">Danger</ion-button>
+    <ion-button outline color="danger" class="activated">Danger.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline color="light">Light</ion-button>
+    <ion-button outline color="light" class="activated">Light.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline color="dark">Dark</ion-button>
+    <ion-button outline color="dark" class="activated">Dark.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline block>button[ion-button][outline][block]</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline block class="activated">[outline][block].activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline block color="secondary">button[ion-button][outline][block][secondary]</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline block color="secondary" class="activated">[outline][block][secondary].activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/outline/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/outline/pages/page-one/page-one.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  outlineButton = true;
+
+  toggleOutline() {
+    this.outlineButton = !this.outlineButton;
+  }
+}

packages/ionic-angular/src/components/button/test/raised/app.module.ts

@@ -0,0 +1,33 @@
+import { Component, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {}
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    AppComponent,
+    E2EPage
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EPage
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/raised/main.html

@@ -0,0 +1,41 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Raised Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <ion-button raised><span>Default</span></ion-button>
+    <ion-button raised raised class="activated">Default.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button raised outline>Outline</ion-button>
+    <ion-button raised outline class="activated">Outline.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button raised clear>Clear</ion-button>
+    <ion-button raised clear class="activated">Clear.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button raised round>Round</ion-button>
+    <ion-button raised round class="activated">Round.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button raised block>Block</ion-button>
+    <ion-button raised block class="activated">Block.activated</ion-button>
+  </p>
+
+  <p>
+    <ion-button raised clear disabled>Clear Disabled</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/raised/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/round/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/round/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/round/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/round/e2e.ts

@@ -0,0 +1 @@
+

packages/ionic-angular/src/components/button/test/round/pages/page-one/page-one.html

@@ -0,0 +1,32 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Round Buttons</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <ion-button round>button</ion-button>
+  <ion-button round color="light">button light</ion-button>
+  <ion-button round color="secondary">button secondary</ion-button>
+  <ion-button round color="danger">button danger</ion-button>
+  <ion-button round color="dark">button dark</ion-button>
+
+  <ion-button round outline>button</ion-button>
+  <ion-button round color="light" outline>button light</ion-button>
+  <ion-button round color="secondary" outline>button secondary</ion-button>
+  <ion-button round color="danger" outline>button danger</ion-button>
+  <ion-button round color="dark" outline>button dark</ion-button>
+
+</ion-content>
+
+
+<style>
+  ion-button {
+    display: block !important;
+    margin: 8px auto !important;
+  }
+</style>

packages/ionic-angular/src/components/button/test/round/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/round/pages/page-one/page-one.ts

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+  dynamicColor: string = 'secondary';
+
+  toggleColor() {
+    this.dynamicColor = (this.dynamicColor === 'secondary' ? 'danger' : 'secondary');
+  }
+}

packages/ionic-angular/src/components/button/test/sizes/app/app.component.ts

@@ -0,0 +1,10 @@
+
+import { Component } from '@angular/core';
+import { PageOne } from '../pages/page-one/page-one';
+
+@Component({
+  template: '<ion-nav [root]="rootPage"></ion-nav>'
+})
+export class AppComponent {
+  rootPage = PageOne;
+}

packages/ionic-angular/src/components/button/test/sizes/app/app.module.ts

@@ -0,0 +1,19 @@
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+import { IonicApp, IonicModule } from '../../../../..';
+
+import { AppComponent } from './app.component';
+import { PageOneModule } from '../pages/page-one/page-one.module';
+
+@NgModule({
+  declarations: [
+    AppComponent
+  ],
+  imports: [
+    BrowserModule,
+    IonicModule.forRoot(AppComponent),
+    PageOneModule
+  ],
+  bootstrap: [IonicApp]
+})
+export class AppModule {}

packages/ionic-angular/src/components/button/test/sizes/app/main.ts

@@ -0,0 +1,5 @@
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+import { AppModule } from './app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);

packages/ionic-angular/src/components/button/test/sizes/e2e.ts

@@ -0,0 +1 @@
+

packages/ionic-angular/src/components/button/test/sizes/pages/page-one/page-one.html

@@ -0,0 +1,52 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Button Sizes</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content padding>
+
+  <p>
+    <ion-button href="#">a[ion-button]</ion-button>
+    <ion-button>button</ion-button>
+  </p>
+
+  <p>
+    <ion-button small href="#">a[ion-button][small]</ion-button>
+    <ion-button small>button[ion-button][small]</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline small href="#">a[ion-button][outline][small]</ion-button>
+    <ion-button outline small>button[ion-button][outline][small]</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear small href="#">a[ion-button][clear][small]</ion-button>
+    <ion-button clear small>button[ion-button][clear][small]</ion-button>
+  </p>
+
+  <p>
+    <ion-button large>[large]</ion-button>
+    <ion-button large 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</ion-button>
+  </p>
+
+  <p>
+    <ion-button outline large href="#">a[ion-button][outline][large]</ion-button>
+    <ion-button outline large>button[ion-button][outline][large]</ion-button>
+  </p>
+
+  <p>
+    <ion-button clear large href="#">a[clear][large]</ion-button>
+    <ion-button clear large>button[ion-button][clear][large]</ion-button>
+  </p>
+
+</ion-content>

packages/ionic-angular/src/components/button/test/sizes/pages/page-one/page-one.module.ts

@@ -0,0 +1,18 @@
+import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
+import { IonicPageModule } from '../../../../../..';
+
+import { PageOne } from './page-one';
+
+@NgModule({
+  declarations: [
+    PageOne,
+  ],
+  imports: [
+    IonicPageModule.forChild(PageOne),
+  ],
+  entryComponents: [
+    PageOne,
+  ],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+export class PageOneModule {}

packages/ionic-angular/src/components/button/test/sizes/pages/page-one/page-one.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  templateUrl: 'page-one.html'
+})
+export class PageOne {
+}