chore(build): rename ionic directory to src and update all references in the build process.

2026-03-13 10:22:08 +08:00 · 2016-05-19 13:20:59 -05:00
parent 8470ae04ac
commit c8f760f080
595 changed files with 73 additions and 87 deletions
--- a/src/components/button/button-fab.scss
+++ b/src/components/button/button-fab.scss
@@ -0,0 +1,56 @@
+@import "../../globals.core";
+
+// FABulous Buttons (Floating Action Button from material)
+// --------------------------------------------------
+
+$button-fab-size:           56px !default;
+
+
+.button-fab {
+  position: absolute;
+  overflow: hidden;
+
+  width: $button-fab-size;
+  min-width: 0;
+  height: $button-fab-size;
+
+  border-radius: 50%;
+  font-size: 14px;
+  line-height: $button-fab-size;
+  vertical-align: middle;
+
+  background-clip: padding-box;
+
+  ion-icon {
+    flex: 1;
+
+    font-size: 2.8rem;
+  }
+
+}
+
+[fab-center] {
+  left: 50%;
+
+  margin-left: -$button-fab-size / 2;
+}
+
+[fab-top] {
+  top: 16px;
+}
+
+[fab-right] {
+  right: 16px;
+}
+
+[fab-bottom] {
+  bottom: 16px;
+}
+
+[fab-left] {
+  left: 16px;
+}
+
+[fab-fixed] {
+  position: fixed;
+}
--- a/src/components/button/button-icon.scss
+++ b/src/components/button/button-icon.scss
@@ -0,0 +1,38 @@
+@import "../../globals.core";
+
+// Button Icons
+// --------------------------------------------------
+
+
+.button-icon-left ion-icon {
+  padding-right: .3em;
+
+  font-size: 1.4em;
+  line-height: .67;
+
+  pointer-events: none;
+}
+
+.button-icon-right ion-icon {
+  padding-left: .4em;
+
+  font-size: 1.4em;
+  line-height: .67;
+
+  pointer-events: none;
+}
+
+.button-icon-only {
+  padding: 0;
+
+  min-width: .9em;
+
+  ion-icon {
+    padding: 0 .5em;
+
+    font-size: 1.8em;
+    line-height: .67;
+
+    pointer-events: none;
+  }
+}
--- a/src/components/button/button.ios.scss
+++ b/src/components/button/button.ios.scss
@@ -0,0 +1,230 @@
+@import "../../globals.ios";
+@import "./button";
+
+// iOS Button
+// --------------------------------------------------
+
+$button-ios-margin:                   .4rem .2rem !default;
+$button-ios-padding:                  0 1em !default;
+$button-ios-font-size:                1.6rem !default;
+$button-ios-height:                   2.8em !default;
+$button-ios-color:                    color($colors-ios, primary) !default;
+$button-ios-color-activated:          color-shade($button-ios-color) !default;
+$button-ios-text-color:               color-contrast($colors-ios, $button-ios-color) !default;
+$button-ios-hover-opacity:            .8 !default;
+$button-ios-border-radius:            4px !default;
+
+$button-ios-large-font-size:          2rem !default;
+$button-ios-large-height:             2.8em !default;
+$button-ios-large-padding:            1em !default;
+$button-ios-small-font-size:          1.3rem !default;
+$button-ios-small-height:             2.1em !default;
+$button-ios-small-padding:            .9em !default;
+$button-ios-small-icon-font-size:     1.3em !default;
+
+
+// iOS Default Button
+// --------------------------------------------------
+
+.button {
+  margin: $button-ios-margin;
+  padding: $button-ios-padding;
+
+  height: $button-ios-height;
+
+  border-radius: $button-ios-border-radius;
+  font-size: $button-ios-font-size;
+
+  color: $button-ios-text-color;
+  background-color: $button-ios-color;
+
+  &:hover:not(.disable-hover) {
+    text-decoration: none;
+    opacity: $button-ios-hover-opacity;
+  }
+
+  &.activated {
+    background-color: $button-ios-color-activated;
+    opacity: 1;
+  }
+}
+
+
+// iOS Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin ios-button-default($color-name, $color-base, $color-contrast) {
+
+  .button-#{$color-name} {
+    $background-color: $color-base;
+    $background-color-activated: color-shade($background-color);
+    $fg-color: $color-contrast;
+
+    color: $fg-color;
+    background-color: $background-color;
+
+    &.activated {
+      background-color: $background-color-activated;
+    }
+  }
+
+}
+
+
+// iOS Button Sizes
+// --------------------------------------------------
+
+.button-large {
+  padding: 0 $button-ios-large-padding;
+
+  height: $button-ios-large-height;
+
+  font-size: $button-ios-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-ios-small-padding;
+
+  height: $button-ios-small-height;
+
+  font-size: $button-ios-small-font-size;
+
+  &.button-icon-only ion-icon {
+    font-size: $button-ios-small-icon-font-size;
+  }
+}
+
+// iOS Block Button
+// --------------------------------------------------
+
+.button-block {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+// iOS Full Button
+// --------------------------------------------------
+
+.button-full {
+  margin-right: 0;
+  margin-left: 0;
+
+  border-right-width: 0;
+  border-left-width: 0;
+  border-radius: 0;
+}
+
+// iOS Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border-width: 1px;
+  border-style: solid;
+  border-radius: 4px;
+  border-color: $button-ios-color;
+  color: $button-ios-color;
+  background-color: transparent;
+
+  &.activated {
+    color: color-contrast($colors-ios, $button-ios-color);
+    background-color: $button-ios-color;
+    opacity: 1;
+  }
+}
+
+&.hairlines .button-outline {
+  border-width: $hairlines-width;
+}
+
+// iOS Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin ios-button-outline($color-name, $color-base, $color-contrast) {
+
+  .button-outline-#{$color-name} {
+    border-color: $color-base;
+    color: $color-base;
+    background-color: transparent;
+
+    &.activated {
+      color: $color-contrast;
+      background-color: $color-base;
+    }
+  }
+
+}
+
+
+// iOS Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  border-color: transparent;
+  color: $button-ios-color;
+  background-color: transparent;
+
+  &.activated {
+    background-color: transparent;
+    opacity: .4;
+  }
+
+  &:hover:not(.disable-hover) {
+    color: $button-ios-color;
+    opacity: .6;
+  }
+}
+
+
+// iOS Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin ios-button-clear($color-name, $color-base, $color-contrast) {
+
+  .button-clear-#{$color-name} {
+    $fg-color: $color-base;
+    border-color: transparent;
+    color: $fg-color;
+    background-color: transparent;
+
+    &.activated {
+      opacity: .4;
+    }
+
+    &:hover:not(.disable-hover) {
+      color: $fg-color;
+    }
+  }
+
+}
+
+// iOS Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+
+  border-radius: $button-round-border-radius;
+}
+
+
+ion-button-effect {
+  // iOS does not use the button effect
+  display: none;
+}
+
+
+// Generate iOS Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-ios) {
+  @include ios-button-default($color-name, $color-base, $color-contrast);
+  @include ios-button-outline($color-name, $color-base, $color-contrast);
+  @include ios-button-clear($color-name, $color-base, $color-contrast);
+}
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "./button-fab";
+@import "./button-icon";
--- a/src/components/button/button.md.scss
+++ b/src/components/button/button.md.scss
@@ -0,0 +1,318 @@
+@import "../../globals.md";
+@import "./button";
+
+// Material Design Button
+// --------------------------------------------------
+
+$button-md-margin:                         .4rem .2rem !default;
+$button-md-padding:                        0 1.1em !default;
+$button-md-font-size:                      1.4rem !default;
+$button-md-height:                         3.6rem !default;
+$button-md-box-shadow:                     0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12) !default;
+$button-md-box-shadow-active:              0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default;
+
+$button-md-border-radius:                  2px !default;
+$button-md-animation-curve:                cubic-bezier(.4, 0, .2, 1) !default;
+$button-md-transition-duration:            300ms !default;
+
+$button-md-clear-hover-background-color:   rgba(158, 158, 158, .1) !default;
+$button-md-clear-active-background-color:  rgba(158, 158, 158, .2) !default;
+$button-md-clear-ripple-background-color:  #999 !default;
+
+$button-md-fab-box-shadow:                 0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
+$button-md-fab-box-shadow-active:          0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
+
+$button-md-color:                          color($colors-md, primary) !default;
+$button-md-color-activated:                color-shade($button-md-color) !default;
+$button-md-text-color:                     color-contrast($colors-md, $button-md-color) !default;
+$button-md-hover-opacity:                  .8 !default;
+
+$button-md-large-font-size:                2rem !default;
+$button-md-large-height:                   2.8em !default;
+$button-md-large-padding:                  1em !default;
+$button-md-small-font-size:                1.3rem !default;
+$button-md-small-height:                   2.1em !default;
+$button-md-small-padding:                  .9em !default;
+$button-md-small-icon-font-size:           1.4em !default;
+
+
+// Material Design Default Button
+// --------------------------------------------------
+
+.button {
+  margin: $button-md-margin;
+  padding: $button-md-padding;
+
+  height: $button-md-height;
+
+  border-radius: $button-md-border-radius;
+
+  font-size: $button-md-font-size;
+  font-weight: 500;
+
+  text-transform: uppercase;
+  color: $button-md-text-color;
+  background-color: $button-md-color;
+  box-shadow: $button-md-box-shadow;
+
+  transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
+              background-color $button-md-transition-duration $button-md-animation-curve,
+              color $button-md-transition-duration $button-md-animation-curve;
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-md-color;
+  }
+
+  &.activated {
+    background-color: $button-md-color-activated;
+    box-shadow: $button-md-box-shadow-active;
+  }
+
+  ion-button-effect {
+    background-color: $button-md-text-color;
+  }
+}
+
+
+// Material Design Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-default($color-name, $color-base, $color-contrast) {
+
+  .button-#{$color-name} {
+    $background-color: $color-base;
+    $background-color-activated: color-shade($background-color);
+    $fg-color: $color-contrast;
+
+    color: $fg-color;
+    background-color: $background-color;
+
+    &:hover:not(.disable-hover) {
+      background-color: $background-color;
+    }
+
+    &.activated {
+      background-color: $background-color-activated;
+      opacity: 1;
+    }
+
+    ion-button-effect {
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Material Design Button Sizes
+// --------------------------------------------------
+
+.button-large {
+  padding: 0 $button-md-large-padding;
+
+  height: $button-md-large-height;
+
+  font-size: $button-md-large-font-size;
+}
+
+.button-small {
+  padding: 0 $button-md-small-padding;
+
+  height: $button-md-small-height;
+
+  font-size: $button-md-small-font-size;
+
+  &.button-icon-only ion-icon {
+    font-size: $button-md-small-icon-font-size;
+  }
+}
+
+// Material Design Block Button
+// --------------------------------------------------
+
+.button-block {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+// Material Design Full Button
+// --------------------------------------------------
+
+.button-full {
+  margin-right: 0;
+  margin-left: 0;
+
+  border-right-width: 0;
+  border-left-width: 0;
+  border-radius: 0;
+}
+
+// Material Design Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border-width: 1px;
+  border-style: solid;
+  border-color: $button-md-color;
+  color: $button-md-color;
+  background-color: transparent;
+  box-shadow: none;
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-md-clear-hover-background-color;
+  }
+
+  &.activated {
+    background-color: transparent;
+    box-shadow: none;
+    opacity: 1;
+  }
+
+  ion-button-effect {
+    background-color: $button-md-color;
+  }
+}
+
+
+// Material Design Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-outline($color-name, $color-base, $color-contrast) {
+
+  .button-outline-#{$color-name} {
+    $fg-color: color-shade($color-base, 5%);
+    border-color: $fg-color;
+    color: $fg-color;
+    background-color: transparent;
+
+    &:hover:not(.disable-hover) {
+      background-color: $button-md-clear-hover-background-color;
+    }
+
+    &.activated {
+      background-color: transparent;
+    }
+
+    ion-button-effect {
+      background-color: $fg-color;
+    }
+  }
+
+}
+
+
+// Material Design Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  border-color: transparent;
+  color: $button-md-color;
+  background-color: transparent;
+  box-shadow: none;
+  opacity: 1;
+
+  &.activated {
+    background-color: $button-md-clear-active-background-color;
+    box-shadow: none;
+  }
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-md-clear-hover-background-color;
+  }
+
+  ion-button-effect {
+    background-color: $button-md-clear-ripple-background-color;
+  }
+}
+
+
+// Material Design Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin md-button-clear($color-name, $color-base, $color-contrast) {
+
+  .button-clear-#{$color-name} {
+    $fg-color: $color-base;
+    border-color: transparent;
+    color: $fg-color;
+    background-color: transparent;
+
+    &.activated {
+      background-color: $button-md-clear-active-background-color;
+      box-shadow: none;
+    }
+
+    &:hover:not(.disable-hover) {
+      color: $fg-color;
+    }
+  }
+}
+
+
+// Material Design Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+
+  border-radius: $button-round-border-radius;
+}
+
+
+// Material Design FAB Button
+// --------------------------------------------------
+
+.button-fab {
+  border-radius: 50%;
+  box-shadow: $button-md-fab-box-shadow;
+
+  transition: box-shadow $button-md-transition-duration $button-md-animation-curve,
+              background-color $button-md-transition-duration $button-md-animation-curve,
+              color $button-md-transition-duration $button-md-animation-curve;
+
+  &.activated {
+    box-shadow: $button-md-fab-box-shadow-active;
+  }
+}
+
+.button-icon-only {
+  padding: 0;
+}
+
+
+// Material Design Ripple Effect
+// --------------------------------------------------
+
+$ripple-background-color:       #555 !default;
+
+ion-button-effect {
+  position: absolute;
+  z-index: 0;
+  display: block;
+
+  border-radius: 50%;
+
+  background-color: $ripple-background-color;
+  opacity: .2;
+
+  transition-timing-function: ease-in-out;
+
+  pointer-events: none;
+}
+
+
+// Generate Material Design Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-md) {
+  @include md-button-default($color-name, $color-base, $color-contrast);
+  @include md-button-outline($color-name, $color-base, $color-contrast);
+  @include md-button-clear($color-name, $color-base, $color-contrast);
+}
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "./button-fab";
+@import "./button-icon";
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -0,0 +1,98 @@
+@import "../../globals.core";
+
+// Buttons
+// --------------------------------------------------
+
+$button-round-padding:            0 2.6rem !default;
+$button-round-border-radius:      64px !default;
+
+
+.button {
+  @include user-select-none();
+  @include appearance(none);
+
+  position: relative;
+  z-index: 0;
+  display: inline-block;
+  overflow: hidden;
+
+  text-align: center;
+  text-overflow: ellipsis;
+  text-transform: none;
+
+  white-space: nowrap;
+  cursor: pointer;
+  vertical-align: top; // the better option for most scenarios
+  vertical-align: -webkit-baseline-middle; // the best for those that support it
+
+  transition: background-color, opacity 100ms linear;
+
+  font-kerning: none;
+}
+
+.button-inner {
+  display: flex;
+
+  flex-flow: row nowrap;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+}
+
+a.button,
+a[button] {
+  text-decoration: none;
+}
+
+.button[disabled] {
+  cursor: default;
+  opacity: .4;
+
+  pointer-events: none;
+}
+
+
+// Block Button
+// --------------------------------------------------
+
+.button-block {
+  display: block;
+  clear: both;
+
+  width: 100%;
+
+  &::after {
+    clear: both;
+  }
+}
+
+
+// Full Button
+// --------------------------------------------------
+
+.button-full {
+  display: block;
+
+  width: 100%;
+
+  // Full Outline Button
+  // --------------------------------------------------
+  &.button-outline {
+    border-right-width: 0;
+    border-left-width: 0;
+    border-radius: 0;
+  }
+}
+
+
+// Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+
+  border-radius: $button-round-border-radius;
+}
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -0,0 +1,363 @@
+import {Component, ElementRef, Renderer, Attribute, Optional, Input, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+
+import {Config} from '../../config/config';
+import {Toolbar} from '../toolbar/toolbar';
+import {isTrueProperty} from '../../util/util';
+
+
+/**
+  * @name Button
+  * @module ionic
+  *
+  * @description
+  * Buttons are simple components in Ionic. They can consist of text and icons
+  * and be enhanced by a wide range of attributes.
+  *
+  * @property [outline] - A transparent button with a border.
+  * @property [clear] - A transparent button without a border.
+  * @property [round] - A button with rounded corners.
+  * @property [block] - A button that fills its parent container with a border-radius.
+  * @property [full] - A button that fills its parent container without a border-radius or borders on the left/right.
+  * @property [small] - A button with size small.
+  * @property [large] - A button with size large.
+  * @property [disabled] - A disabled button.
+  * @property [fab] - A floating action button.
+  * @property [fab-left] - Position a fab button to the left.
+  * @property [fab-right] - Position a fab button to the right.
+  * @property [fab-center] - Position a fab button towards the center.
+  * @property [fab-top] - Position a fab button towards the top.
+  * @property [fab-bottom] - Position a fab button towards the bottom.
+  * @property [color] - Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
+  *
+  * @demo /docs/v2/demos/button/
+  * @see {@link /docs/v2/components#buttons Button Component Docs}
+ */
+@Component({
+  selector: 'button:not([ion-item]),[button]',
+  template:
+    '<span class="button-inner">' +
+      '<ng-content></ng-content>' +
+    '</span>' +
+    '<ion-button-effect></ion-button-effect>',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  encapsulation: ViewEncapsulation.None,
+})
+export class Button {
+  private _role: string = 'button'; // bar-button/item-button
+  private _size: string = null; // large/small/default
+  private _style: string = 'default'; // outline/clear/solid
+  private _shape: string = null; // round/fab
+  private _display: string = null; // block/full
+  private _colors: Array<string> = []; // primary/secondary
+  private _icon: string = null; // left/right/only
+  private _disabled: boolean = false; // disabled
+  private _init: boolean;
+
+  /**
+   * @private
+   */
+  isItem: boolean;
+
+  /**
+   * @input {string} The category of the button.
+   */
+  @Input() category: string;
+
+  /**
+   * @input {string} Large button.
+   */
+  @Input()
+  set large(val: boolean) {
+    this._attr('_size', 'large', val);
+  }
+
+  /**
+   * @input {string} Small button.
+   */
+  @Input()
+  set small(val: boolean) {
+    this._attr('_size', 'small', val);
+  }
+
+  /**
+   * @input {string} Default button.
+   */
+  @Input()
+  set default(val: boolean) {
+    this._attr('_size', 'default', val);
+  }
+
+  /**
+   * @input {string} A transparent button with a border.
+   */
+  @Input()
+  set outline(val: boolean) {
+    this._attr('_style', 'outline', val);
+  }
+
+  /**
+   * @input {string} A transparent button without a border.
+   */
+  @Input()
+  set clear(val: boolean) {
+    this._attr('_style', 'clear', val);
+  }
+
+  /**
+   * @input {string} Force a solid button. Useful for buttons within an item.
+   */
+  @Input()
+  set solid(val: boolean) {
+    this._attr('_style', 'solid', val);
+  }
+
+  /**
+   * @input {string} A button with rounded corners.
+   */
+  @Input()
+  set round(val: boolean) {
+    this._attr('_shape', 'round', val);
+  }
+
+  /**
+   * @input {string} A button that fills its parent container with a border-radius.
+   */
+  @Input()
+  set block(val: boolean) {
+    this._attr('_display', 'block', val);
+  }
+
+  /**
+   * @input {string} A button that fills its parent container without a border-radius or borders on the left/right.
+   */
+  @Input()
+  set full(val: boolean) {
+    this._attr('_display', 'full', val);
+  }
+
+  _attr(type: string, attrName: string, attrValue: boolean) {
+    this._setClass(this[type], false);
+    if (isTrueProperty(attrValue)) {
+      this[type] = attrName;
+      this._setClass(attrName, true);
+    } else {
+      // Special handling for '_style' which defaults to 'default'.
+      this[type] = (type === '_style' ? 'default' : null);
+    }
+    if (type === '_style') {
+      this._setColor(attrName, isTrueProperty(attrValue));
+    }
+  }
+
+  /**
+   * @input {string} Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
+   */
+  @Input()
+  set color(val: string|string[]) {
+    // Clear the colors for all styles including the default one.
+    this._setColor(BUTTON_STYLE_ATTRS.concat(['default']), false);
+    // Support array input which is also supported via multiple attributes (e.g. primary, secondary, etc).
+    this._colors = (val instanceof Array ? val : [val]);
+    // Set the colors for the currently effective style.
+    this._setColor(this._style, true);
+  }
+
+  constructor(
+    config: Config,
+    private _elementRef: ElementRef,
+    private _renderer: Renderer,
+    @Attribute('ion-item') ionItem: string
+  ) {
+
+    this.isItem = (ionItem === '');
+
+    let element = _elementRef.nativeElement;
+
+    if (config.get('hoverCSS') === false) {
+      _renderer.setElementClass(_elementRef.nativeElement, 'disable-hover', true);
+    }
+
+    if (element.hasAttribute('ion-item')) {
+      // no need to put on these classes for an ion-item
+      this._role = null;
+      return;
+    }
+
+    if (element.hasAttribute('disabled')) {
+      this._disabled = true;
+    }
+
+    this._readAttrs(element);
+  }
+
+  /**
+   * @private
+   */
+  ngOnInit() {
+    // If the button has a role applied to it
+    if (this.category) {
+      this.setRole(this.category);
+    }
+  }
+
+  /**
+   * @private
+   */
+  ngAfterContentInit() {
+    this._init = true;
+    this._readIcon(this._elementRef.nativeElement);
+    this._assignCss(true);
+  }
+
+  /**
+   * @private
+   */
+  addClass(className: string) {
+    this._renderer.setElementClass(this._elementRef.nativeElement, className, true);
+  }
+
+  /**
+   * @private
+   */
+  setRole(val: string) {
+    this._role = val;
+  }
+
+  /**
+   * @private
+   */
+  private _readIcon(element: HTMLElement) {
+    // figure out if and where the icon lives in the button
+    let childNodes = element.childNodes;
+    if (childNodes.length > 0) {
+      childNodes = childNodes[0].childNodes;
+    }
+    let childNode;
+    let nodes = [];
+    for (let i = 0, l = childNodes.length; i < l; i++) {
+      childNode = childNodes[i];
+
+      if (childNode.nodeType === 3) {
+        // text node
+        if (childNode.textContent.trim() !== '') {
+          nodes.push(TEXT);
+        }
+
+      } else if (childNode.nodeType === 1) {
+        if (childNode.nodeName === 'ION-ICON') {
+          // icon element node
+          nodes.push(ICON);
+
+        } else {
+          // element other than an <ion-icon>
+          nodes.push(TEXT);
+        }
+      }
+    }
+
+    if (nodes.length > 1) {
+      if (nodes[0] === ICON && nodes[1] === TEXT) {
+        this._icon = 'icon-left';
+
+      } else if (nodes[0] === TEXT && nodes[1] === ICON) {
+        this._icon = 'icon-right';
+      }
+
+    } else if (nodes.length === 1 && nodes[0] === ICON) {
+      this._icon = 'icon-only';
+    }
+  }
+
+  /**
+   * @private
+   */
+  private _readAttrs(element: HTMLElement) {
+    let elementAttrs = element.attributes;
+    let attrName;
+    for (let i = 0, l = elementAttrs.length; i < l; i++) {
+      if (elementAttrs[i].value !== '') continue;
+
+      attrName = elementAttrs[i].name;
+
+      if (BUTTON_STYLE_ATTRS.indexOf(attrName) > -1) {
+        this._style = attrName;
+
+      } else if (BUTTON_DISPLAY_ATTRS.indexOf(attrName) > -1) {
+        this._display = attrName;
+
+      } else if (BUTTON_SHAPE_ATTRS.indexOf(attrName) > -1) {
+        this._shape = attrName;
+
+      } else if (BUTTON_SIZE_ATTRS.indexOf(attrName) > -1) {
+        this._size = attrName;
+
+      } else if (!(IGNORE_ATTRS.test(attrName))) {
+        this._colors.push(attrName);
+      }
+    }
+  }
+
+  /**
+   * @private
+   */
+  private _assignCss(assignCssClass: boolean) {
+    let role = this._role;
+    if (role) {
+      this._renderer.setElementClass(this._elementRef.nativeElement, role, assignCssClass); // button
+
+      this._setClass(this._style, assignCssClass); // button-clear
+      this._setClass(this._shape, assignCssClass); // button-round
+      this._setClass(this._display, assignCssClass); // button-full
+      this._setClass(this._size, assignCssClass); // button-small
+      this._setClass(this._icon, assignCssClass); // button-icon-left
+      this._setColor(this._style, assignCssClass); // button-secondary, button-clear-secondary
+    }
+  }
+
+  /**
+   * @private
+   */
+  private _setClass(type: string, assignCssClass: boolean) {
+    if (type && this._init) {
+      this._renderer.setElementClass(this._elementRef.nativeElement, this._role + '-' + type.toLowerCase(), assignCssClass);
+    }
+  }
+
+  /**
+   * @private
+   */
+  private _setColor(type: string|string[], assignCssClass: boolean) {
+    if (type && this._init) {
+      // Support array to allow removal of many styles at once.
+      let styles = (type instanceof Array ? type : [type]);
+      styles.forEach(styleName => {
+        // If the role is not a bar-button, don't apply the solid style
+        styleName = (this._role !== 'bar-button' && styleName === 'solid' ? 'default' : styleName);
+        let colorStyle = (styleName !== null && styleName !== 'default' ? styleName.toLowerCase() + '-' : '');
+        this._colors.forEach(colorName => {
+          this._setClass(colorStyle + colorName, assignCssClass); // button-secondary, button-clear-secondary
+        });
+      });
+    }
+  }
+
+  /**
+   * @private
+   */
+  static setRoles(contentButtonChildren, role: string) {
+    let buttons = contentButtonChildren.toArray();
+    buttons.forEach(button => {
+      button.setRole(role);
+    });
+  }
+
+}
+
+const BUTTON_SIZE_ATTRS = ['large', 'small', 'default'];
+const BUTTON_STYLE_ATTRS = ['clear', 'outline', 'solid'];
+const BUTTON_SHAPE_ATTRS = ['round', 'fab'];
+const BUTTON_DISPLAY_ATTRS = ['block', 'full'];
+const IGNORE_ATTRS = /_ng|button|left|right/;
+
+const TEXT = 1;
+const ICON = 2;
--- a/src/components/button/button.wp.scss
+++ b/src/components/button/button.wp.scss
@@ -0,0 +1,267 @@
+@import "../../globals.wp";
+@import "./button";
+
+// Windows Button
+// --------------------------------------------------
+
+$button-wp-margin:                                    .4rem .2rem !default;
+$button-wp-padding:                                   0 1.1em !default;
+$button-wp-font-size:                                 1.4rem !default;
+$button-wp-height:                                    3.6rem !default;
+$button-wp-border-color:                              transparent !default;
+$button-wp-border-width:                              3px !default;
+$button-wp-border-radius:                             0 !default;
+
+// Regular button
+$button-wp-background-color:                          color($colors-wp, primary) !default;
+$button-wp-background-color-activated:                color-shade($button-wp-background-color) !default;
+$button-wp-text-color:                                color-contrast($colors-wp, $button-wp-background-color) !default;
+
+// Clear button
+$button-wp-clear-background-color-hover:              rgba(158, 158, 158, .1) !default;
+$button-wp-clear-background-color-activated:          rgba(158, 158, 158, .2) !default;
+$button-wp-clear-background-color:                    transparent !default;
+$button-wp-clear-text-color:                          $button-wp-background-color !default;
+
+// Outline button
+$button-wp-outline-background-color:                  transparent !default;
+$button-wp-outline-background-color-activated:        $button-wp-background-color !default;
+$button-wp-outline-background-color-opacity:          .16 !default;
+$button-wp-outline-border-width:                      1px !default;
+$button-wp-outline-border-color:                      $button-wp-background-color !default;
+$button-wp-outline-text-color:                        $button-wp-background-color !default;
+
+// Large button
+$button-wp-large-font-size:                           2rem !default;
+$button-wp-large-height:                              2.8em !default;
+$button-wp-large-padding:                             0 1em !default;
+
+// Small button
+$button-wp-small-font-size:                           1.3rem !default;
+$button-wp-small-height:                              2.1em !default;
+$button-wp-small-padding:                             0 .9em !default;
+$button-wp-small-icon-font-size:                      1.4em !default;
+
+// FAB button
+$button-wp-fab-border-radius:                         50% !default;
+
+// Windows Default Button
+// --------------------------------------------------
+
+.button {
+  margin: $button-wp-margin;
+  padding: $button-wp-padding;
+
+  height: $button-wp-height;
+
+  border: $button-wp-border-width solid $button-wp-border-color;
+  border-radius: $button-wp-border-radius;
+
+  font-size: $button-wp-font-size;
+
+  color: $button-wp-text-color;
+  background-color: $button-wp-background-color;
+
+  &:hover:not(.disable-hover) {
+    border-color: $button-wp-background-color-activated;
+    background-color: $button-wp-background-color;
+  }
+
+  &.activated {
+    background-color: $button-wp-background-color-activated;
+  }
+}
+
+
+// Windows Default Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-default($color-name, $color-base, $color-contrast) {
+
+  .button-#{$color-name} {
+    $bg-color: $color-base;
+    $bg-color-activated: color-shade($bg-color);
+    $fg-color: $color-contrast;
+
+    color: $fg-color;
+    background-color: $bg-color;
+
+    &:hover:not(.disable-hover) {
+      border-color: $bg-color-activated;
+      background-color: $bg-color;
+    }
+
+    &.activated {
+      background-color: $bg-color-activated;
+    }
+  }
+
+}
+
+
+// Windows Button Sizes
+// --------------------------------------------------
+
+.button-large {
+  padding: $button-wp-large-padding;
+
+  height: $button-wp-large-height;
+
+  font-size: $button-wp-large-font-size;
+}
+
+.button-small {
+  padding: $button-wp-small-padding;
+
+  height: $button-wp-small-height;
+
+  font-size: $button-wp-small-font-size;
+
+  &.button-icon-only ion-icon {
+    font-size: $button-wp-small-icon-font-size;
+  }
+}
+
+// Windows Block Button
+// --------------------------------------------------
+
+.button-block {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+// Windows Full Button
+// --------------------------------------------------
+
+.button-full {
+  margin-right: 0;
+  margin-left: 0;
+
+  border-right-width: 0;
+  border-left-width: 0;
+  border-radius: 0;
+}
+
+// Windows Outline Button
+// --------------------------------------------------
+
+.button-outline {
+  border-width: $button-wp-outline-border-width;
+  border-style: solid;
+  border-color: $button-wp-outline-border-color;
+  color: $button-wp-outline-text-color;
+  background-color: $button-wp-outline-background-color;
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-wp-clear-background-color-hover;
+  }
+
+  &.activated {
+    background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity);
+  }
+}
+
+
+// Windows Outline Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-outline($color-name, $color-base, $color-contrast) {
+
+  .button-outline-#{$color-name} {
+    $fg-color: color-shade($color-base, 5%);
+    border-color: $fg-color;
+    color: $fg-color;
+    background-color: transparent;
+
+    &:hover:not(.disable-hover) {
+      border-color: $fg-color;
+      background-color: $button-wp-clear-background-color-hover;
+    }
+
+    &.activated {
+      background-color: rgba($fg-color, $button-wp-outline-background-color-opacity);
+    }
+  }
+
+}
+
+
+// Windows Clear Button
+// --------------------------------------------------
+
+.button-clear {
+  color: $button-wp-clear-text-color;
+  background-color: $button-wp-clear-background-color;
+
+  &.activated {
+    background-color: $button-wp-clear-background-color-activated;
+  }
+
+  &:hover:not(.disable-hover) {
+    background-color: $button-wp-clear-background-color-hover;
+  }
+}
+
+
+// Windows Clear Button Color Mixin
+// --------------------------------------------------
+
+@mixin wp-button-clear($color-name, $color-base, $color-contrast) {
+
+  .button-clear-#{$color-name} {
+    $fg-color: $color-base;
+    color: $fg-color;
+    background-color: transparent;
+
+    &.activated {
+      background-color: $button-wp-clear-background-color-activated;
+    }
+
+    &:hover:not(.disable-hover) {
+      color: $fg-color;
+    }
+  }
+}
+
+
+// Windows Round Button
+// --------------------------------------------------
+
+.button-round {
+  padding: $button-round-padding;
+
+  border-radius: $button-round-border-radius;
+}
+
+
+// Windows FAB Button
+// --------------------------------------------------
+
+.button-fab {
+  border-radius: $button-wp-fab-border-radius;
+}
+
+.button-icon-only {
+  padding: 0;
+}
+
+ion-button-effect {
+  // wp does not use the button effect
+  display: none;
+}
+
+// Generate Windows Button Colors
+// --------------------------------------------------
+
+@each $color-name, $color-base, $color-contrast in get-colors($colors-wp) {
+  @include wp-button-default($color-name, $color-base, $color-contrast);
+  @include wp-button-outline($color-name, $color-base, $color-contrast);
+  @include wp-button-clear($color-name, $color-base, $color-contrast);
+}
+
+
+// Core Button Overrides
+// --------------------------------------------------
+
+@import "./button-fab";
+@import "./button-icon";
--- a/src/components/button/test/basic/e2e.ts
+++ b/src/components/button/test/basic/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/basic/index.ts
+++ b/src/components/button/test/basic/index.ts
@@ -0,0 +1,21 @@
+import {App, IonicApp} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+    app.setTitle('Basic Buttons');
+
+    this.testingColors = ['primary', 'secondary', 'danger', 'dark'];
+    this.testingColorIndex = 0;
+    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);
+  }
+}
--- a/src/components/button/test/basic/main.html
+++ b/src/components/button/test/basic/main.html
@@ -0,0 +1,47 @@
+
+<ion-toolbar>
+  <ion-title>Default Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <button><span>Default</span></button>
+    <button class="activated">Default.activated</button>
+  </p>
+
+  <p>
+    <button primary>Primary</button>
+    <button primary class="activated">Primary.activated</button>
+  </p>
+
+  <p>
+    <button secondary>Secondary</button>
+    <button secondary class="activated">Secondary.activated</button>
+  </p>
+
+  <p>
+    <button danger>Danger</button>
+    <button danger class="activated">Danger.activated</button>
+  </p>
+
+  <p>
+    <button light>Light</button>
+    <button light class="activated">Light.activated</button>
+  </p>
+
+  <p>
+    <button dark>Dark</button>
+    <button dark class="activated">Dark.activated</button>
+  </p>
+
+  <p>
+    <button disabled>Disabled</button>
+  </p>
+
+  <p>
+    <button [color]="btnColor" (click)="chgColor()">Change Color</button>
+    <button outline [color]="btnColor" (click)="chgColor()">Change Color</button>
+  </p>
+
+</ion-content>
--- a/src/components/button/test/block/e2e.ts
+++ b/src/components/button/test/block/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/block/index.ts
+++ b/src/components/button/test/block/index.ts
@@ -0,0 +1,13 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  blockButton = true;
+
+  toggleBlock() {
+    this.blockButton = !this.blockButton;
+  }
+}
--- a/src/components/button/test/block/main.html
+++ b/src/components/button/test/block/main.html
@@ -0,0 +1,42 @@
+
+<ion-toolbar>
+  <ion-title>Block Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <a button block href="#">a[button][block]</a>
+    <button block>button[block]</button>
+  </p>
+
+  <p>
+    <a button block href="#"><ion-icon name="help-circle"></ion-icon> a[button][block] icon</a>
+    <button block><ion-icon name="help-circle"></ion-icon> button[block] icon</button>
+  </p>
+
+  <p>
+    <a button block outline secondary href="#">a[button][block][outline][secondary]</a>
+    <button block outline secondary>button[block][outline][secondary]</button>
+  </p>
+
+  <p>
+    <a button block clear dark href="#">a[button][block][clear][dark]</a>
+    <button block clear dark>button[clear][block][dark]</button>
+  </p>
+
+  <p>
+    <a button block round href="#">a[button][block][round]</a>
+    <button block round>button[block][round]</button>
+  </p>
+
+  <p>
+    <a button block round outline href="#">a[button][block][round][outline]</a>
+    <button block round outline>button[block][round][outline]</button>
+  </p>
+
+  <p>
+    <button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
+  </p>
+
+</ion-content>
--- a/src/components/button/test/button.spec.ts
+++ b/src/components/button/test/button.spec.ts
@@ -0,0 +1,222 @@
+import {Button, Config} from '../../../../ionic';
+
+export function run() {
+
+  describe('button', () => {
+
+    it('should ignore certain attributes', () => {
+      let b = mockButton(['_ngcontent', 'button']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-_ngcontent')).toEqual(false);
+      expect(hasClass(b, 'button-button')).toEqual(false);
+    });
+
+    it('should set a different button role', () => {
+      let b = mockButton(['outline', 'small', 'full', '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-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(['outline', 'small', 'full', '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-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-primary')).toEqual(false);
+    });
+
+    it('should read button color attributes with styles', () => {
+      let b = mockButton(['outline', 'small', 'full', '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-primary')).toEqual(true);
+
+      b = mockButton(['clear', 'primary', 'secondary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-clear')).toEqual(true);
+      expect(hasClass(b, 'button-clear-primary')).toEqual(true);
+      expect(hasClass(b, 'button-clear-secondary')).toEqual(true);
+
+      b = mockButton(['solid', 'primary', 'secondary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(true);
+      expect(hasClass(b, 'button-solid')).toEqual(true);
+      expect(hasClass(b, 'button-primary')).toEqual(true);
+      expect(hasClass(b, 'button-secondary')).toEqual(true);
+
+      b = mockButton(['solid', 'primary', 'secondary']);
+      b.setRole('bar-button');
+      b._assignCss(true);
+      expect(hasClass(b, 'bar-button-solid')).toEqual(true);
+      expect(hasClass(b, 'bar-button-solid-primary')).toEqual(true);
+      expect(hasClass(b, 'bar-button-solid-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(['clear']);
+      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(['primary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-primary')).toEqual(true);
+
+      b = mockButton(['primary', 'secondary']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-primary')).toEqual(true);
+      expect(hasClass(b, 'button-secondary')).toEqual(true);
+    });
+
+    it('should read button style attributes', () => {
+      let b = mockButton(['clear']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-clear')).toEqual(true);
+
+      b = mockButton(['outline']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-outline')).toEqual(true);
+
+      b = mockButton(['solid']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-solid')).toEqual(true);      
+
+      b = mockButton(['clear', 'outline', 'small', 'full']);
+      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(['outline']);
+      b.setRole('bar-button');
+      b._assignCss(true);
+      expect(hasClass(b, 'bar-button-outline')).toEqual(true);
+    });
+
+    it('should read button shape attributes', () => {
+      let b = mockButton(['round']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-round')).toEqual(true);
+
+      b = mockButton(['fab']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-fab')).toEqual(true);
+    });
+
+    it('should read button display attributes', () => {
+      let b = mockButton(['block']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-block')).toEqual(true);
+
+      b = mockButton(['full']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-full')).toEqual(true);
+
+      b = mockButton(['block', 'full']);
+      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(['small']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-small')).toEqual(true);
+
+      b = mockButton(['large']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-large')).toEqual(true);
+
+      b = mockButton(['large', 'small']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button-large')).toEqual(false);
+      expect(hasClass(b, 'button-small')).toEqual(true);
+    });
+
+    it('should not add button css class for ion-item attribute', () => {
+      let b = mockButton(['ion-item']);
+      b._assignCss(true);
+      expect(hasClass(b, 'button')).toEqual(false);
+    });
+
+    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 = new Config({
+        hoverCSS: false
+      });
+      let b = mockButton(null, config);
+
+      expect(hasClass(b, 'disable-hover')).toEqual(true);
+    });
+
+    it('should set defaults', () => {
+      let b = mockButton();
+      expect(b._role).toEqual('button');
+      expect(b._size).toEqual(null);
+      expect(b._colors.length).toEqual(0);
+      expect(b._style).toEqual('default');
+      expect(b._display).toEqual(null);
+    });
+
+  });
+
+  function mockButton(attrs?, config?) {
+    config = config || new Config();
+    let elementRef = {
+      nativeElement: document.createElement('button')
+    };
+    if (attrs) {
+      for (let i = 0; i < attrs.length; i++) {
+        elementRef.nativeElement.setAttribute(attrs[i], '');
+      }
+    }
+    let renderer: any = {
+      setElementClass: function(nativeElement, className, shouldAdd) {
+        nativeElement.classList[shouldAdd ? 'add' : 'remove'](className);
+      }
+    };
+    let b = new Button(config, elementRef, renderer, null);
+    b._init = true;
+    return b;
+  }
+
+  function hasClass(button, className) {
+    return button._elementRef.nativeElement.classList.contains(className);
+  }
+
+}
--- a/src/components/button/test/clear/e2e.ts
+++ b/src/components/button/test/clear/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/clear/index.ts
+++ b/src/components/button/test/clear/index.ts
@@ -0,0 +1,13 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  clearButton = true;
+
+  toggleClear() {
+    this.clearButton = !this.clearButton;
+  }
+}
--- a/src/components/button/test/clear/main.html
+++ b/src/components/button/test/clear/main.html
@@ -0,0 +1,42 @@
+
+<ion-toolbar>
+  <ion-title>Clear Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <button clear>Default</button>
+    <button clear class="activated">Default.activated</button>
+  </p>
+
+  <p>
+    <button clear primary>Primary</button>
+    <button clear primary class="activated">Primary.activated</button>
+  </p>
+
+  <p>
+    <button clear secondary>Secondary</button>
+    <button clear secondary class="activated">Secondary.activated</button>
+  </p>
+
+  <p>
+    <button clear danger>Danger</button>
+    <button clear danger class="activated">Danger.activated</button>
+  </p>
+
+  <p>
+    <button clear light>Light</button>
+    <button clear light class="activated">Light.activated</button>
+  </p>
+
+  <p>
+    <button clear dark>Dark</button>
+    <button clear dark class="activated">Dark.activated</button>
+  </p>
+
+  <p>
+    <button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
+  </p>
+
+</ion-content>
--- a/src/components/button/test/dynamic/e2e.ts
+++ b/src/components/button/test/dynamic/e2e.ts
@@ -0,0 +1,4 @@
+
+it('should unify buttons', function() {
+  element(by.css('.e2eButtonDynamicUnify')).click();
+});
--- a/src/components/button/test/dynamic/index.ts
+++ b/src/components/button/test/dynamic/index.ts
@@ -0,0 +1,52 @@
+import {App, IonicApp} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  isDestructive: boolean;
+  isSecondary: boolean;
+  isCustom: boolean;
+  isSolid: boolean;
+  isOutline: boolean;
+  isClear: boolean;
+  isClicked: boolean;
+  myColor1: string;
+  myColor2: string;
+  multiColor: Array<string>;
+
+  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';
+	  this.multiColor = ['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';
+	  this.multiColor = ['primary','secondary'];
+	}
+
+	toggle() {
+	  this.isClicked = !this.isClicked;
+	}
+}
--- a/src/components/button/test/dynamic/main.html
+++ b/src/components/button/test/dynamic/main.html
@@ -0,0 +1,25 @@
+
+<ion-toolbar>
+  <ion-buttons start>
+    <button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
+  </ion-buttons>
+  <ion-title>Default Buttons</ion-title>
+  <ion-buttons end>
+    <button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
+  </ion-buttons>
+</ion-toolbar>
+
+<ion-content padding>
+  <button block [solid]="isSolid">Solid</button>
+  <button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
+  <button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</button>
+  <button block [color]="myColor1" [round]="isCustom">Custom #1</button>
+  <button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
+  <button block primary light [clear]="isClear" [round]="isCustom">Multicolor (Clear)</button>
+  <button block danger dark [outline]="isOutline" [round]="isCustom">Multicolor (Outline)</button>
+  <button block [color]="multiColor" [outline]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Outline (Toggle)</button>
+  <button block [color]="multiColor" [clear]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Clear (Toggle)</button>
+  <hr/>
+  <button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
+  <button block clear danger (click)="reset()">Reset all buttons</button>
+</ion-content>
--- a/src/components/button/test/fab/e2e.ts
+++ b/src/components/button/test/fab/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/fab/index.ts
+++ b/src/components/button/test/fab/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/button/test/fab/main.html
+++ b/src/components/button/test/fab/main.html
@@ -0,0 +1,24 @@
+
+<button fab fab-left fab-top>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-center fab-top secondary>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-right fab-top danger>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-left fab-bottom light>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-center fab-bottom primary>
+  <ion-icon name="add"></ion-icon>
+</button>
+
+<button fab fab-right fab-bottom dark>
+  <ion-icon name="add"></ion-icon>
+</button>
--- a/src/components/button/test/full/e2e.ts
+++ b/src/components/button/test/full/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/full/index.ts
+++ b/src/components/button/test/full/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/button/test/full/main.html
+++ b/src/components/button/test/full/main.html
@@ -0,0 +1,37 @@
+<ion-toolbar>
+  <ion-title>Full Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content>
+
+  <p>
+    <a button full href="#">a[button][full]</a>
+    <button full>button[full]</button>
+  </p>
+
+  <p>
+    <a button full href="#">
+      <ion-icon name="help-circle"></ion-icon>
+      a[button][full] + icon
+    </a>
+    <button full>
+      <ion-icon name="help-circle"></ion-icon>
+      button[full] + icon
+    </button>
+  </p>
+
+  <p>
+    <a button full outline secondary href="#">a[button][full][outline][secondary]</a>
+    <button full outline secondary>button[full][outline][secondary]</button>
+  </p>
+
+  <p>
+    <a button full clear light href="#">a[button][full][clear][light]</a>
+    <button full clear light>button[full][clear][light]</button>
+  </p>
+
+  <p>
+    <a button full clear dark href="#">a[button][full][clear][dark]</a>
+    <button full clear dark>button[full][clear][dark]</button>
+  </p>
+</ion-content>
--- a/src/components/button/test/icons/e2e.ts
+++ b/src/components/button/test/icons/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/icons/index.ts
+++ b/src/components/button/test/icons/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/button/test/icons/main.html
+++ b/src/components/button/test/icons/main.html
@@ -0,0 +1,101 @@
+
+<ion-toolbar>
+  <ion-title>Buttons Icons</ion-title>
+</ion-toolbar>
+
+<ion-content padding>
+
+  <div>
+    <button>
+      <ion-icon name="home"></ion-icon>
+      Left Icon
+    </button>
+    <a button>
+      <ion-icon name="home"></ion-icon>
+      Left Icon
+    </a>
+  </div>
+
+  <div>
+    <button>
+      Right Icon
+      <ion-icon name="star"></ion-icon>
+    </button>
+    <a button>
+      Right Icon
+      <ion-icon name="star"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button>
+      <ion-icon name="flag"></ion-icon>
+    </button>
+    <a button>
+      <ion-icon name="flag"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button large>
+      <ion-icon name="help-circle"></ion-icon>
+      Left, Large
+    </button>
+    <a button large>
+      <ion-icon name="help-circle"></ion-icon>
+      Left, Large
+    </a>
+  </div>
+
+  <div>
+    <button large>
+      Right, Large
+      <ion-icon name="settings"></ion-icon>
+    </button>
+    <a button large>
+      Right, Large
+      <ion-icon name="settings"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button large>
+      <ion-icon name="heart"></ion-icon>
+    </button>
+    <a button large>
+      <ion-icon name="heart"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button small>
+      <ion-icon name="checkmark"></ion-icon>
+      Left, Small
+    </button>
+    <a button small>
+      <ion-icon name="checkmark"></ion-icon>
+      Left, Small
+    </a>
+  </div>
+
+  <div>
+    <button small>
+      Right, Small
+      <ion-icon name="arrow-forward"></ion-icon>
+    </button>
+    <a button small>
+      Right, Small
+      <ion-icon name="arrow-forward"></ion-icon>
+    </a>
+  </div>
+
+  <div>
+    <button small>
+      <ion-icon name="search"></ion-icon>
+    </button>
+    <a button small>
+      <ion-icon name="search"></ion-icon>
+    </a>
+  </div>
+
+</ion-content>
--- a/src/components/button/test/outline/e2e.ts
+++ b/src/components/button/test/outline/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/outline/index.ts
+++ b/src/components/button/test/outline/index.ts
@@ -0,0 +1,13 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  outlineButton = true;
+
+  toggleOutline() {
+    this.outlineButton = !this.outlineButton;
+  }
+}
--- a/src/components/button/test/outline/main.html
+++ b/src/components/button/test/outline/main.html
@@ -0,0 +1,58 @@
+
+<ion-toolbar>
+  <ion-title>Outline Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center" class="outer-content">
+
+  <p>
+    <button outline>Default</button>
+    <button outline class="activated">Default.activated</button>
+  </p>
+
+  <p>
+    <button outline primary>Primary</button>
+    <button outline primary class="activated">Primary.activated</button>
+  </p>
+
+  <p>
+    <button outline secondary>Secondary</button>
+    <button outline secondary class="activated">Secondary.activated</button>
+  </p>
+
+  <p>
+    <button outline danger>Danger</button>
+    <button outline danger class="activated">Danger.activated</button>
+  </p>
+
+  <p>
+    <button outline light>Light</button>
+    <button outline light class="activated">Light.activated</button>
+  </p>
+
+  <p>
+    <button outline dark>Dark</button>
+    <button outline dark class="activated">Dark.activated</button>
+  </p>
+
+  <p>
+    <button outline block>button[outline][block]</button>
+  </p>
+
+  <p>
+    <button outline block class="activated">[outline][block].activated</button>
+  </p>
+
+  <p>
+    <button outline block secondary>button[outline][block][secondary]</button>
+  </p>
+
+  <p>
+    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
+  </p>
+
+  <p>
+    <button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
+  </p>
+
+</ion-content>
--- a/src/components/button/test/raised/index.ts
+++ b/src/components/button/test/raised/index.ts
@@ -0,0 +1,21 @@
+import {App, IonicApp} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {
+  constructor(app: IonicApp) {
+    app.setTitle('Basic Buttons');
+
+    this.testingColors = ['primary', 'secondary', 'danger', 'dark'];
+    this.testingColorIndex = 0;
+    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);
+  }
+}
--- a/src/components/button/test/raised/main.html
+++ b/src/components/button/test/raised/main.html
@@ -0,0 +1,41 @@
+
+<ion-toolbar>
+  <ion-title>Raised Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding style="text-align:center">
+
+  <p>
+    <button raised><span>Default</span></button>
+    <button raised raised class="activated">Default.activated</button>
+  </p>
+
+  <p>
+    <button raised outline>Outline</button>
+    <button raised outline class="activated">Outline.activated</button>
+  </p>
+
+  <p>
+    <button raised clear>Clear</button>
+    <button raised clear class="activated">Clear.activated</button>
+  </p>
+
+  <p>
+    <button raised fab style="position: relative">FAB</button>
+    <button raised fab style="position: relative" class="activated">FAB</button>
+  </p>
+
+  <p>
+    <button raised round>Round</button>
+    <button raised round class="activated">Round.activated</button>
+  </p>
+
+  <p>
+    <button raised block>Block</button>
+    <button raised block class="activated">Block.activated</button>
+  </p>
+
+  <p>
+    <button raised clear disabled>Clear Disabled</button>
+  </p>
+</ion-content>
--- a/src/components/button/test/round/e2e.ts
+++ b/src/components/button/test/round/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/round/index.ts
+++ b/src/components/button/test/round/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/button/test/round/main.html
+++ b/src/components/button/test/round/main.html
@@ -0,0 +1,26 @@
+
+<ion-toolbar>
+  <ion-title>Round Buttons</ion-title>
+</ion-toolbar>
+
+<ion-content padding>
+  <button round>button</button>
+  <button round light>button light</button>
+  <button round secondary>button secondary</button>
+  <button round danger>button danger</button>
+  <button round dark>button dark</button>
+
+  <button round outline>button</button>
+  <button round light outline>button light</button>
+  <button round secondary outline>button secondary</button>
+  <button round danger outline>button danger</button>
+  <button round dark outline>button dark</button>
+
+</ion-content>
+
+<style>
+  button {
+    display: block !important;
+    margin: 8px auto !important;
+  }
+</style>
--- a/src/components/button/test/sizes/e2e.ts
+++ b/src/components/button/test/sizes/e2e.ts
@@ -0,0 +1 @@
+
--- a/src/components/button/test/sizes/index.ts
+++ b/src/components/button/test/sizes/index.ts
@@ -0,0 +1,7 @@
+import {App} from '../../../../../ionic';
+
+
+@App({
+  templateUrl: 'main.html'
+})
+class E2EApp {}
--- a/src/components/button/test/sizes/main.html
+++ b/src/components/button/test/sizes/main.html
@@ -0,0 +1,48 @@
+
+<ion-toolbar>
+  <ion-title>Button Sizes</ion-title>
+</ion-toolbar>
+
+<ion-content padding>
+
+  <p>
+    <a button href="#">a[button]</a>
+    <button>button</button>
+  </p>
+
+  <p>
+    <a button small href="#">a[button][small]</a>
+    <button small>button[small]</button>
+  </p>
+
+  <p>
+    <a button outline small href="#">a[button][outline][small]</a>
+    <button outline small>button[outline][small]</button>
+  </p>
+
+  <p>
+    <a button clear small href="#">a[button][clear][small]</a>
+    <button clear small>button[clear][small]</button>
+  </p>
+
+  <p>
+    <button large>[large]</button>
+    <a 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</a>
+  </p>
+
+  <p>
+    <a button outline large href="#">a[button][outline][large]</a>
+    <button outline large>button[outline][large]</button>
+  </p>
+
+  <p>
+    <a button clear large href="#">a[clear][large]</a>
+    <button clear large>button[clear][large]</button>
+  </p>
+
+</ion-content>