diff --git a/demos/action-sheet/main.html b/demos/action-sheet/main.html
index 75d31e7f451..292f7a8af8a 100644
--- a/demos/action-sheet/main.html
+++ b/demos/action-sheet/main.html
@@ -9,6 +9,6 @@
 
 <ion-content padding>
 
-  <button block (click)="present()">Basic Action Sheet</button>
+  <button ion-button block (click)="present()">Basic Action Sheet</button>
 
 </ion-content>
diff --git a/demos/alert/main.html b/demos/alert/main.html
index 4465d7061b8..abda386063d 100644
--- a/demos/alert/main.html
+++ b/demos/alert/main.html
@@ -9,10 +9,10 @@
 
 <ion-content padding>
 
-  <button block (click)="doAlert()">Basic Alert</button>
-  <button light block (click)="doConfirm()">Confirm Alert</button>
-  <button secondary block (click)="doPrompt()">Prompt Alert</button>
-  <button danger block (click)="doRadio()">Radio Alert</button>
-  <button dark block (click)="doCheckbox()">Checkbox Alert</button>
+  <button ion-button block (click)="doAlert()">Basic Alert</button>
+  <button ion-button light block (click)="doConfirm()">Confirm Alert</button>
+  <button ion-button secondary block (click)="doPrompt()">Prompt Alert</button>
+  <button ion-button danger block (click)="doRadio()">Radio Alert</button>
+  <button ion-button dark block (click)="doCheckbox()">Checkbox Alert</button>
 
 </ion-content>
diff --git a/demos/button/main.html b/demos/button/main.html
index 8aa1df285ea..6e7852e77d8 100644
--- a/demos/button/main.html
+++ b/demos/button/main.html
@@ -11,58 +11,58 @@
 
   <h4>Colors</h4>
 
-  <button>Default</button>
+  <button ion-button>Default</button>
 
-  <button secondary>Secondary</button>
+  <button ion-button secondary>Secondary</button>
 
-  <button danger>Danger</button>
+  <button ion-button danger>Danger</button>
 
-  <button light>Light</button>
+  <button ion-button light>Light</button>
 
-  <button dark>Dark</button>
+  <button ion-button dark>Dark</button>
 
   <h4>Shapes</h4>
 
-  <button full>Full Button</button>
+  <button ion-button full>Full Button</button>
 
-  <button block>Block Button</button>
+  <button ion-button block>Block Button</button>
 
-  <button round>Round Button</button>
+  <button ion-button round>Round Button</button>
 
-  <button fab style="position: relative;">FAB</button>
+  <button ion-button fab style="position: relative;">FAB</button>
 
   <h4>Outlines</h4>
 
-  <button secondary full outline>Outline + Full</button>
+  <button ion-button secondary full outline>Outline + Full</button>
 
-  <button secondary block outline>Outline + Block</button>
+  <button ion-button secondary block outline>Outline + Block</button>
 
-  <button secondary round outline>Outline + Round</button>
+  <button ion-button secondary round outline>Outline + Round</button>
 
-  <button secondary fab outline style="position: relative;">FAB</button>
+  <button ion-button secondary fab outline style="position: relative;">FAB</button>
 
   <h4>Icons</h4>
 
-  <button dark>
+  <button ion-button icon-left dark>
     <ion-icon name="star"></ion-icon>
     Left Icon
   </button>
 
-  <button dark>
+  <button ion-button icon-right dark>
     Right Icon
     <ion-icon name="star"></ion-icon>
   </button>
 
-  <button dark>
+  <button ion-button icon-only dark>
     <ion-icon name="star"></ion-icon>
   </button>
 
   <h4>Sizes</h4>
 
-  <button light large>Large</button>
+  <button ion-button light large>Large</button>
 
-  <button light>Default</button>
+  <button ion-button light>Default</button>
 
-  <button light small>Small</button>
+  <button ion-button light small>Small</button>
 
 </ion-content>
diff --git a/demos/config/index.ts b/demos/config/index.ts
index 620e66dd161..b8fb787773c 100644
--- a/demos/config/index.ts
+++ b/demos/config/index.ts
@@ -89,18 +89,23 @@ export class ApiDemoPage {
 
     if (window.localStorage.getItem('configDemo') !== null) {
       this.config = JSON.parse(window.localStorage.getItem('configDemo'));
-    }
-    else if (platform.is('ios')) {
+    } else if (platform.is('ios')) {
       this.config = {
         'backButtonIcon': 'ios-arrow-back',
         'iconMode': 'ios',
         'tabsPlacement': 'bottom'
       };
+    } else if(platform.is('windows')) {
+      this.config = {
+        'backButtonIcon': 'ios-arrow-back',
+        'iconMode': 'ios',
+        'tabsPlacement': 'top'
+      };
     } else {
       this.config = {
         'backButtonIcon': 'md-arrow-back',
         'iconMode': 'md',
-        'tabsPlacement': 'top'
+        'tabsPlacement': 'bottom'
       };
     }
 
diff --git a/demos/config/main.html b/demos/config/main.html
index 632b7bcb281..4ade64b254d 100644
--- a/demos/config/main.html
+++ b/demos/config/main.html
@@ -41,7 +41,7 @@
   <p class="note">Note: the config will not be updated until you click the button below.</p>
 
   <div padding>
-    <button block (click)="load()">
+    <button ion-button block (click)="load()">
       Update Config
     </button>
   </div>
@@ -57,7 +57,7 @@
 });</pre>
 
   <div padding>
-    <button block secondary (click)="push()">
+    <button ion-button block secondary (click)="push()">
       Go to Another Page
     </button>
   </div>
diff --git a/demos/config/page.html b/demos/config/page.html
index 6916ea1401f..209ecc34238 100644
--- a/demos/config/page.html
+++ b/demos/config/page.html
@@ -6,6 +6,6 @@
 
 <ion-content>
   <div padding>
-    <button block (click)="pop()">Go Back to Config</button>
+    <button ion-button block (click)="pop()">Go Back to Config</button>
   </div>
 </ion-content>
diff --git a/demos/events/login.html b/demos/events/login.html
index 95a3b0f2cc0..adaad6e90b7 100644
--- a/demos/events/login.html
+++ b/demos/events/login.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -30,8 +30,8 @@ <h3 margin-left>Login</h3>
   </ion-list>
 
   <div padding>
-    <button block (click)="login()">Login</button>
-    <button block secondary menuToggle>Toggle Menu</button>
+    <button ion-button block (click)="login()">Login</button>
+    <button ion-button block secondary menuToggle>Toggle Menu</button>
   </div>
 
 </ion-content>
diff --git a/demos/events/logout.html b/demos/events/logout.html
index 924c0582167..78d37e20d62 100644
--- a/demos/events/logout.html
+++ b/demos/events/logout.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -17,7 +17,7 @@ <h3 margin-left>Logout</h3>
   <p margin>Click the logout button to logout. Then, toggle the menu to see the menu items change.</p>
 
   <div padding>
-    <button block (click)="logout()">Logout</button>
-    <button block secondary menuToggle>Toggle Menu</button>
+    <button ion-button block (click)="logout()">Logout</button>
+    <button ion-button block secondary menuToggle>Toggle Menu</button>
   </div>
 </ion-content>
diff --git a/demos/item-reorder/main.html b/demos/item-reorder/main.html
index 002a8d82a45..259e386fb03 100644
--- a/demos/item-reorder/main.html
+++ b/demos/item-reorder/main.html
@@ -3,7 +3,7 @@
   <ion-navbar>
     <ion-title>Item Reorder</ion-title>
     <ion-buttons end>
-      <button (click)="toggleEdit()">{{editButton}}</button>
+      <button ion-button (click)="toggleEdit()">{{editButton}}</button>
     </ion-buttons>
   </ion-navbar>
 
diff --git a/demos/item-sliding/main.html b/demos/item-sliding/main.html
index ee00a06a374..2e301c141cc 100644
--- a/demos/item-sliding/main.html
+++ b/demos/item-sliding/main.html
@@ -27,22 +27,22 @@ <h2>{{chat.name}}</h2>
       </ion-item>
 
       <ion-item-options>
-        <button secondary (click)="more(item)">
+        <button ion-button secondary (click)="more(item)">
           <ion-icon name="menu"></ion-icon>
           More
         </button>
-        <button dark (click)="mute(item)">
+        <button ion-button dark (click)="mute(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute
         </button>
-        <button danger (click)="delete(item)">
+        <button ion-button danger (click)="delete(item)">
           <ion-icon name="trash"></ion-icon>
           Delete
         </button>
       </ion-item-options>
 
       <ion-item-options side="left" (ionSwipe)="archive(item)">
-        <button primary expandable (click)="archive(item)">
+        <button ion-button primary expandable (click)="archive(item)">
           <ion-icon name="archive" class="expand-hide"></ion-icon>
           <div class="expand-hide">Archive</div>
           <ion-spinner id="archive-spinner"></ion-spinner>
@@ -63,16 +63,16 @@ <h2>{{login.name}}</h2>
         <p>{{login.username}}</p>
       </ion-item>
       <ion-item-options side="left">
-        <button danger>
+        <button ion-button danger>
           <ion-icon name="trash"></ion-icon>
         </button>
       </ion-item-options>
-      <ion-item-options (ionSwipe)="download(item)">
-        <button dark (click)="more(item)">
+      <ion-item-options (ionSwipe)="download(item)" icon-left>
+        <button ion-button dark (click)="more(item)">
           <ion-icon name="volume-off"></ion-icon>
           Mute
         </button>
-        <button light expandable (click)="download(item)">
+        <button ion-button light expandable (click)="download(item)">
           <ion-icon name="download" class="expand-hide"></ion-icon>
           <div class="expand-hide">Download</div>
           <ion-spinner id="download-spinner"></ion-spinner>
diff --git a/demos/item/main.html b/demos/item/main.html
index 55878b652c6..4bc7f8b63e3 100644
--- a/demos/item/main.html
+++ b/demos/item/main.html
@@ -12,7 +12,7 @@
   <ion-list>
     <ion-list-header>
       Settings
-      <button item-right clear>
+      <button ion-button icon-only item-right clear>
         <ion-icon name="cog"></ion-icon>
       </button>
     </ion-list-header>
@@ -39,7 +39,7 @@
 
     <ion-item-divider primary>
       Other Settings
-      <button item-right outline light>Clear</button>
+      <button ion-button item-right outline light>Clear</button>
     </ion-item-divider>
 
     <button ion-item>
@@ -78,22 +78,22 @@
     <ion-item>
       <ion-icon name="ionic" item-left primary></ion-icon>
       <ion-label>Ionic View</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="brush" item-left primary></ion-icon>
       <ion-label>Ionic Creator</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="logo-octocat" item-left dark></ion-icon>
       <ion-label>Hubstruck</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="paw" item-left danger></ion-icon>
       <ion-label>Barkpark</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
   </ion-list>
 
diff --git a/demos/list/main.html b/demos/list/main.html
index c6f242d3af4..9244d0b6165 100644
--- a/demos/list/main.html
+++ b/demos/list/main.html
@@ -67,22 +67,22 @@
     <ion-item>
       <ion-icon name="ionic" item-left primary></ion-icon>
       <ion-label>Ionic View</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="brush" item-left primary></ion-icon>
       <ion-label>Ionic Creator</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="logo-octocat" item-left dark></ion-icon>
       <ion-label>Hubstruck</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
     <ion-item>
       <ion-icon name="paw" item-left danger></ion-icon>
       <ion-label>Barkpark</ion-label>
-      <button outline item-right>Uninstall</button>
+      <button ion-button outline item-right>Uninstall</button>
     </ion-item>
   </ion-list>
 
diff --git a/demos/loading/main.html b/demos/loading/main.html
index 9ed65607c32..4f940f97dd6 100644
--- a/demos/loading/main.html
+++ b/demos/loading/main.html
@@ -58,7 +58,7 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <button (click)="goToPage2()">
+      <button ion-button icon-right (click)="goToPage2()">
         Show Loading and Navigate
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/demos/local-storage/main.html b/demos/local-storage/main.html
index ea79bbd31ef..89c99d7b737 100644
--- a/demos/local-storage/main.html
+++ b/demos/local-storage/main.html
@@ -33,7 +33,7 @@
   </ion-list>
 
   <div padding>
-    <button block secondary (click)="set()">
+    <button ion-button icon-left block secondary (click)="set()">
       <ion-icon name="add"></ion-icon>
       Add
     </button>
@@ -54,7 +54,7 @@
   </ion-list>
 
   <div padding>
-    <button block danger (click)="remove()">
+    <button ion-button icon-left block danger (click)="remove()">
       <ion-icon name="remove"></ion-icon>
       Delete
     </button>
diff --git a/demos/menu/main.html b/demos/menu/main.html
index 9195d7290b6..98c6d05e120 100644
--- a/demos/menu/main.html
+++ b/demos/menu/main.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button [menuToggle]="activeMenu">
+    <button ion-button [menuToggle]="activeMenu">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
@@ -18,10 +18,10 @@ <h4>Active Menu: <b primary>{{ (activeMenu == 'menu1') ? 'Menu 1' : 'Menu 2' }}<
 
   <p>This page has two menus with different id's, but only one is active at a time.</p>
 
-  <button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
+  <button ion-button block secondary (click)="menu1Active()">Make Menu 1 Active</button>
 
-  <button block danger (click)="menu2Active()">Make Menu 2 Active</button>
+  <button ion-button block danger (click)="menu2Active()">Make Menu 2 Active</button>
 
-  <button block [menuToggle]="activeMenu">Toggle Menu</button>
+  <button ion-button block [menuToggle]="activeMenu">Toggle Menu</button>
 
 </ion-content>
diff --git a/demos/modal/main.html b/demos/modal/main.html
index 909afb4f8c7..8aabd97ef49 100644
--- a/demos/modal/main.html
+++ b/demos/modal/main.html
@@ -10,7 +10,7 @@
 <ion-content>
 
   <div padding>
-    <button block (click)="openBasicModal()">Open Basic Modal</button>
+    <button ion-button block (click)="openBasicModal()">Open Basic Modal</button>
   </div>
 
   <ion-list no-margin>
@@ -31,7 +31,7 @@
   </ion-list>
 
   <div padding>
-    <button block danger (click)="openModalWithParams()">Open with Parameters</button>
+    <button ion-button block danger (click)="openModalWithParams()">Open with Parameters</button>
   </div>
 
 </ion-content>
diff --git a/demos/modal/modal-content.html b/demos/modal/modal-content.html
index 5edca41cc98..fc83cddc430 100644
--- a/demos/modal/modal-content.html
+++ b/demos/modal/modal-content.html
@@ -2,7 +2,7 @@
 
   <ion-navbar>
     <ion-buttons start>
-      <button (click)="dismiss()">Close</button>
+      <button ion-button (click)="dismiss()">Close</button>
     </ion-buttons>
     <ion-title>Modals</ion-title>
   </ion-navbar>
@@ -22,6 +22,6 @@ <h5>Parameters passed:</h5>
   <div [hidden]="myParam">
     <p>No parameters passed.</p>
   </div>
-  <button danger full (click)="dismiss()">Close Modal</button>
+  <button ion-button danger full (click)="dismiss()">Close Modal</button>
 
 </ion-content>
diff --git a/demos/nav-params/main.html b/demos/nav-params/main.html
index 538ffb86e2b..a8988f3cb91 100644
--- a/demos/nav-params/main.html
+++ b/demos/nav-params/main.html
@@ -25,7 +25,7 @@
   </ion-list>
 
   <div padding>
-    <button secondary block (click)="pushParams()">Navigate with Parameters</button>
+    <button ion-button secondary block (click)="pushParams()">Navigate with Parameters</button>
   </div>
 
 </ion-content>
diff --git a/demos/navigation/main.html b/demos/navigation/main.html
index 6a0b55a7060..cb98e9776a8 100644
--- a/demos/navigation/main.html
+++ b/demos/navigation/main.html
@@ -9,6 +9,6 @@
 
 <ion-content padding>
 
-  <button block (click)="push()">Push New Page</button>
+  <button ion-button block (click)="push()">Push New Page</button>
 
 </ion-content>
diff --git a/demos/navigation/page.html b/demos/navigation/page.html
index 4f9f1640483..126a0bca444 100644
--- a/demos/navigation/page.html
+++ b/demos/navigation/page.html
@@ -9,7 +9,7 @@
 
 <ion-content padding>
 
-  <button block (click)="push()">Push Another Page</button>
-  <button secondary block (click)="pop()">Pop This Page</button>
+  <button ion-button block (click)="push()">Push Another Page</button>
+  <button ion-button secondary block (click)="pop()">Pop This Page</button>
 
 </ion-content>
diff --git a/demos/popover/index.ts b/demos/popover/index.ts
index 4adfb0c6926..32caa02b579 100644
--- a/demos/popover/index.ts
+++ b/demos/popover/index.ts
@@ -16,16 +16,16 @@ import { ionicBootstrap, NavParams, PopoverController } from 'ionic-angular';
       </ion-row>
       <ion-row class="row-dots">
         <ion-col>
-          <button (click)="changeBackground('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
+          <button (click)="changeBackground('white')" ion-button="dot" class="dot-white" [class.selected]="background == 'white'"></button>
         </ion-col>
         <ion-col>
-          <button (click)="changeBackground('tan')" category="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
+          <button (click)="changeBackground('tan')" ion-button="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
         </ion-col>
         <ion-col>
-          <button (click)="changeBackground('grey')" category="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
+          <button (click)="changeBackground('grey')" ion-button="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
         </ion-col>
         <ion-col>
-          <button (click)="changeBackground('black')" category="dot" class="dot-black" [class.selected]="background == 'black'"></button>
+          <button (click)="changeBackground('black')" ion-button="dot" class="dot-black" [class.selected]="background == 'black'"></button>
         </ion-col>
       </ion-row>
       <ion-item class="text-athelas">
diff --git a/demos/popover/main.html b/demos/popover/main.html
index 8d07872ac5b..c8136ca781b 100644
--- a/demos/popover/main.html
+++ b/demos/popover/main.html
@@ -3,7 +3,7 @@
   <ion-navbar primary>
     <ion-title>Popover</ion-title>
     <ion-buttons end>
-      <button (click)="presentRadioPopover($event)">
+      <button ion-button (click)="presentRadioPopover($event)">
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
diff --git a/demos/segment/main.html b/demos/segment/main.html
index f7c9d23245a..e2df9edfec9 100644
--- a/demos/segment/main.html
+++ b/demos/segment/main.html
@@ -25,7 +25,7 @@
     <ion-list-header>{{ appType }}</ion-list-header>
     <ion-item *ngFor="let item of getItems(appType)">
       {{ item.name }}
-      <button outline item-right>{{ item.price }}</button>
+      <button ion-button outline item-right>{{ item.price }}</button>
     </ion-item>
   </ion-list>
 
diff --git a/demos/toast/main.html b/demos/toast/main.html
index be1c7e6f9d2..bf5907e1468 100644
--- a/demos/toast/main.html
+++ b/demos/toast/main.html
@@ -9,12 +9,12 @@
 
 <ion-content padding>
 
-  <button block (click)="showToast('bottom')">Show Toast Bottom Position</button>
-  <button block (click)="showToast('top')">Show Toast Top Position</button>
-  <button block (click)="showToast('middle')">Show Toast Middle Position</button>
-  <button block margin-bottom (click)="showLongToast()">Show Long Toast</button>
+  <button ion-button block (click)="showToast('bottom')">Show Toast Bottom Position</button>
+  <button ion-button block (click)="showToast('top')">Show Toast Top Position</button>
+  <button ion-button block (click)="showToast('middle')">Show Toast Middle Position</button>
+  <button ion-button block margin-bottom (click)="showLongToast()">Show Long Toast</button>
 
-  <button block (click)="showDismissDurationToast()">Show Custom Duration Toast</button>
-  <button block (click)="showToastWithCloseButton()">Show Close Button Toast</button>
+  <button ion-button block (click)="showDismissDurationToast()">Show Custom Duration Toast</button>
+  <button ion-button block (click)="showToastWithCloseButton()">Show Close Button Toast</button>
 
 </ion-content>
diff --git a/demos/toolbar/main.html b/demos/toolbar/main.html
index 0f69ef0824c..2709fbf15a1 100644
--- a/demos/toolbar/main.html
+++ b/demos/toolbar/main.html
@@ -15,15 +15,15 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -32,15 +32,15 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button danger>
+      <button ion-button icon-only danger>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button secondary>
+      <button ion-button icon-only secondary>
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button dark>
+      <button ion-button icon-only dark>
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -49,13 +49,13 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button solid>
+      <button  ion-button icon-only solid>
         <ion-icon name="contact"></ion-icon>
       </button>
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button solid secondary>
+      <button  ion-button icon-right solid secondary>
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -64,12 +64,12 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button outline>
+      <button  ion-button icon-only outline>
         <ion-icon name="contact"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button outline secondary>
+      <button  ion-button icon-right outline secondary>
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -78,7 +78,7 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top>
-    <button menuToggle>
+    <button  ion-button icon-only menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Left Menu</ion-title>
@@ -86,14 +86,14 @@
 
   <ion-toolbar no-border-top>
     <ion-title>Right Menu</ion-title>
-    <button menuToggle right>
+    <button  ion-button menuToggle right>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-toolbar>
 
   <ion-toolbar no-border-top *ngIf="demo != 'Title'">
     <ion-buttons end>
-      <button #button2 (click)="buttonClick(button2)">
+      <button  ion-button icon-only #button2 (click)="buttonClick(button2)">
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
diff --git a/src/components/action-sheet/action-sheet-component.ts b/src/components/action-sheet/action-sheet-component.ts
index 48808d07ea3..89ba8e2c5cb 100644
--- a/src/components/action-sheet/action-sheet-component.ts
+++ b/src/components/action-sheet/action-sheet-component.ts
@@ -24,13 +24,13 @@ import { ViewController } from '../nav/view-controller';
         <div class="action-sheet-group">
           <div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>
           <div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>
-          <button category="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [ngClass]="b.cssClass">
+          <button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [ngClass]="b.cssClass">
             <ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>
             {{b.text}}
           </button>
         </div>
         <div class="action-sheet-group" *ngIf="d.cancelButton">
-          <button category="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">
+          <button ion-button="action-sheet-button" (click)="click(d.cancelButton)" class="action-sheet-cancel disable-hover" [ngClass]="d.cancelButton.cssClass">
             <ion-icon [name]="d.cancelButton.icon" *ngIf="d.cancelButton.icon" class="action-sheet-icon"></ion-icon>
             {{d.cancelButton.text}}
           </button>
diff --git a/src/components/action-sheet/test/basic/index.ts b/src/components/action-sheet/test/basic/index.ts
index 4d596dfb77f..15b170d6a91 100644
--- a/src/components/action-sheet/test/basic/index.ts
+++ b/src/components/action-sheet/test/basic/index.ts
@@ -158,7 +158,7 @@ class E2EPage {
     <ion-header>
       <ion-toolbar>
         <ion-buttons start>
-          <button (click)="dismiss()">Close</button>
+          <button ion-button (click)="dismiss()">Close</button>
         </ion-buttons>
         <ion-title>Modal</ion-title>
       </ion-toolbar>
diff --git a/src/components/action-sheet/test/basic/main.html b/src/components/action-sheet/test/basic/main.html
index 59de1bfa63a..9e601979f20 100644
--- a/src/components/action-sheet/test/basic/main.html
+++ b/src/components/action-sheet/test/basic/main.html
@@ -9,9 +9,9 @@
 
 <ion-content padding>
 
-  <button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
-  <button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
-  <button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
+  <button ion-button block class="e2eOpenActionSheet" (click)="presentActionSheet1()">Present Action Sheet 1</button>
+  <button ion-button block (click)="presentActionSheet2()">Present Action Sheet 2</button>
+  <button ion-button block (click)="presentActionSheet3()">Present Action Sheet 3</button>
 
   <pre>
     Result: {{result}}
diff --git a/src/components/alert/alert-component.ts b/src/components/alert/alert-component.ts
index 0c6efc661c7..8e206aef1c6 100644
--- a/src/components/alert/alert-component.ts
+++ b/src/components/alert/alert-component.ts
@@ -29,7 +29,7 @@ import { ViewController } from '../nav/view-controller';
 
         <template ngSwitchCase="radio">
           <div class="alert-radio-group" role="radiogroup" [attr.aria-labelledby]="hdrId" [attr.aria-activedescendant]="activeId">
-            <button category="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">
+            <button ion-button="alert-radio-button" *ngFor="let i of d.inputs" (click)="rbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" [attr.id]="i.id" class="alert-tappable alert-radio" role="radio">
               <div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>
               <div class="alert-radio-label">
                 {{i.label}}
@@ -40,7 +40,7 @@ import { ViewController } from '../nav/view-controller';
 
         <template ngSwitchCase="checkbox">
           <div class="alert-checkbox-group">
-            <button category="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">
+            <button ion-button="alert-checkbox-button" *ngFor="let i of d.inputs" (click)="cbClick(i)" [attr.aria-checked]="i.checked" [disabled]="i.disabled" class="alert-tappable alert-checkbox" role="checkbox">
               <div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>
               <div class="alert-checkbox-label">
                 {{i.label}}
@@ -59,7 +59,7 @@ import { ViewController } from '../nav/view-controller';
 
       </div>
       <div class="alert-button-group" [ngClass]="{vertical: d.buttons.length>2}">
-        <button category="alert-button" *ngFor="let b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass">
+        <button ion-button="alert-button" *ngFor="let b of d.buttons" (click)="btnClick(b)" [ngClass]="b.cssClass">
           {{b.text}}
         </button>
       </div>
diff --git a/src/components/alert/test/basic/index.ts b/src/components/alert/test/basic/index.ts
index b975ded10cd..a262b556b58 100644
--- a/src/components/alert/test/basic/index.ts
+++ b/src/components/alert/test/basic/index.ts
@@ -297,7 +297,7 @@ class E2EPage {
     <ion-header>
       <ion-toolbar>
         <ion-buttons>
-          <button (click)="dismiss()">Close</button>
+          <button ion-button (click)="dismiss()">Close</button>
         </ion-buttons>
         <ion-title>Modal</ion-title>
       </ion-toolbar>
diff --git a/src/components/alert/test/basic/main.html b/src/components/alert/test/basic/main.html
index eb58eafab7a..0400538042b 100644
--- a/src/components/alert/test/basic/main.html
+++ b/src/components/alert/test/basic/main.html
@@ -9,16 +9,16 @@
 
 <ion-content padding>
 
-  <button block class="e2eOpenAlert" (click)="doAlert()">Alert</button>
-  <button block class="e2eOpenAlertLongMessage" (click)="doAlertLongMessage()">Alert Long Message</button>
-  <button block class="e2eOpenMultipleButtons" (click)="doMultipleButtons()">Multiple Buttons (>2)</button>
-  <button block class="e2eOpenAlertNoMessage" (click)="doAlertNoMessage()">Alert No Message</button>
-  <button block class="e2eOpenConfirm" (click)="doConfirm()">Confirm</button>
-  <button block class="e2eOpenPrompt" (click)="doPrompt()">Prompt</button>
-  <button block class="e2eOpenRadio" (click)="doRadio()">Radio</button>
-  <button block class="e2eOpenCheckbox" (click)="doCheckbox()">Checkbox</button>
-  <button block class="e2eFastClose" (click)="doFastClose()">Fast Close</button>
-  <button block class="e2eDisabledBackdrop" (click)="doDisabledBackdropAlert()">Disabled Backdrop Click</button>
+  <button ion-button block class="e2eOpenAlert" (click)="doAlert()">Alert</button>
+  <button ion-button block class="e2eOpenAlertLongMessage" (click)="doAlertLongMessage()">Alert Long Message</button>
+  <button ion-button block class="e2eOpenMultipleButtons" (click)="doMultipleButtons()">Multiple Buttons (>2)</button>
+  <button ion-button block class="e2eOpenAlertNoMessage" (click)="doAlertNoMessage()">Alert No Message</button>
+  <button ion-button block class="e2eOpenConfirm" (click)="doConfirm()">Confirm</button>
+  <button ion-button block class="e2eOpenPrompt" (click)="doPrompt()">Prompt</button>
+  <button ion-button block class="e2eOpenRadio" (click)="doRadio()">Radio</button>
+  <button ion-button block class="e2eOpenCheckbox" (click)="doCheckbox()">Checkbox</button>
+  <button ion-button block class="e2eFastClose" (click)="doFastClose()">Fast Close</button>
+  <button ion-button block class="e2eDisabledBackdrop" (click)="doDisabledBackdropAlert()">Disabled Backdrop Click</button>
 
   <pre>
     Confirm Opened: {{testConfirmOpen}}
diff --git a/src/components/alert/test/dismiss/index.ts b/src/components/alert/test/dismiss/index.ts
index 6b44fcef8d5..e98f53a9ada 100644
--- a/src/components/alert/test/dismiss/index.ts
+++ b/src/components/alert/test/dismiss/index.ts
@@ -58,13 +58,13 @@ export class E2EPage {
           </ion-item>
         </ion-list>
         <div padding style="padding-top: 0 !important;">
-          <button list-item primary block>
+          <button ion-button list-item primary block>
             Submit
           </button>
         </div>
       </form>
       <p>
-        <button block (click)="doFastPop()">Fast Loading Dismiss, Nav Pop</button>
+        <button ion-button block (click)="doFastPop()">Fast Loading Dismiss, Nav Pop</button>
       </p>
     </ion-content>
   `
diff --git a/src/components/alert/test/dismiss/main.html b/src/components/alert/test/dismiss/main.html
index d917a544bb4..cdbf4243058 100644
--- a/src/components/alert/test/dismiss/main.html
+++ b/src/components/alert/test/dismiss/main.html
@@ -19,9 +19,9 @@
   </ion-list>
 
   <div padding>
-    <button primary block (click)="submit()">
+    <button ion-button primary block (click)="submit()">
       Submit
     </button>
   </div>
 
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/src/components/app/test/cordova/index.ts b/src/components/app/test/cordova/index.ts
index 05355cd3dc5..d0352a99ec9 100644
--- a/src/components/app/test/cordova/index.ts
+++ b/src/components/app/test/cordova/index.ts
@@ -27,12 +27,12 @@ export class OtherData {
     <ion-toolbar>
       <ion-title>This is a modal</ion-title>
       <ion-buttons left>
-        <button (click)="dismissModal()" class="e2eCordovaCloseModal">
+        <button ion-button icon-only (click)="dismissModal()" class="e2eCordovaCloseModal">
           <ion-icon name="close"></ion-icon>
         </button>
       </ion-buttons>
       <ion-buttons end>
-        <button>
+        <button ion-button icon-only>
           <ion-icon name="funnel"></ion-icon>
         </button>
       </ion-buttons>
@@ -40,7 +40,7 @@ export class OtherData {
   </ion-header>
   <ion-content padding>
     <p>The modal toolbar should have status bar padding.</p>
-    <button block (click)="dismissModal()">Close modal</button>
+    <button ion-button block (click)="dismissModal()">Close modal</button>
   </ion-content>
   `
 })
@@ -103,11 +103,11 @@ class Page3 {
   <ion-header>
     <ion-navbar>
       <ion-title>This is a tab page</ion-title>
-      <button menuToggle>
+      <button ion-button menuToggle>
         <ion-icon name="menu"></ion-icon>
       </button>
       <ion-buttons end>
-        <button>
+        <button ion-button>
           <ion-icon name="funnel"></ion-icon>
         </button>
       </ion-buttons>
diff --git a/src/components/app/test/cordova/page1.html b/src/components/app/test/cordova/page1.html
index 62bb8594333..46e2e9c88df 100644
--- a/src/components/app/test/cordova/page1.html
+++ b/src/components/app/test/cordova/page1.html
@@ -5,15 +5,15 @@
       <ion-segment-button value="all">All</ion-segment-button>
       <ion-segment-button value="favorites">Favorites</ion-segment-button>
     </ion-segment>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-buttons end>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
-    <button menuToggle="right" right>
+    <button ion-button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-navbar>
@@ -29,8 +29,8 @@
 
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
-  <button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button>
-  <button block secondary (click)="goToTabs()">Go to Tabs</button>
+  <button ion-button block [navPush]="page2" class="e2eCordovaPage2">Go to Page 2</button>
+  <button ion-button block secondary (click)="goToTabs()">Go to Tabs</button>
 
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
diff --git a/src/components/app/test/cordova/page2.html b/src/components/app/test/cordova/page2.html
index fb8435250aa..c9ad5560bb8 100644
--- a/src/components/app/test/cordova/page2.html
+++ b/src/components/app/test/cordova/page2.html
@@ -2,15 +2,15 @@
 
   <ion-navbar no-border-bottom>
     <ion-title>Page 2</ion-title>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-buttons end>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="funnel"></ion-icon>
       </button>
     </ion-buttons>
-    <button menuToggle="right" right>
+    <button ion-button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-navbar>
@@ -26,8 +26,8 @@
 
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
-  <button block [navPush]="page1">Go to Page 1</button>
-  <button block [navPush]="page3" class="e2eCordovaPage3">Go to Page 3</button>
-  <button block secondary (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
+  <button ion-button block [navPush]="page1">Go to Page 1</button>
+  <button ion-button block [navPush]="page3" class="e2eCordovaPage3">Go to Page 3</button>
+  <button ion-button block secondary (click)="openModal()" class="e2eCordovaOpenModal">Open Modal</button>
 
 </ion-content>
diff --git a/src/components/app/test/cordova/page3.html b/src/components/app/test/cordova/page3.html
index ffbec7b95c4..8e3dd5b0de9 100644
--- a/src/components/app/test/cordova/page3.html
+++ b/src/components/app/test/cordova/page3.html
@@ -3,7 +3,7 @@
   <h2>Page 3</h2>
   <div padding-bottom>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.</div>
 
-  <button block (click)="goBack()" class="e2eCordovaGoBack">Go Back</button>
+  <button ion-button block (click)="goBack()" class="e2eCordovaGoBack">Go Back</button>
 
 </ion-content>
 
diff --git a/src/components/app/test/gesture-collision/main.html b/src/components/app/test/gesture-collision/main.html
index 98a7b6c4437..62ffada1158 100644
--- a/src/components/app/test/gesture-collision/main.html
+++ b/src/components/app/test/gesture-collision/main.html
@@ -15,10 +15,10 @@
           {{p.title}}
         </button>
         <ion-item-options side="left">
-          <button>Test</button>
+          <button ion-button>Test</button>
         </ion-item-options>
         <ion-item-options>
-          <button>Test</button>
+          <button ion-button>Test</button>
         </ion-item-options>
       </ion-item-sliding>
 
diff --git a/src/components/app/test/gesture-collision/page1.html b/src/components/app/test/gesture-collision/page1.html
index 855443938c8..f6f3ac5ece5 100644
--- a/src/components/app/test/gesture-collision/page1.html
+++ b/src/components/app/test/gesture-collision/page1.html
@@ -2,7 +2,7 @@
 
   <ion-navbar>
 
-    <button menuToggle="left">
+    <button ion-button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -10,7 +10,7 @@
       Menu
     </ion-title>
 
-    <button menuToggle="right" right secondary>
+    <button ion-button menuToggle="right" right secondary>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -37,10 +37,10 @@ <h3>Page 1</h3>
       <button ion-item class="e2eContentToggleLeftMenu" menuToggle="left">Toggle Left Menu</button>
 
       <ion-item-options side="left">
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
       <ion-item-options>
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -51,10 +51,10 @@ <h3>Page 1</h3>
       <button ion-item class="e2eContentToggleRightMenu" menuToggle="right">Toggle Right Menu</button>
 
       <ion-item-options side="left">
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
       <ion-item-options>
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -62,7 +62,7 @@ <h3>Page 1</h3>
       <ion-item>LEFT button</ion-item>
 
       <ion-item-options side="left">
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -70,7 +70,7 @@ <h3>Page 1</h3>
       <ion-item>RIGHT button</ion-item>
 
       <ion-item-options>
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -87,10 +87,10 @@ <h3>Page 1</h3>
         <ion-range></ion-range>
       </ion-item>
       <ion-item-options side="left">
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
       <ion-item-options>
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
     </ion-item-sliding>
   </ion-list>
diff --git a/src/components/app/test/gestures/main.html b/src/components/app/test/gestures/main.html
index 3f934bfbe38..648234a736b 100644
--- a/src/components/app/test/gestures/main.html
+++ b/src/components/app/test/gestures/main.html
@@ -9,6 +9,6 @@
 
 <ion-content padding>
 
-  <button (tap)="onTap($event)">Tap</button>
+  <button ion-button (tap)="onTap($event)">Tap</button>
 
 </ion-content>
diff --git a/src/components/app/test/storage/main.html b/src/components/app/test/storage/main.html
index f675c1b570f..7140ca83c8d 100644
--- a/src/components/app/test/storage/main.html
+++ b/src/components/app/test/storage/main.html
@@ -1,11 +1,11 @@
 <ion-content padding>
   <h2>Local Storage</h2>
-  <button primary (click)="getLocal()">Get</button>
-  <button primary (click)="setLocal()">Set</button>
-  <button primary (click)="removeLocal()">Remove</button>
+  <button ion-button primary (click)="getLocal()">Get</button>
+  <button ion-button primary (click)="setLocal()">Set</button>
+  <button ion-button primary (click)="removeLocal()">Remove</button>
 
   <h2>SQL Storage</h2>
-  <button primary (click)="getSql()">Get</button>
-  <button primary (click)="setSql()">Set</button>
-  <button primary (click)="removeSql()">Remove</button>
+  <button ion-button primary (click)="getSql()">Get</button>
+  <button ion-button primary (click)="setSql()">Set</button>
+  <button ion-button primary (click)="removeSql()">Remove</button>
 </ion-content>
diff --git a/src/components/button/button-fab.scss b/src/components/button/button-fab.scss
index b3339fd30dd..e5bc96c1dac 100644
--- a/src/components/button/button-fab.scss
+++ b/src/components/button/button-fab.scss
@@ -1,8 +1,9 @@
 @import "../../globals.core";
 
-// FABulous Buttons (Floating Action Button from material)
+// Floating Action Buttons
 // --------------------------------------------------
 
+/// @prop - Width and height of the FAB button
 $button-fab-size:           56px !default;
 
 
@@ -14,19 +15,17 @@ $button-fab-size:           56px !default;
   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;
-  }
+.button-fab ion-icon {
+  flex: 1;
 
+  font-size: 2.8rem;
 }
 
 [fab-center] {
diff --git a/src/components/button/button-icon.scss b/src/components/button/button-icon.scss
index 73b2f55f384..b89194f1a1f 100644
--- a/src/components/button/button-icon.scss
+++ b/src/components/button/button-icon.scss
@@ -3,36 +3,37 @@
 // Button Icons
 // --------------------------------------------------
 
-
-.button-icon-left ion-icon {
-  padding-right: .3em;
-
+// Icons inside of buttons with text
+@mixin button-icon {
   font-size: 1.4em;
   line-height: .67;
 
   pointer-events: none;
 }
 
-.button-icon-right ion-icon {
-  padding-left: .4em;
+[icon-left] ion-icon {
+  padding-right: .3em;
 
-  font-size: 1.4em;
-  line-height: .67;
+  @include button-icon;
+}
 
-  pointer-events: none;
+[icon-right] ion-icon {
+  padding-left: .4em;
+
+  @include button-icon;
 }
 
-.button-icon-only {
+[icon-only] {
   padding: 0;
 
   min-width: .9em;
+}
 
-  ion-icon {
-    padding: 0 .5em;
+[icon-only] ion-icon {
+  padding: 0 .5em;
 
-    font-size: 1.8em;
-    line-height: .67;
+  font-size: 1.8em;
+  line-height: .67;
 
-    pointer-events: none;
-  }
+  pointer-events: none;
 }
diff --git a/src/components/button/button.ios.scss b/src/components/button/button.ios.scss
index 33c8aac43ba..035c1d984b7 100644
--- a/src/components/button/button.ios.scss
+++ b/src/components/button/button.ios.scss
@@ -4,23 +4,135 @@
 // 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;
+/// @prop - Margin of the button
+$button-ios-margin:                                 .4rem .2rem !default;
+
+/// @prop - Padding of the button
+$button-ios-padding:                                0 1em !default;
+
+/// @prop - Height of the button
+$button-ios-height:                                 2.8em !default;
+
+/// @prop - Border radius of the button
+$button-ios-border-radius:                          4px !default;
+
+/// @prop - Font size of the button text
+$button-ios-font-size:                              1.6rem !default;
+
+/// @prop - Background color of the button
+$button-ios-background-color:                       color($colors-ios, primary) !default;
+
+/// @prop - Text color of the button
+$button-ios-text-color:                             color-contrast($colors-ios, $button-ios-background-color) !default;
+
+/// @prop - Background color of the activated button
+$button-ios-background-color-activated:             color-shade($button-ios-background-color) !default;
+
+/// @prop - Opacity of the activated button
+$button-ios-opacity-activated:                      1 !default;
+
+/// @prop - Opacity of the button on hover
+$button-ios-opacity-hover:                          .8 !default;
+
+
+// iOS Large Button
+// --------------------------------------------------
+
+/// @prop - Padding of the large button
+$button-ios-large-padding:                          0 1em !default;
+
+/// @prop - Height of the large button
+$button-ios-large-height:                           2.8em !default;
+
+/// @prop - Font size of the large button
+$button-ios-large-font-size:                        2rem !default;
+
+
+// iOS Small Button
+// --------------------------------------------------
+
+/// @prop - Padding of the small button
+$button-ios-small-padding:                          0 .9em !default;
+
+/// @prop - Height of the small button
+$button-ios-small-height:                           2.1em !default;
+
+/// @prop - Font size of the small button
+$button-ios-small-font-size:                        1.3rem !default;
+
+/// @prop - Font size of an icon in the small button
+$button-ios-small-icon-font-size:                   1.3em !default;
+
+
+// iOS Outline Button
+// --------------------------------------------------
+
+/// @prop - Border width of the outline button
+$button-ios-outline-border-width:                   1px !default;
+
+/// @prop - Border style of the outline button
+$button-ios-outline-border-style:                   solid !default;
+
+/// @prop - Border radius of the outline button
+$button-ios-outline-border-radius:                  $button-ios-border-radius !default;
+
+/// @prop - Border color of the outline button
+$button-ios-outline-border-color:                   $button-ios-background-color !default;
+
+/// @prop - Text color of the outline button
+$button-ios-outline-text-color:                     $button-ios-background-color !default;
+
+/// @prop - Background color of the outline button
+$button-ios-outline-background-color:               transparent !default;
+
+/// @prop - Text color of the activated outline button
+$button-ios-outline-text-color-activated:           color-contrast($colors-ios, $button-ios-background-color) !default;
+
+/// @prop - Background color of the activated outline button
+$button-ios-outline-background-color-activated:     $button-ios-background-color !default;
+
+/// @prop - Opacity of the activated outline button
+$button-ios-outline-opacity-activated:              1 !default;
+
+
+// iOS Clear Button
+// --------------------------------------------------
+
+/// @prop - Border color of the clear button
+$button-ios-clear-border-color:                     transparent !default;
+
+/// @prop - Background color of the clear button
+$button-ios-clear-background-color:                 transparent !default;
+
+/// @prop - Background color of the activated clear button
+$button-ios-clear-background-color-activated:       $button-ios-clear-background-color !default;
+
+/// @prop - Opacity of the activated clear button
+$button-ios-clear-opacity-activated:                .4 !default;
+
+/// @prop - Text color of the clear button on hover
+$button-ios-clear-text-color-hover:                 $button-ios-background-color !default;
+
+/// @prop - Opacity of the clear button on hover
+$button-ios-clear-opacity-hover:                    .6 !default;
+
+
+// iOS Round Button
+// --------------------------------------------------
+
+
+/// @prop - Padding of the round button
+$button-ios-round-padding:                          $button-round-padding !default;
+
+/// @prop - Border radius of the round button
+$button-ios-round-border-radius:                    $button-round-border-radius !default;
+
+
+// iOS FAB Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the FAB button
+$button-ios-fab-border-radius:                      50% !default;
 
 
 // iOS Default Button
@@ -36,16 +148,15 @@ $button-ios-small-icon-font-size:     1.3em !default;
   font-size: $button-ios-font-size;
 
   color: $button-ios-text-color;
-  background-color: $button-ios-color;
+  background-color: $button-ios-background-color;
 
-  &:hover:not(.disable-hover) {
-    text-decoration: none;
-    opacity: $button-ios-hover-opacity;
+  &.activated {
+    background-color: $button-ios-background-color-activated;
+    opacity: $button-ios-opacity-activated;
   }
 
-  &.activated {
-    background-color: $button-ios-color-activated;
-    opacity: 1;
+  &:hover:not(.disable-hover) {
+    opacity: $button-ios-opacity-hover;
   }
 }
 
@@ -75,7 +186,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // --------------------------------------------------
 
 .button-large {
-  padding: 0 $button-ios-large-padding;
+  padding: $button-ios-large-padding;
 
   height: $button-ios-large-height;
 
@@ -83,13 +194,13 @@ $button-ios-small-icon-font-size:     1.3em !default;
 }
 
 .button-small {
-  padding: 0 $button-ios-small-padding;
+  padding: $button-ios-small-padding;
 
   height: $button-ios-small-height;
 
   font-size: $button-ios-small-font-size;
 
-  &.button-icon-only ion-icon {
+  &[icon-only] ion-icon {
     font-size: $button-ios-small-icon-font-size;
   }
 }
@@ -118,17 +229,17 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // --------------------------------------------------
 
 .button-outline {
-  border-width: 1px;
-  border-style: solid;
-  border-radius: 4px;
-  border-color: $button-ios-color;
-  color: $button-ios-color;
-  background-color: transparent;
+  border-width: $button-ios-outline-border-width;
+  border-style: $button-ios-outline-border-style;
+  border-radius: $button-ios-outline-border-radius;
+  border-color: $button-ios-outline-border-color;
+  color: $button-ios-outline-text-color;
+  background-color: $button-ios-outline-background-color;
 
   &.activated {
-    color: color-contrast($colors-ios, $button-ios-color);
-    background-color: $button-ios-color;
-    opacity: 1;
+    color: $button-ios-outline-text-color-activated;
+    background-color: $button-ios-outline-background-color-activated;
+    opacity: $button-ios-outline-opacity-activated;
   }
 }
 
@@ -140,7 +251,7 @@ $button-ios-small-icon-font-size:     1.3em !default;
   .button-outline-#{$color-name} {
     border-color: $color-base;
     color: $color-base;
-    background-color: transparent;
+    background-color: $button-ios-outline-background-color;
 
     &.activated {
       color: $color-contrast;
@@ -155,18 +266,18 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // --------------------------------------------------
 
 .button-clear {
-  border-color: transparent;
-  color: $button-ios-color;
-  background-color: transparent;
+  border-color: $button-ios-clear-border-color;
+  color: $button-ios-background-color;
+  background-color: $button-ios-clear-background-color;
 
   &.activated {
-    background-color: transparent;
-    opacity: .4;
+    background-color: $button-ios-clear-background-color-activated;
+    opacity: $button-ios-clear-opacity-activated;
   }
 
   &:hover:not(.disable-hover) {
-    color: $button-ios-color;
-    opacity: .6;
+    color: $button-ios-clear-text-color-hover;
+    opacity: $button-ios-clear-opacity-hover;
   }
 }
 
@@ -178,12 +289,12 @@ $button-ios-small-icon-font-size:     1.3em !default;
 
   .button-clear-#{$color-name} {
     $fg-color: $color-base;
-    border-color: transparent;
+    border-color: $button-ios-clear-border-color;
     color: $fg-color;
-    background-color: transparent;
+    background-color: $button-ios-clear-background-color;
 
     &.activated {
-      opacity: .4;
+      opacity: $button-ios-clear-opacity-activated;
     }
 
     &:hover:not(.disable-hover) {
@@ -197,14 +308,21 @@ $button-ios-small-icon-font-size:     1.3em !default;
 // --------------------------------------------------
 
 .button-round {
-  padding: $button-round-padding;
+  padding: $button-ios-round-padding;
 
-  border-radius: $button-round-border-radius;
+  border-radius: $button-ios-round-border-radius;
 }
 
 
+// iOS FAB Button
+// --------------------------------------------------
+
+.button-fab {
+  border-radius: $button-ios-fab-border-radius;
+}
+
+// iOS does not use the button effect
 ion-button-effect {
-  // iOS does not use the button effect
   display: none;
 }
 
diff --git a/src/components/button/button.md.scss b/src/components/button/button.md.scss
index b5d6e76e7f7..6a6e9bee9d5 100644
--- a/src/components/button/button.md.scss
+++ b/src/components/button/button.md.scss
@@ -4,38 +4,178 @@
 // Material Design Button
 // --------------------------------------------------
 
+/// @prop - Margin of the button
 $button-md-margin:                         .4rem .2rem !default;
+
+/// @prop - Padding of the button
 $button-md-padding:                        0 1.1em !default;
-$button-md-font-size:                      1.4rem !default;
+
+/// @prop - Height of the button
 $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;
 
+/// @prop - Border radius of the button
 $button-md-border-radius:                  2px !default;
-$button-md-animation-curve:                cubic-bezier(.4, 0, .2, 1) !default;
+
+/// @prop - Font size of the button text
+$button-md-font-size:                      1.4rem !default;
+
+/// @prop - Font weight of the button text
+$button-md-font-weight:                    500 !default;
+
+/// @prop - Capitalization of the button text
+$button-md-text-transform:                 uppercase !default;
+
+/// @prop - Background color of the button
+$button-md-background-color:               color($colors-md, primary) !default;
+
+/// @prop - Text color of the button
+$button-md-text-color:                     color-contrast($colors-md, $button-md-background-color) !default;
+
+/// @prop - Box shadow of the button
+$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;
+
+/// @prop - Duration of the transition of the button
 $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;
+/// @prop - Speed curve of the transition of the button
+$button-md-transition-timing-function:     cubic-bezier(.4, 0, .2, 1) !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;
+/// @prop - Background color of the button on hover
+$button-md-background-color-hover:         $button-md-background-color !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;
+/// @prop - Background color of the activated button
+$button-md-background-color-activated:     color-shade($button-md-background-color) !default;
 
-$button-md-large-font-size:                2rem !default;
+/// @prop - Opacity of the activated button
+$button-md-opacity-activated:              1 !default;
+
+/// @prop - Box shadow of the activated button
+$button-md-box-shadow-activated:           0 3px 5px rgba(0, 0, 0, .14), 0 3px 5px rgba(0, 0, 0, .21) !default;
+
+/// @prop - Background color of the ripple on the button
+$button-md-ripple-background-color:       #555 !default;
+
+
+// Material Design Large Button
+// --------------------------------------------------
+
+/// @prop - Padding of the large button
+$button-md-large-padding:                  0 1em !default;
+
+/// @prop - Height of the large button
 $button-md-large-height:                   2.8em !default;
-$button-md-large-padding:                  1em !default;
-$button-md-small-font-size:                1.3rem !default;
+
+/// @prop - Font size of the large button
+$button-md-large-font-size:                2rem !default;
+
+
+// Material Design Small Button
+// --------------------------------------------------
+
+/// @prop - Padding of the small button
+$button-md-small-padding:                  0 .9em !default;
+
+/// @prop - Height of the small button
 $button-md-small-height:                   2.1em !default;
-$button-md-small-padding:                  .9em !default;
+
+/// @prop - Font size of the small button
+$button-md-small-font-size:                1.3rem !default;
+
+/// @prop - Font size of an icon in the small button
 $button-md-small-icon-font-size:           1.4em !default;
 
 
+// Material Design Outline Button
+// --------------------------------------------------
+
+/// @prop - Border width of the outline button
+$button-md-outline-border-width:                1px !default;
+
+/// @prop - Border style of the outline button
+$button-md-outline-border-style:                solid !default;
+
+/// @prop - Border color of the outline button
+$button-md-outline-border-color:                $button-md-background-color !default;
+
+/// @prop - Text color of the outline button
+$button-md-outline-text-color:                  $button-md-background-color !default;
+
+/// @prop - Background color of the outline button
+$button-md-outline-background-color:            transparent !default;
+
+/// @prop - Box shadow of the outline button
+$button-md-outline-box-shadow:                  none !default;
+
+/// @prop - Background color of the outline button on hover
+$button-md-outline-background-color-hover:      rgba(158, 158, 158, .1) !default;
+
+/// @prop - Background color of the activated outline button
+$button-md-outline-background-color-activated:  transparent !default;
+
+/// @prop - Box shadow of the activated outline button
+$button-md-outline-box-shadow-activated:        none !default;
+
+/// @prop - Opacity of the activated outline button
+$button-md-outline-opacity-activated:           1 !default;
+
+/// @prop - Background color of the ripple on the outline button
+$button-md-outline-ripple-background-color:     $button-md-background-color !default;
+
+
+// Material Design Clear Button
+// --------------------------------------------------
+
+/// @prop - Border color of the clear button
+$button-md-clear-border-color:                  transparent !default;
+
+/// @prop - Text color of the clear button
+$button-md-clear-text-color:                    $button-md-background-color !default;
+
+/// @prop - Background color of the clear button
+$button-md-clear-background-color:              transparent !default;
+
+/// @prop - Box shadow of the clear button
+$button-md-clear-box-shadow:                    none !default;
+
+/// @prop - Opacity of the clear button
+$button-md-clear-opacity:                       1 !default;
+
+/// @prop - Background color of the activated clear button
+$button-md-clear-background-color-activated:    rgba(158, 158, 158, .2) !default;
+
+/// @prop - Box shadow of the activated clear button
+$button-md-clear-box-shadow-activated:          $button-md-clear-box-shadow !default;
+
+/// @prop - Background color of the clear button on hover
+$button-md-clear-background-color-hover:        rgba(158, 158, 158, .1) !default;
+
+/// @prop - Background color of the ripple on the clear button
+$button-md-clear-ripple-background-color:       #999 !default;
+
+
+// Material Design Round Button
+// --------------------------------------------------
+
+/// @prop - Padding of the round button
+$button-md-round-padding:                       $button-round-padding !default;
+
+/// @prop - Border radius of the round button
+$button-md-round-border-radius:                 $button-round-border-radius !default;
+
+
+// Material Design FAB Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the FAB button
+$button-md-fab-border-radius:                   50% !default;
+
+/// @prop - Box shadow of the FAB button
+$button-md-fab-box-shadow:                      0 4px 6px 0 rgba(0, 0, 0, .14), 0 4px 5px rgba(0, 0, 0, .1) !default;
+
+/// @prop - Box shadow of the activated FAB button
+$button-md-fab-box-shadow-activated:            0 5px 15px 0 rgba(0, 0, 0, .4), 0 4px 7px 0 rgba(0, 0, 0, .1) !default;
+
+
 // Material Design Default Button
 // --------------------------------------------------
 
@@ -48,24 +188,24 @@ $button-md-small-icon-font-size:           1.4em !default;
   border-radius: $button-md-border-radius;
 
   font-size: $button-md-font-size;
-  font-weight: 500;
+  font-weight: $button-md-font-weight;
 
-  text-transform: uppercase;
+  text-transform: $button-md-text-transform;
   color: $button-md-text-color;
-  background-color: $button-md-color;
+  background-color: $button-md-background-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;
+  transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
+              background-color $button-md-transition-duration $button-md-transition-timing-function,
+              color $button-md-transition-duration $button-md-transition-timing-function;
 
   &:hover:not(.disable-hover) {
-    background-color: $button-md-color;
+    background-color: $button-md-background-color-hover;
   }
 
   &.activated {
-    background-color: $button-md-color-activated;
-    box-shadow: $button-md-box-shadow-active;
+    background-color: $button-md-background-color-activated;
+    box-shadow: $button-md-box-shadow-activated;
   }
 
   ion-button-effect {
@@ -93,7 +233,7 @@ $button-md-small-icon-font-size:           1.4em !default;
 
     &.activated {
       background-color: $background-color-activated;
-      opacity: 1;
+      opacity: $button-md-opacity-activated;
     }
 
     ion-button-effect {
@@ -108,7 +248,7 @@ $button-md-small-icon-font-size:           1.4em !default;
 // --------------------------------------------------
 
 .button-large {
-  padding: 0 $button-md-large-padding;
+  padding: $button-md-large-padding;
 
   height: $button-md-large-height;
 
@@ -116,13 +256,13 @@ $button-md-small-icon-font-size:           1.4em !default;
 }
 
 .button-small {
-  padding: 0 $button-md-small-padding;
+  padding: $button-md-small-padding;
 
   height: $button-md-small-height;
 
   font-size: $button-md-small-font-size;
 
-  &.button-icon-only ion-icon {
+  &[icon-only] ion-icon {
     font-size: $button-md-small-icon-font-size;
   }
 }
@@ -151,25 +291,25 @@ $button-md-small-icon-font-size:           1.4em !default;
 // --------------------------------------------------
 
 .button-outline {
-  border-width: 1px;
-  border-style: solid;
-  border-color: $button-md-color;
-  color: $button-md-color;
-  background-color: transparent;
-  box-shadow: none;
+  border-width: $button-md-outline-border-width;
+  border-style: $button-md-outline-border-style;
+  border-color: $button-md-outline-border-color;
+  color: $button-md-outline-text-color;
+  background-color: $button-md-outline-background-color;
+  box-shadow: $button-md-outline-box-shadow;
 
   &:hover:not(.disable-hover) {
-    background-color: $button-md-clear-hover-background-color;
+    background-color: $button-md-outline-background-color-hover;
   }
 
   &.activated {
-    background-color: transparent;
-    box-shadow: none;
-    opacity: 1;
+    background-color: $button-md-outline-background-color-activated;
+    box-shadow: $button-md-outline-box-shadow-activated;
+    opacity: $button-md-outline-opacity-activated;
   }
 
   ion-button-effect {
-    background-color: $button-md-color;
+    background-color: $button-md-outline-ripple-background-color;
   }
 }
 
@@ -183,14 +323,14 @@ $button-md-small-icon-font-size:           1.4em !default;
     $fg-color: color-shade($color-base, 5%);
     border-color: $fg-color;
     color: $fg-color;
-    background-color: transparent;
+    background-color: $button-md-outline-background-color;
 
     &:hover:not(.disable-hover) {
-      background-color: $button-md-clear-hover-background-color;
+      background-color: $button-md-outline-background-color-hover;
     }
 
     &.activated {
-      background-color: transparent;
+      background-color: $button-md-outline-background-color-activated;
     }
 
     ion-button-effect {
@@ -205,19 +345,19 @@ $button-md-small-icon-font-size:           1.4em !default;
 // --------------------------------------------------
 
 .button-clear {
-  border-color: transparent;
-  color: $button-md-color;
-  background-color: transparent;
-  box-shadow: none;
-  opacity: 1;
+  border-color: $button-md-clear-border-color;
+  color: $button-md-background-color;
+  background-color: $button-md-clear-background-color;
+  box-shadow: $button-md-clear-box-shadow;
+  opacity: $button-md-clear-opacity;
 
   &.activated {
-    background-color: $button-md-clear-active-background-color;
-    box-shadow: none;
+    background-color: $button-md-clear-background-color-activated;
+    box-shadow: $button-md-clear-box-shadow-activated;
   }
 
   &:hover:not(.disable-hover) {
-    background-color: $button-md-clear-hover-background-color;
+    background-color: $button-md-clear-background-color-hover;
   }
 
   ion-button-effect {
@@ -233,13 +373,13 @@ $button-md-small-icon-font-size:           1.4em !default;
 
   .button-clear-#{$color-name} {
     $fg-color: $color-base;
-    border-color: transparent;
+    border-color: $button-md-clear-border-color;
     color: $fg-color;
-    background-color: transparent;
+    background-color: $button-md-clear-background-color;
 
     &.activated {
-      background-color: $button-md-clear-active-background-color;
-      box-shadow: none;
+      background-color: $button-md-clear-background-color-activated;
+      box-shadow: $button-md-clear-box-shadow-activated;
     }
 
     &:hover:not(.disable-hover) {
@@ -253,9 +393,9 @@ $button-md-small-icon-font-size:           1.4em !default;
 // --------------------------------------------------
 
 .button-round {
-  padding: $button-round-padding;
+  padding: $button-md-round-padding;
 
-  border-radius: $button-round-border-radius;
+  border-radius: $button-md-round-border-radius;
 }
 
 
@@ -263,19 +403,19 @@ $button-md-small-icon-font-size:           1.4em !default;
 // --------------------------------------------------
 
 .button-fab {
-  border-radius: 50%;
+  border-radius: $button-md-fab-border-radius;
   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;
+  transition: box-shadow $button-md-transition-duration $button-md-transition-timing-function,
+              background-color $button-md-transition-duration $button-md-transition-timing-function,
+              color $button-md-transition-duration $button-md-transition-timing-function;
 
   &.activated {
-    box-shadow: $button-md-fab-box-shadow-active;
+    box-shadow: $button-md-fab-box-shadow-activated;
   }
 }
 
-.button-icon-only {
+[icon-only] {
   padding: 0;
 }
 
@@ -283,8 +423,6 @@ $button-md-small-icon-font-size:           1.4em !default;
 // Material Design Ripple Effect
 // --------------------------------------------------
 
-$ripple-background-color:       #555 !default;
-
 ion-button-effect {
   position: absolute;
   z-index: 0;
@@ -292,7 +430,7 @@ ion-button-effect {
 
   border-radius: 50%;
 
-  background-color: $ripple-background-color;
+  background-color: $button-md-ripple-background-color;
   opacity: .2;
 
   transition-timing-function: ease-in-out;
diff --git a/src/components/button/button.scss b/src/components/button/button.scss
index 06a3c787b0b..49ee3dbad10 100644
--- a/src/components/button/button.scss
+++ b/src/components/button/button.scss
@@ -3,7 +3,10 @@
 // Buttons
 // --------------------------------------------------
 
+/// @prop - Padding of the round button
 $button-round-padding:            0 2.6rem !default;
+
+/// @prop - Border radius of the round button
 $button-round-border-radius:      64px !default;
 
 
@@ -42,14 +45,14 @@ $button-round-border-radius:      64px !default;
   height: 100%;
 }
 
-a.button,
-a[button] {
+
+[ion-button] {
   text-decoration: none;
 }
 
 a[disabled],
 button[disabled],
-.button[disabled] {
+[ion-button][disabled] {
   cursor: default;
   opacity: .4;
 
@@ -79,22 +82,13 @@ button[disabled],
   display: block;
 
   width: 100%;
-
-  // Full Outline Button
-  // --------------------------------------------------
-  &.button-outline {
-    border-right-width: 0;
-    border-left-width: 0;
-    border-radius: 0;
-  }
 }
 
-
-// Round Button
+// Full Outline Button
 // --------------------------------------------------
 
-.button-round {
-  padding: $button-round-padding;
-
-  border-radius: $button-round-border-radius;
+.button-full.button-outline {
+  border-right-width: 0;
+  border-left-width: 0;
+  border-radius: 0;
 }
diff --git a/src/components/button/button.ts b/src/components/button/button.ts
index 79243d0984d..ca047753ef7 100644
--- a/src/components/button/button.ts
+++ b/src/components/button/button.ts
@@ -1,8 +1,8 @@
-import { Component, ElementRef, Renderer, Attribute, Optional, Input, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
+import { Attribute, ChangeDetectionStrategy, Component, ElementRef, Input, Optional, Renderer, ViewEncapsulation } from '@angular/core';
 
 import { Config } from '../../config/config';
-import { Toolbar } from '../toolbar/toolbar';
 import { isTrueProperty } from '../../util/util';
+import { Toolbar } from '../toolbar/toolbar';
 
 
 /**
@@ -30,18 +30,74 @@ import { isTrueProperty } from '../../util/util';
   * @property [fab-fixed] - Makes a fab button have a fixed position.
   * @property [color] - Dynamically set which predefined color this button should use (e.g. primary, secondary, danger, etc).
   *
+  * @usage
+  *
+  * ```html
+  *
+  *  <!-- Colors -->
+  *  <button ion-button>Default</button>
+  *
+  *  <button ion-button secondary>Secondary</button>
+  *
+  *  <button ion-button danger>Danger</button>
+  *
+  *  <button ion-button light>Light</button>
+  *
+  *  <button ion-button dark>Dark</button>
+  *
+  *  <!-- Shapes -->
+  *  <button ion-button full>Full Button</button>
+  *
+  *  <button ion-button block>Block Button</button>
+  *
+  *  <button ion-button round>Round Button</button>
+  *
+  *  <button ion-button fab>FAB</button>
+  *
+  *  <!-- Outline -->
+  *  <button ion-button full outline>Outline + Full</button>
+  *
+  *  <button ion-button block outline>Outline + Block</button>
+  *
+  *  <button ion-button round outline>Outline + Round</button>
+  *
+  *  <button ion-button fab outline>FAB</button>
+  *
+  *  <!-- Icons -->
+  *  <button ion-button icon-left>
+  *    <ion-icon name="star"></ion-icon>
+  *    Left Icon
+  *  </button>
+  *
+  *  <button ion-button icon-right>
+  *    Right Icon
+  *    <ion-icon name="star"></ion-icon>
+  *  </button>
+  *
+  *  <button ion-button icon-only>
+  *    <ion-icon name="star"></ion-icon>
+  *  </button>
+  *
+  *  <!-- Sizes -->
+  *  <button ion-button large>Large</button>
+  *
+  *  <button ion-button>Default</button>
+  *
+  *  <button ion-button small>Small</button>
+  * ```
+  *
   * @demo /docs/v2/demos/button/
   * @see {@link /docs/v2/components#buttons Button Component Docs}
  */
 @Component({
-  selector: 'button:not([ion-item]),[button]',
+  selector: '[ion-button]',
   // NOTE: template must not contain spaces between elements
   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 _role: string = 'button'; // bar-button
   private _size: string = null; // large/small/default
   private _style: string = 'default'; // outline/clear/solid
   private _shape: string = null; // round/fab
@@ -51,16 +107,6 @@ export class Button {
   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.
    */
@@ -161,41 +207,26 @@ export class Button {
   }
 
   constructor(
+    @Attribute('ion-button') ionButton: string,
     config: Config,
     private _elementRef: ElementRef,
-    private _renderer: Renderer,
-    @Attribute('ion-item') ionItem: string
+    private _renderer: Renderer
   ) {
-
-    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;
+      _renderer.setElementClass(element, 'disable-hover', true);
     }
 
     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);
+    if (ionButton.trim().length > 0) {
+      this.setRole(ionButton);
     }
+
+    this._readAttrs(element);
   }
 
   /**
@@ -203,7 +234,6 @@ export class Button {
    */
   ngAfterContentInit() {
     this._init = true;
-    this._readIcon(this._elementRef.nativeElement);
     this._assignCss(true);
   }
 
@@ -211,7 +241,6 @@ export class Button {
    * @private
    */
   ngAfterContentChecked() {
-    this._readIcon(this._elementRef.nativeElement);
     this._assignCss(true);
   }
 
@@ -228,58 +257,9 @@ export class Button {
   setRole(val: string) {
     this._assignCss(false);
     this._role = val;
-    this._readIcon(this._elementRef.nativeElement);
     this._assignCss(true);
   }
 
-  /**
-   * @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: Node;
-    let nodes: number[] = [];
-    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);
-        }
-      }
-    }
-
-    // Remove any classes that are set already
-    this._setClass(this._icon, false);
-
-    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
    */
diff --git a/src/components/button/button.wp.scss b/src/components/button/button.wp.scss
index de4e39e8587..cc20aa70cbf 100644
--- a/src/components/button/button.wp.scss
+++ b/src/components/button/button.wp.scss
@@ -4,46 +4,126 @@
 // 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;
+/// @prop - Margin of the button
+$button-wp-margin:                                        .4rem .2rem !default;
+
+/// @prop - Padding of the button
+$button-wp-padding:                                       0 1.1em !default;
+
+/// @prop - Height of the button
+$button-wp-height:                                        3.6rem !default;
+
+/// @prop - Border width of the button
+$button-wp-border-width:                                  3px !default;
+
+/// @prop - Border style of the button
+$button-wp-border-style:                                  solid !default;
+
+/// @prop - Border color of the button
+$button-wp-border-color:                                  transparent !default;
+
+/// @prop - Border radius of the button
+$button-wp-border-radius:                                 0 !default;
+
+/// @prop - Font size of the button text
+$button-wp-font-size:                                     1.4rem !default;
+
+/// @prop - Background color of the button
+$button-wp-background-color:                              color($colors-wp, primary) !default;
+
+/// @prop - Text color of the button
+$button-wp-text-color:                                    color-contrast($colors-wp, $button-wp-background-color) !default;
+
+/// @prop - Background color of the activated button
+$button-wp-background-color-activated:                    color-shade($button-wp-background-color) !default;
+
+
+// Windows Large Button
+// --------------------------------------------------
+
+/// @prop - Padding of the large button
+$button-wp-large-padding:                                 0 1em !default;
+
+/// @prop - Height of the large button
+$button-wp-large-height:                                  2.8em !default;
+
+/// @prop - Font size of the large button
+$button-wp-large-font-size:                               2rem !default;
+
+
+// Windows Small Button
+// --------------------------------------------------
+
+/// @prop - Padding of the small button
+$button-wp-small-padding:                                 0 .9em !default;
+
+/// @prop - Height of the small button
+$button-wp-small-height:                                  2.1em !default;
+
+/// @prop - Font size of the small button
+$button-wp-small-font-size:                               1.3rem !default;
+
+/// @prop - Font size of an icon in the small button
+$button-wp-small-icon-font-size:                          1.4em !default;
+
+
+// Windows Outline Button
+// --------------------------------------------------
+
+/// @prop - Border width of the outline button
+$button-wp-outline-border-width:                          1px !default;
+
+/// @prop - Border style of the outline button
+$button-wp-outline-border-style:                          solid !default;
+
+/// @prop - Border color of the outline button
+$button-wp-outline-border-color:                          $button-wp-background-color !default;
+
+/// @prop - Text color of the outline button
+$button-wp-outline-text-color:                            $button-wp-background-color !default;
+
+/// @prop - Background color of the outline button
+$button-wp-outline-background-color:                      transparent !default;
+
+/// @prop - Background color of the activated outline button
+$button-wp-outline-background-color-activated:            $button-wp-background-color !default;
+
+/// @prop - Opacity of the background color of the activated outline button
+$button-wp-outline-background-color-opacity-activated:    .16 !default;
+
+
+// Windows Clear Button
+// --------------------------------------------------
+
+/// @prop - Text color of the clear button
+$button-wp-clear-text-color:                              $button-wp-background-color !default;
+
+/// @prop - Background color of the clear button
+$button-wp-clear-background-color:                        transparent !default;
+
+/// @prop - Background color of the activated clear button
+$button-wp-clear-background-color-activated:              rgba(158, 158, 158, .2) !default;
+
+/// @prop - Background color of the clear button on hover
+$button-wp-clear-background-color-hover:                  rgba(158, 158, 158, .1) !default;
+
+
+// Windows Round Button
+// --------------------------------------------------
+
+/// @prop - Padding of the round button
+$button-wp-round-padding:                                 $button-round-padding !default;
+
+/// @prop - Border radius of the round button
+$button-wp-round-border-radius:                           $button-round-border-radius !default;
+
+
+// Windows FAB Button
+// --------------------------------------------------
+
+/// @prop - Border radius of the FAB button
+$button-wp-fab-border-radius:                             50% !default;
+
 
 // Windows Default Button
 // --------------------------------------------------
@@ -54,7 +134,7 @@ $button-wp-fab-border-radius:                         50% !default;
 
   height: $button-wp-height;
 
-  border: $button-wp-border-width solid $button-wp-border-color;
+  border: $button-wp-border-width $button-wp-border-style $button-wp-border-color;
   border-radius: $button-wp-border-radius;
 
   font-size: $button-wp-font-size;
@@ -117,7 +197,7 @@ $button-wp-fab-border-radius:                         50% !default;
 
   font-size: $button-wp-small-font-size;
 
-  &.button-icon-only ion-icon {
+  &[icon-only] ion-icon {
     font-size: $button-wp-small-icon-font-size;
   }
 }
@@ -147,7 +227,7 @@ $button-wp-fab-border-radius:                         50% !default;
 
 .button-outline {
   border-width: $button-wp-outline-border-width;
-  border-style: solid;
+  border-style: $button-wp-outline-border-style;
   border-color: $button-wp-outline-border-color;
   color: $button-wp-outline-text-color;
   background-color: $button-wp-outline-background-color;
@@ -157,7 +237,7 @@ $button-wp-fab-border-radius:                         50% !default;
   }
 
   &.activated {
-    background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity);
+    background-color: rgba($button-wp-outline-background-color-activated, $button-wp-outline-background-color-opacity-activated);
   }
 }
 
@@ -171,7 +251,7 @@ $button-wp-fab-border-radius:                         50% !default;
     $fg-color: color-shade($color-base, 5%);
     border-color: $fg-color;
     color: $fg-color;
-    background-color: transparent;
+    background-color: $button-wp-outline-background-color;
 
     &:hover:not(.disable-hover) {
       border-color: $fg-color;
@@ -179,7 +259,7 @@ $button-wp-fab-border-radius:                         50% !default;
     }
 
     &.activated {
-      background-color: rgba($fg-color, $button-wp-outline-background-color-opacity);
+      background-color: rgba($fg-color, $button-wp-outline-background-color-opacity-activated);
     }
   }
 
@@ -211,7 +291,7 @@ $button-wp-fab-border-radius:                         50% !default;
   .button-clear-#{$color-name} {
     $fg-color: $color-base;
     color: $fg-color;
-    background-color: transparent;
+    background-color: $button-wp-clear-background-color;
 
     &.activated {
       background-color: $button-wp-clear-background-color-activated;
@@ -228,9 +308,9 @@ $button-wp-fab-border-radius:                         50% !default;
 // --------------------------------------------------
 
 .button-round {
-  padding: $button-round-padding;
+  padding: $button-wp-round-padding;
 
-  border-radius: $button-round-border-radius;
+  border-radius: $button-wp-round-border-radius;
 }
 
 
@@ -241,7 +321,7 @@ $button-wp-fab-border-radius:                         50% !default;
   border-radius: $button-wp-fab-border-radius;
 }
 
-.button-icon-only {
+[icon-only] {
   padding: 0;
 }
 
diff --git a/src/components/button/test/basic/main.html b/src/components/button/test/basic/main.html
index fe7ea3b8659..9a98681e86d 100644
--- a/src/components/button/test/basic/main.html
+++ b/src/components/button/test/basic/main.html
@@ -10,42 +10,43 @@
 <ion-content padding style="text-align:center" no-bounce>
 
   <p>
-    <button><span>Default</span></button>
-    <button class="activated">Default.activated</button>
+    <button ion-button>Default</button>
+    <button ion-button class="activated">Default.activated</button>
   </p>
 
   <p>
-    <button primary>Primary</button>
-    <button primary class="activated">Primary.activated</button>
+    <button ion-button primary>Primary</button>
+    <button ion-button primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button secondary>Secondary</button>
-    <button secondary class="activated">Secondary.activated</button>
+    <button ion-button secondary>Secondary</button>
+    <button ion-button secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button danger>Danger</button>
-    <button danger class="activated">Danger.activated</button>
+    <button ion-button danger>Danger</button>
+    <button ion-button danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button light>Light</button>
-    <button light class="activated">Light.activated</button>
+    <button ion-button light>Light</button>
+    <button ion-button light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button dark>Dark</button>
-    <button dark class="activated">Dark.activated</button>
+    <button ion-button dark>Dark</button>
+    <button ion-button dark class="activated">Dark.activated</button>
   </p>
 
   <p>
-    <button disabled>Disabled</button>
+    <button ion-button disabled>Button Disabled</button>
+    <a ion-button disabled>A Disabled</a>
   </p>
 
   <p>
-    <button [color]="btnColor" (click)="chgColor()">Change Color</button>
-    <button outline [color]="btnColor" (click)="chgColor()">Change Color</button>
+    <button ion-button [color]="btnColor" (click)="chgColor()">Change Color</button>
+    <button ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/block/main.html b/src/components/button/test/block/main.html
index 828df55defa..1789705e5cd 100644
--- a/src/components/button/test/block/main.html
+++ b/src/components/button/test/block/main.html
@@ -10,37 +10,37 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <a button block href="#">a[button][block]</a>
-    <button block>button[block]</button>
+    <a ion-button block href="#">a[ion-button][block]</a>
+    <button ion-button block>button[ion-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>
+    <a ion-button block href="#" icon-left><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
+    <button ion-button block icon-left><ion-icon name="help-circle"></ion-icon> button[ion-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>
+    <a ion-button block outline secondary href="#">a[ion-button][block][outline][secondary]</a>
+    <button ion-button block outline secondary>button[ion-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>
+    <a ion-button block clear dark href="#">a[ion-button][block][clear][dark]</a>
+    <button ion-button block clear dark>button[ion-button][clear][block][dark]</button>
   </p>
 
   <p>
-    <a button block round href="#">a[button][block][round]</a>
-    <button block round>button[block][round]</button>
+    <a ion-button block round href="#">a[ion-button][block][round]</a>
+    <button ion-button block round>button[ion-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>
+    <a ion-button block round outline href="#">a[ion-button][block][round][outline]</a>
+    <button ion-button block round outline>button[ion-button][block][round][outline]</button>
   </p>
 
   <p>
-    <button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
+    <button ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/clear/main.html b/src/components/button/test/clear/main.html
index c52c3f33890..a2bc09c2af3 100644
--- a/src/components/button/test/clear/main.html
+++ b/src/components/button/test/clear/main.html
@@ -10,37 +10,37 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <button clear>Default</button>
-    <button clear class="activated">Default.activated</button>
+    <button ion-button clear>Default</button>
+    <button ion-button clear class="activated">Default.activated</button>
   </p>
 
   <p>
-    <button clear primary>Primary</button>
-    <button clear primary class="activated">Primary.activated</button>
+    <button ion-button clear primary>Primary</button>
+    <button ion-button clear primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button clear secondary>Secondary</button>
-    <button clear secondary class="activated">Secondary.activated</button>
+    <button ion-button clear secondary>Secondary</button>
+    <button ion-button clear secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button clear danger>Danger</button>
-    <button clear danger class="activated">Danger.activated</button>
+    <button ion-button clear danger>Danger</button>
+    <button ion-button clear danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button clear light>Light</button>
-    <button clear light class="activated">Light.activated</button>
+    <button ion-button clear light>Light</button>
+    <button ion-button clear light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button clear dark>Dark</button>
-    <button clear dark class="activated">Dark.activated</button>
+    <button ion-button clear dark>Dark</button>
+    <button ion-button clear dark class="activated">Dark.activated</button>
   </p>
 
   <p>
-    <button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
+    <button ion-button [clear]="clearButton" (click)="toggleClear()">Toggle Clear</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/dynamic/main.html b/src/components/button/test/dynamic/main.html
index 77b64592903..12039a6d04e 100644
--- a/src/components/button/test/dynamic/main.html
+++ b/src/components/button/test/dynamic/main.html
@@ -2,12 +2,12 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <button danger *ngIf="showIf">ngIf</button>
-      <button [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Outline</button>
+      <button ion-button danger *ngIf="showIf">ngIf</button>
+      <button ion-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>
+      <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [solid]="isSolid">Solid</button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -16,19 +16,19 @@
 
 <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>
+  <button ion-button block [solid]="isSolid">Solid</button>
+  <button ion-button block [color]="isDestructive ? 'danger' : 'primary'" [outline]="isOutline">Danger (Outline)</button>
+  <button ion-button block [color]="isSecondary ? 'secondary' : 'primary'"  [clear]="isClear">Secondary (Clear)</button>
+  <button ion-button block [color]="myColor1" [round]="isCustom">Custom #1</button>
+  <button ion-button block [color]="myColor2" [outline]="isOutline" [round]="isCustom">Custom #2 (Outline)</button>
+  <button ion-button block primary light [clear]="isClear" [round]="isCustom">Multicolor (Clear)</button>
+  <button ion-button block danger dark [outline]="isOutline" [round]="isCustom">Multicolor (Outline)</button>
+  <button ion-button block [color]="multiColor" [outline]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Outline (Toggle)</button>
+  <button ion-button block [color]="multiColor" [clear]="isClicked" [round]="isCustom" (click)="toggle()">Multicolor Clear (Toggle)</button>
   <hr/>
-  <button block outline danger (click)="showIf = !showIf">Toggle Header</button>
+  <button ion-button block outline danger (click)="showIf = !showIf">Toggle Header</button>
   <hr/>
-  <button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
-  <button block clear danger (click)="reset()">Reset all buttons</button>
+  <button ion-button block outline danger (click)="unify()" class="e2eButtonDynamicUnify">Unify all buttons</button>
+  <button ion-button block clear danger (click)="reset()">Reset all buttons</button>
 
 </ion-content>
diff --git a/src/components/button/test/fab/main.html b/src/components/button/test/fab/main.html
index f993130f7a7..ce3489abb5d 100644
--- a/src/components/button/test/fab/main.html
+++ b/src/components/button/test/fab/main.html
@@ -1,25 +1,25 @@
 <ion-content>
-  <button fab fab-left fab-top>
+  <button ion-button fab fab-left fab-top>
     <ion-icon name="add"></ion-icon>
   </button>
 
-  <button fab fab-center fab-top secondary>
+  <button ion-button fab fab-center fab-top secondary>
     <ion-icon name="add"></ion-icon>
   </button>
 
-  <button fab fab-right fab-top danger>
+  <button ion-button fab fab-right fab-top danger>
     <ion-icon name="add"></ion-icon>
   </button>
 
-  <button fab fab-left fab-bottom light>
+  <button ion-button fab fab-left fab-bottom light>
     <ion-icon name="add"></ion-icon>
   </button>
 
-  <button fab fab-center fab-bottom primary>
+  <button ion-button fab fab-center fab-bottom primary>
     <ion-icon name="add"></ion-icon>
   </button>
 
-  <button fab fab-right fab-bottom dark>
+  <button ion-button fab fab-right fab-bottom dark>
     <ion-icon name="add"></ion-icon>
   </button>
 </ion-content>
diff --git a/src/components/button/test/full/main.html b/src/components/button/test/full/main.html
index d135a8aa54a..e607201be8b 100644
--- a/src/components/button/test/full/main.html
+++ b/src/components/button/test/full/main.html
@@ -10,34 +10,34 @@
 <ion-content>
 
   <p>
-    <a button full href="#">a[button][full]</a>
-    <button full>button[full]</button>
+    <a ion-button full href="#">a[ion-button][full]</a>
+    <button ion-button full>button[ion-button][full]</button>
   </p>
 
   <p>
-    <a button full href="#">
+    <a ion-button full href="#" icon-left>
       <ion-icon name="help-circle"></ion-icon>
-      a[button][full] + icon
+      a[ion-button][full] + icon
     </a>
-    <button full>
+    <button ion-button full icon-left>
       <ion-icon name="help-circle"></ion-icon>
-      button[full] + icon
+      button[ion-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>
+    <a ion-button full outline secondary href="#">a[ion-button][full][outline][secondary]</a>
+    <button ion-button full outline secondary>button[ion-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>
+    <a ion-button full clear light href="#">a[ion-button][full][clear][light]</a>
+    <button ion-button full clear light>button[ion-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>
+    <a ion-button full clear dark href="#">a[ion-button][full][clear][dark]</a>
+    <button ion-button full clear dark>button[ion-button][full][clear][dark]</button>
   </p>
 
-</ion-content>
\ No newline at end of file
+</ion-content>
diff --git a/src/components/button/test/icons/main.html b/src/components/button/test/icons/main.html
index 081c17c2edf..478de32a984 100644
--- a/src/components/button/test/icons/main.html
+++ b/src/components/button/test/icons/main.html
@@ -10,94 +10,94 @@
 <ion-content padding>
 
   <div>
-    <button>
+    <button ion-button icon-left>
       <ion-icon name="home"></ion-icon>
       Left Icon
     </button>
-    <a button>
+    <a ion-button icon-left>
       <ion-icon name="home"></ion-icon>
       Left Icon
     </a>
   </div>
 
   <div>
-    <button>
+    <button ion-button icon-right>
       Right Icon
       <ion-icon name="star"></ion-icon>
     </button>
-    <a button>
+    <a ion-button icon-right>
       Right Icon
       <ion-icon name="star"></ion-icon>
     </a>
   </div>
 
   <div>
-    <button>
+    <button ion-button icon-only>
       <ion-icon name="flag"></ion-icon>
     </button>
-    <a button>
+    <a ion-button icon-only>
       <ion-icon name="flag"></ion-icon>
     </a>
   </div>
 
   <div>
-    <button large>
+    <button ion-button large icon-left>
       <ion-icon name="help-circle"></ion-icon>
       Left, Large
     </button>
-    <a button large>
+    <a ion-button large icon-left>
       <ion-icon name="help-circle"></ion-icon>
       Left, Large
     </a>
   </div>
 
   <div>
-    <button large>
+    <button ion-button large icon-right>
       Right, Large
       <ion-icon name="settings"></ion-icon>
     </button>
-    <a button large>
+    <a ion-button large icon-right>
       Right, Large
       <ion-icon name="settings"></ion-icon>
     </a>
   </div>
 
   <div>
-    <button large>
+    <button ion-button large icon-only>
       <ion-icon name="heart"></ion-icon>
     </button>
-    <a button large>
+    <a ion-button large icon-only>
       <ion-icon name="heart"></ion-icon>
     </a>
   </div>
 
   <div>
-    <button small>
+    <button ion-button small icon-left>
       <ion-icon name="checkmark"></ion-icon>
       Left, Small
     </button>
-    <a button small>
+    <a ion-button small icon-left>
       <ion-icon name="checkmark"></ion-icon>
       Left, Small
     </a>
   </div>
 
   <div>
-    <button small>
+    <button ion-button small icon-right>
       Right, Small
       <ion-icon name="arrow-forward"></ion-icon>
     </button>
-    <a button small>
+    <a ion-button small icon-right>
       Right, Small
       <ion-icon name="arrow-forward"></ion-icon>
     </a>
   </div>
 
   <div>
-    <button small>
+    <button ion-button small icon-only>
       <ion-icon name="search"></ion-icon>
     </button>
-    <a button small>
+    <a ion-button small icon-only>
       <ion-icon name="search"></ion-icon>
     </a>
   </div>
diff --git a/src/components/button/test/outline/main.html b/src/components/button/test/outline/main.html
index 50043c32840..bb1bade8cd2 100644
--- a/src/components/button/test/outline/main.html
+++ b/src/components/button/test/outline/main.html
@@ -10,53 +10,53 @@
 <ion-content padding style="text-align:center" class="outer-content">
 
   <p>
-    <button outline>Default</button>
-    <button outline class="activated">Default.activated</button>
+    <button ion-button outline>Default</button>
+    <button ion-button outline class="activated">Default.activated</button>
   </p>
 
   <p>
-    <button outline primary>Primary</button>
-    <button outline primary class="activated">Primary.activated</button>
+    <button ion-button outline primary>Primary</button>
+    <button ion-button outline primary class="activated">Primary.activated</button>
   </p>
 
   <p>
-    <button outline secondary>Secondary</button>
-    <button outline secondary class="activated">Secondary.activated</button>
+    <button ion-button outline secondary>Secondary</button>
+    <button ion-button outline secondary class="activated">Secondary.activated</button>
   </p>
 
   <p>
-    <button outline danger>Danger</button>
-    <button outline danger class="activated">Danger.activated</button>
+    <button ion-button outline danger>Danger</button>
+    <button ion-button outline danger class="activated">Danger.activated</button>
   </p>
 
   <p>
-    <button outline light>Light</button>
-    <button outline light class="activated">Light.activated</button>
+    <button ion-button outline light>Light</button>
+    <button ion-button outline light class="activated">Light.activated</button>
   </p>
 
   <p>
-    <button outline dark>Dark</button>
-    <button outline dark class="activated">Dark.activated</button>
+    <button ion-button outline dark>Dark</button>
+    <button ion-button outline dark class="activated">Dark.activated</button>
   </p>
 
   <p>
-    <button outline block>button[outline][block]</button>
+    <button ion-button outline block>button[ion-button][outline][block]</button>
   </p>
 
   <p>
-    <button outline block class="activated">[outline][block].activated</button>
+    <button ion-button outline block class="activated">[outline][block].activated</button>
   </p>
 
   <p>
-    <button outline block secondary>button[outline][block][secondary]</button>
+    <button ion-button outline block secondary>button[ion-button][outline][block][secondary]</button>
   </p>
 
   <p>
-    <button outline block secondary class="activated">[outline][block][secondary].activated</button>
+    <button ion-button outline block secondary class="activated">[outline][block][secondary].activated</button>
   </p>
 
   <p>
-    <button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
+    <button ion-button [outline]="outlineButton" (click)="toggleOutline()">Toggle Outline</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/raised/main.html b/src/components/button/test/raised/main.html
index cd85adc1fd9..243de903f90 100644
--- a/src/components/button/test/raised/main.html
+++ b/src/components/button/test/raised/main.html
@@ -10,37 +10,37 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <button raised><span>Default</span></button>
-    <button raised raised class="activated">Default.activated</button>
+    <button ion-button raised><span>Default</span></button>
+    <button ion-button raised raised class="activated">Default.activated</button>
   </p>
 
   <p>
-    <button raised outline>Outline</button>
-    <button raised outline class="activated">Outline.activated</button>
+    <button ion-button raised outline>Outline</button>
+    <button ion-button raised outline class="activated">Outline.activated</button>
   </p>
 
   <p>
-    <button raised clear>Clear</button>
-    <button raised clear class="activated">Clear.activated</button>
+    <button ion-button raised clear>Clear</button>
+    <button ion-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>
+    <button ion-button raised fab style="position: relative">FAB</button>
+    <button ion-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>
+    <button ion-button raised round>Round</button>
+    <button ion-button raised round class="activated">Round.activated</button>
   </p>
 
   <p>
-    <button raised block>Block</button>
-    <button raised block class="activated">Block.activated</button>
+    <button ion-button raised block>Block</button>
+    <button ion-button raised block class="activated">Block.activated</button>
   </p>
 
   <p>
-    <button raised clear disabled>Clear Disabled</button>
+    <button ion-button raised clear disabled>Clear Disabled</button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/round/main.html b/src/components/button/test/round/main.html
index e18627e16a5..35657ce3083 100644
--- a/src/components/button/test/round/main.html
+++ b/src/components/button/test/round/main.html
@@ -9,17 +9,17 @@
 
 <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>
+  <button ion-button round>button</button>
+  <button ion-button round light>button light</button>
+  <button ion-button round secondary>button secondary</button>
+  <button ion-button round danger>button danger</button>
+  <button ion-button round dark>button dark</button>
+
+  <button ion-button round outline>button</button>
+  <button ion-button round light outline>button light</button>
+  <button ion-button round secondary outline>button secondary</button>
+  <button ion-button round danger outline>button danger</button>
+  <button ion-button round dark outline>button dark</button>
 
 </ion-content>
 
diff --git a/src/components/button/test/sizes/main.html b/src/components/button/test/sizes/main.html
index c816c4719c6..040754c000a 100644
--- a/src/components/button/test/sizes/main.html
+++ b/src/components/button/test/sizes/main.html
@@ -10,28 +10,28 @@
 <ion-content padding>
 
   <p>
-    <a button href="#">a[button]</a>
-    <button>button</button>
+    <a ion-button href="#">a[ion-button]</a>
+    <button ion-button>button</button>
   </p>
 
   <p>
-    <a button small href="#">a[button][small]</a>
-    <button small>button[small]</button>
+    <a ion-button small href="#">a[ion-button][small]</a>
+    <button ion-button small>button[ion-button][small]</button>
   </p>
 
   <p>
-    <a button outline small href="#">a[button][outline][small]</a>
-    <button outline small>button[outline][small]</button>
+    <a ion-button outline small href="#">a[ion-button][outline][small]</a>
+    <button ion-button outline small>button[ion-button][outline][small]</button>
   </p>
 
   <p>
-    <a button clear small href="#">a[button][clear][small]</a>
-    <button clear small>button[clear][small]</button>
+    <a ion-button clear small href="#">a[ion-button][clear][small]</a>
+    <button ion-button clear small>button[ion-button][clear][small]</button>
   </p>
 
   <p>
-    <button large>[large]</button>
-    <a button large href="#">
+    <button ion-button large>[large]</button>
+    <a 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>
@@ -40,13 +40,13 @@
   </p>
 
   <p>
-    <a button outline large href="#">a[button][outline][large]</a>
-    <button outline large>button[outline][large]</button>
+    <a ion-button outline large href="#">a[ion-button][outline][large]</a>
+    <button ion-button outline large>button[ion-button][outline][large]</button>
   </p>
 
   <p>
-    <a button clear large href="#">a[clear][large]</a>
-    <button clear large>button[clear][large]</button>
+    <a ion-button clear large href="#">a[clear][large]</a>
+    <button ion-button clear large>button[ion-button][clear][large]</button>
   </p>
 
 </ion-content>
diff --git a/src/components/card/test/advanced/main.html b/src/components/card/test/advanced/main.html
index d84e9487f74..14b5fdc22d5 100644
--- a/src/components/card/test/advanced/main.html
+++ b/src/components/card/test/advanced/main.html
@@ -28,13 +28,13 @@
     <ion-grid>
       <ion-row>
         <ion-col no-padding>
-          <button clear small>
+          <button ion-button icon-left clear small>
             <ion-icon name="star"></ion-icon>
             Star
           </button>
         </ion-col>
         <ion-col no-padding text-right>
-          <button clear small class="activated">
+          <button ion-button icon-left clear small class="activated">
             <ion-icon name="share"></ion-icon>
             Activated
           </button>
@@ -66,19 +66,19 @@ <h2>Card With An Inset Picture</h2>
     <ion-grid>
       <ion-row>
         <ion-col no-padding>
-          <button clear small>
+          <button ion-button icon-left clear small>
             <ion-icon name="star"></ion-icon>
             Favorite
           </button>
         </ion-col>
         <ion-col no-padding text-center>
-          <button clear small>
+          <button ion-button icon-left clear small>
             <ion-icon name="musical-notes"></ion-icon>
             Listen
           </button>
         </ion-col>
         <ion-col no-padding text-right>
-          <button clear small danger class="activated">
+          <button ion-button icon-left clear small danger class="activated">
             <ion-icon name="share"></ion-icon>
             Activated
           </button>
@@ -100,20 +100,20 @@ <h2>Card With An Inset Picture</h2>
     <ion-grid>
       <ion-row>
         <ion-col no-padding>
-          <button clear small dark>
+          <button ion-button icon-left clear small dark>
             <ion-icon name="star"></ion-icon>
             Favorite
           </button>
         </ion-col>
 
         <ion-col no-padding text-center>
-          <button clear small dark>
+          <button ion-button icon-left clear small dark>
             <ion-icon name="musical-notes"></ion-icon>
             Listen
           </button>
         </ion-col>
         <ion-col no-padding text-right>
-          <button clear small dark>
+          <button ion-button icon-left clear small dark>
             <ion-icon name="share-alt"></ion-icon>
             Share
           </button>
diff --git a/src/components/card/test/basic/main.html b/src/components/card/test/basic/main.html
index 92d3bb3f57c..688be7bca0f 100644
--- a/src/components/card/test/basic/main.html
+++ b/src/components/card/test/basic/main.html
@@ -28,7 +28,7 @@
     <ion-item>
       <ion-icon name="pin" item-left></ion-icon>
       ion-item in a card, icon left, button right
-      <button outline item-right>View</button>
+      <button ion-button outline item-right>View</button>
     </ion-item>
 
     <ion-card-content>
diff --git a/src/components/card/test/map/main.html b/src/components/card/test/map/main.html
index a94a79ae7a3..60674b26aed 100644
--- a/src/components/card/test/map/main.html
+++ b/src/components/card/test/map/main.html
@@ -12,7 +12,7 @@
   <ion-card>
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    <button fab fab-right fab-top>
+    <button ion-button icon-only fab fab-right fab-top>
       <ion-icon name="pin"></ion-icon>
     </button>
 
@@ -31,7 +31,7 @@ <h2>Institute of Fine Cocktails</h2>
     <ion-item>
       <span item-left>18 min</span>
       <span item-left>(2.6 mi)</span>
-      <button primary clear item-right>
+      <button ion-button icon-left primary clear item-right>
         <ion-icon name="navigate"></ion-icon>
         Start
       </button>
@@ -42,7 +42,7 @@ <h2>Institute of Fine Cocktails</h2>
   <ion-card>
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    <button danger fab fab-right fab-top>
+    <button ion-button danger fab fab-right fab-top>
       <ion-icon name="pin"></ion-icon>
     </button>
 
@@ -61,7 +61,7 @@ <h2>Forest of Illusion</h2>
     <ion-item>
       <span item-left>3 hr</span>
       <span item-left>(4.8 mi)</span>
-      <button danger clear item-right>
+      <button ion-button icon-left danger clear item-right>
         <ion-icon name="navigate"></ion-icon>
         Start
       </button>
@@ -72,7 +72,7 @@ <h2>Forest of Illusion</h2>
   <ion-card>
 
     <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
-    <button secondary fab fab-right fab-top>
+    <button ion-button secondary fab fab-right fab-top>
       <ion-icon name="pin"></ion-icon>
     </button>
 
@@ -91,7 +91,7 @@ <h2>General Pharmacy</h2>
     <ion-item>
       <span item-left secondary>26 min</span>
       <span item-left>(8.1 mi)</span>
-      <button secondary clear item-right>
+      <button ion-button icon-left secondary clear item-right>
         <ion-icon name="navigate"></ion-icon>
         Start
       </button>
diff --git a/src/components/card/test/social/main.html b/src/components/card/test/social/main.html
index c507a681107..8550de4fe1b 100644
--- a/src/components/card/test/social/main.html
+++ b/src/components/card/test/social/main.html
@@ -26,11 +26,11 @@ <h2>Marty McFly</h2>
     </ion-card-content>
 
     <ion-item>
-      <button primary clear item-left>
+      <button ion-button icon-left primary clear item-left>
         <ion-icon name="thumbs-up"></ion-icon>
         <div>12 Likes</div>
       </button>
-      <button primary clear item-left>
+      <button ion-button icon-left primary clear item-left>
         <ion-icon name="text"></ion-icon>
         <div>4 Comments</div>
       </button>
@@ -59,11 +59,11 @@ <h2>Sarah Connor</h2>
     </ion-card-content>
 
     <ion-item>
-      <button primary clear item-left>
+      <button ion-button icon-left primary clear item-left>
         <ion-icon name="thumbs-up"></ion-icon>
         <div>30 Likes</div>
       </button>
-      <button primary clear item-left>
+      <button ion-button icon-left primary clear item-left>
         <ion-icon name="text"></ion-icon>
         <div>64 Comments</div>
       </button>
@@ -91,11 +91,11 @@ <h2>Dr. Ian Malcolm</h2>
     </ion-card-content>
 
     <ion-item>
-      <button primary clear item-left>
+      <button ion-button icon-left primary clear item-left>
         <ion-icon name="thumbs-up"></ion-icon>
         <div>46 Likes</div>
       </button>
-      <button primary clear item-left>
+      <button ion-button icon-left primary clear item-left>
         <ion-icon name="text"></ion-icon>
         <div>66 Comments</div>
       </button>
diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts
index f41d8ef18cb..4ce1a2f32e9 100644
--- a/src/components/checkbox/checkbox.ts
+++ b/src/components/checkbox/checkbox.ts
@@ -53,14 +53,13 @@ export const CHECKBOX_VALUE_ACCESSOR = new Provider(
     <div class="checkbox-icon" [class.checkbox-checked]="_checked">
       <div class="checkbox-inner"></div>
     </div>
-    <button role="checkbox"
+    <button ion-button="item-cover"
+            role="checkbox"
             type="button"
-            category="item-cover"
             [id]="id"
             [attr.aria-checked]="_checked"
             [attr.aria-labelledby]="_labelId"
-            [attr.aria-disabled]="_disabled"
-            class="item-cover">
+            [attr.aria-disabled]="_disabled">
     </button>
   `,
   host: {
diff --git a/src/components/checkbox/test/basic/main.html b/src/components/checkbox/test/basic/main.html
index 0ecb3fe5a32..8466f8cad48 100644
--- a/src/components/checkbox/test/basic/main.html
+++ b/src/components/checkbox/test/basic/main.html
@@ -63,9 +63,9 @@
   </form>
 
   <p aria-hidden="true" text-center>
-    <button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
-    <button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
-    <button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
+    <button ion-button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
+    <button ion-button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
+    <button ion-button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
   </p>
 
   <p>
diff --git a/src/components/chip/test/delete/main.html b/src/components/chip/test/delete/main.html
index c583d22ec8b..910a4d28a90 100644
--- a/src/components/chip/test/delete/main.html
+++ b/src/components/chip/test/delete/main.html
@@ -12,7 +12,7 @@
   <p>
     <ion-chip>
       <ion-label>Default</ion-label>
-      <button clear dark (click)="deleteClicked()">
+      <button ion-button icon-only clear dark (click)="deleteClicked()">
         <ion-icon name="close-circle"></ion-icon>
       </button>
     </ion-chip>
@@ -22,7 +22,7 @@
     <ion-chip>
       <ion-icon name="pin" primary></ion-icon>
       <ion-label>Primary</ion-label>
-      <button clear dark (click)="deleteClicked()">
+      <button ion-button icon-only clear dark (click)="deleteClicked()">
         <ion-icon name="close-circle"></ion-icon>
       </button>
     </ion-chip>
@@ -34,7 +34,7 @@
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
       </ion-avatar>
       <ion-label>Default</ion-label>
-      <button clear dark (click)="deleteClicked()">
+      <button ion-button icon-only clear dark (click)="deleteClicked()">
         <ion-icon name="close-circle"></ion-icon>
       </button>
     </ion-chip>
diff --git a/src/components/content/content.ts b/src/components/content/content.ts
index efe3b25df05..dba362cb525 100644
--- a/src/components/content/content.ts
+++ b/src/components/content/content.ts
@@ -61,7 +61,7 @@ import { isTrueProperty } from '../../util/util';
  *       </ion-toolbar>
  *     </ion-header>
  *     <ion-content>
- *       <button (click)="toggleToolbar()">Toggle Toolbar</button>
+ *       <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
  *     </ion-content>
  * `})
  *
@@ -85,7 +85,7 @@ import { isTrueProperty } from '../../util/util';
  *
  * @Component({
  *   template: `<ion-content>
- *                <button (click)="scrollTo()">Down 500px</button>
+ *                <button ion-button (click)="scrollTo()">Down 500px</button>
  *              </ion-content>`
  * )}
  * export class MyPage{
diff --git a/src/components/content/test/basic/main.html b/src/components/content/test/basic/main.html
index 20d0efeb9f1..aae65990598 100644
--- a/src/components/content/test/basic/main.html
+++ b/src/components/content/test/basic/main.html
@@ -2,7 +2,7 @@
   <ion-navbar style="opacity: 0.8">
     <ion-title>Main</ion-title>
     <ion-buttons right>
-      <button [navPush]="page1">
+      <button ion-button icon-right [navPush]="page1">
         Next
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
@@ -16,7 +16,7 @@
 <ion-content>
   <b>This page has a header and content but no footer or tabs.</b>
 
-  <button (click)="toggleToolbar()">Toggle Toolbar</button>
+  <button ion-button (click)="toggleToolbar()">Toggle Toolbar</button>
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.
 
diff --git a/src/components/content/test/basic/page1.html b/src/components/content/test/basic/page1.html
index beba9d7b4b8..7b5e798c830 100644
--- a/src/components/content/test/basic/page1.html
+++ b/src/components/content/test/basic/page1.html
@@ -1,7 +1,7 @@
 <ion-content>
   <b>This page has content but no toolbars or tabs.</b>
 
-  <button small outline [navPush]="page2">Next</button>
+  <button ion-button small outline [navPush]="page2">Next</button>
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.
 
diff --git a/src/components/content/test/basic/page2.html b/src/components/content/test/basic/page2.html
index 482b24cbd60..6b5be8df15f 100644
--- a/src/components/content/test/basic/page2.html
+++ b/src/components/content/test/basic/page2.html
@@ -2,7 +2,7 @@
   <ion-navbar style="opacity: 0.8">
     <ion-title>Page 2</ion-title>
     <ion-buttons right>
-      <button [navPush]="page3">
+      <button ion-button icon-right [navPush]="page3">
         Next
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/src/components/content/test/basic/page3.html b/src/components/content/test/basic/page3.html
index 7c475b668ed..892e2f248fa 100644
--- a/src/components/content/test/basic/page3.html
+++ b/src/components/content/test/basic/page3.html
@@ -2,7 +2,7 @@
   <ion-navbar style="opacity: 0.8" no-border-bottom>
     <ion-title>Page 3</ion-title>
     <ion-buttons right>
-      <button [navPush]="page4">
+      <button ion-button icon-right [navPush]="page4">
         Next
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/src/components/content/test/basic/page4.html b/src/components/content/test/basic/page4.html
index 98638c046b2..2cd5fe38b0f 100644
--- a/src/components/content/test/basic/page4.html
+++ b/src/components/content/test/basic/page4.html
@@ -2,7 +2,7 @@
   <ion-navbar style="opacity: 0.8">
     <ion-title>Page 4</ion-title>
     <ion-buttons right>
-      <button [navPush]="tabsPage">
+      <button ion-button icon-right [navPush]="tabsPage">
         Next
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/src/components/content/test/fullscreen/main.html b/src/components/content/test/fullscreen/main.html
index ab77c112249..b4670dec37e 100644
--- a/src/components/content/test/fullscreen/main.html
+++ b/src/components/content/test/fullscreen/main.html
@@ -2,7 +2,7 @@
   <ion-navbar style="opacity: 0.8">
     <ion-title>Main</ion-title>
     <ion-buttons right>
-      <button [navPush]="page1">
+      <button ion-button icon-right [navPush]="page1">
         Next
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/src/components/content/test/fullscreen/page1.html b/src/components/content/test/fullscreen/page1.html
index 488192a5ea8..ce27a070e36 100644
--- a/src/components/content/test/fullscreen/page1.html
+++ b/src/components/content/test/fullscreen/page1.html
@@ -1,7 +1,7 @@
 <ion-content fullscreen>
   <b>This page has content but no toolbars or tabs.</b>
 
-  <button small outline [navPush]="page2">Next</button>
+  <button ion-button small outline [navPush]="page2">Next</button>
 
   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi scelerisque dolor lacus, ut vehicula arcu dapibus id. Morbi iaculis fermentum blandit. Curabitur tempus, ante et vehicula tempor, urna velit rutrum massa, quis suscipit purus lacus eget est. Sed nisi nulla, tempus id dictum a, cursus ut felis. Aliquam orci magna, rutrum nec tempor ac, fermentum quis eros. Sed ullamcorper felis sit amet tristique sagittis. Nullam sed tempus mi. Morbi sit amet lacinia leo. Nunc facilisis orci id consectetur dignissim. Integer dictum consectetur enim. Vivamus auctor, turpis ut eleifend pharetra, purus magna mattis arcu, vel pharetra tellus orci eget ex. Integer blandit posuere vehicula. Ut ipsum lorem, efficitur vitae eleifend tincidunt, fermentum nec lacus. Ut nec fermentum dui.
 
diff --git a/src/components/content/test/fullscreen/page2.html b/src/components/content/test/fullscreen/page2.html
index 6df4c884333..cac58fe1cda 100644
--- a/src/components/content/test/fullscreen/page2.html
+++ b/src/components/content/test/fullscreen/page2.html
@@ -2,7 +2,7 @@
   <ion-navbar style="opacity: 0.8">
     <ion-title>Page 2</ion-title>
     <ion-buttons right>
-      <button [navPush]="page3">
+      <button ion-button icon-right [navPush]="page3">
         Next
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/src/components/content/test/fullscreen/page3.html b/src/components/content/test/fullscreen/page3.html
index f78d40fab9c..7342e8cae93 100644
--- a/src/components/content/test/fullscreen/page3.html
+++ b/src/components/content/test/fullscreen/page3.html
@@ -2,7 +2,7 @@
   <ion-navbar style="opacity: 0.8" no-border-bottom>
     <ion-title>Page 3</ion-title>
     <ion-buttons right>
-      <button [navPush]="page4">
+      <button ion-button icon-right [navPush]="page4">
         Next
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/src/components/content/test/fullscreen/page4.html b/src/components/content/test/fullscreen/page4.html
index 807e99310ea..6ee98a1aa53 100644
--- a/src/components/content/test/fullscreen/page4.html
+++ b/src/components/content/test/fullscreen/page4.html
@@ -2,7 +2,7 @@
   <ion-navbar style="opacity: 0.8">
     <ion-title>Page 4</ion-title>
     <ion-buttons right>
-      <button [navPush]="tabsPage">
+      <button ion-button icon-right [navPush]="tabsPage">
         Next
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
diff --git a/src/components/datetime/datetime.ts b/src/components/datetime/datetime.ts
index 796f762b448..7a859cfe8a6 100644
--- a/src/components/datetime/datetime.ts
+++ b/src/components/datetime/datetime.ts
@@ -249,13 +249,12 @@ export const DATETIME_VALUE_ACCESSOR = new Provider(
   selector: 'ion-datetime',
   template: `
     <div class="datetime-text">{{_text}}</div>
-    <button aria-haspopup="true"
+    <button ion-button="item-cover" 
+            aria-haspopup="true"
             type="button"
             [id]="id"
-            category="item-cover"
             [attr.aria-labelledby]="_labelId"
-            [attr.aria-disabled]="_disabled"
-            class="item-cover">
+            [attr.aria-disabled]="_disabled">
     </button>
   `,
   host: {
diff --git a/src/components/datetime/test/basic/main.html b/src/components/datetime/test/basic/main.html
index 2a73c8c7d52..dc0b28fc620 100644
--- a/src/components/datetime/test/basic/main.html
+++ b/src/components/datetime/test/basic/main.html
@@ -74,7 +74,7 @@
   </p>
 
   <p>
-    <button (click)="clearLeapYear()">Clear Leap Years</button>
+    <button ion-button (click)="clearLeapYear()">Clear Leap Years</button>
   </p>
 
   <ion-item>
@@ -83,7 +83,7 @@
   </ion-item>
 
   <p>
-    <button (click)="convertDate()">Convert myDate To Date</button>
+    <button ion-button (click)="convertDate()">Convert myDate To Date</button>
     {{convertedDate}}
   </p>
 
diff --git a/src/components/grid/test/alignment/main.html b/src/components/grid/test/alignment/main.html
index 8f09667a9e1..e5e30cbea15 100644
--- a/src/components/grid/test/alignment/main.html
+++ b/src/components/grid/test/alignment/main.html
@@ -46,25 +46,25 @@
 
   <ion-row>
     <ion-col>
-      <button small>Button 1</button>
+      <button ion-button small>Button 1</button>
     </ion-col>
     <ion-col width-50 text-center>
-      <button small>Button 2</button>
-      <button small>Button 3</button>
+      <button ion-button small>Button 2</button>
+      <button ion-button small>Button 3</button>
     </ion-col>
     <ion-col text-right>
-      <button small>Button 4</button>
+      <button ion-button small>Button 4</button>
     </ion-col>
   </ion-row>
 
   <ion-row>
     <ion-col>
-      <button small>Button 1</button>
-      <button small>Button 2</button>
+      <button ion-button small>Button 1</button>
+      <button ion-button small>Button 2</button>
     </ion-col>
     <ion-col text-right>
-      <button small>Button 3</button>
-      <button small>Button 4</button>
+      <button ion-button small>Button 3</button>
+      <button ion-button small>Button 4</button>
     </ion-col>
   </ion-row>
 
diff --git a/src/components/icon/test/basic/main.html b/src/components/icon/test/basic/main.html
index f224032da34..d16ba39b484 100644
--- a/src/components/icon/test/basic/main.html
+++ b/src/components/icon/test/basic/main.html
@@ -83,7 +83,7 @@
   </ion-list>
 
   <p>
-    <button (click)="updateIcon()">
+    <button ion-button (click)="updateIcon()">
       <ion-icon [name]="btnIcon"></ion-icon>
       Update icon
     </button>
diff --git a/src/components/infinite-scroll/test/basic/index.ts b/src/components/infinite-scroll/test/basic/index.ts
index b65ee399929..6155dabbfac 100644
--- a/src/components/infinite-scroll/test/basic/index.ts
+++ b/src/components/infinite-scroll/test/basic/index.ts
@@ -46,7 +46,7 @@ class E2EPage1 {
 
 
 @Component({
-  template: '<ion-content><button (click)="navCtrl.pop()">Pop</button></ion-content>'
+  template: '<ion-content><button ion-button (click)="navCtrl.pop()">Pop</button></ion-content>'
 })
 class E2EPage2 {
   constructor(public navCtrl: NavController) {}
diff --git a/src/components/infinite-scroll/test/basic/main.html b/src/components/infinite-scroll/test/basic/main.html
index accb08eb4b4..7e6be1d3b19 100644
--- a/src/components/infinite-scroll/test/basic/main.html
+++ b/src/components/infinite-scroll/test/basic/main.html
@@ -13,7 +13,7 @@
     InfiniteScroll is enabled: {{enabled}}
   </p>
 
-  <button (click)="toggleInfiniteScroll()" block>
+  <button ion-button (click)="toggleInfiniteScroll()" block>
     Toggle InfiniteScroll Enabled
   </button>
 
diff --git a/src/components/input/input.ts b/src/components/input/input.ts
index a0eb9f44a56..2acc500fa20 100644
--- a/src/components/input/input.ts
+++ b/src/components/input/input.ts
@@ -78,7 +78,7 @@ import { Platform } from '../../platform/platform';
   template: `
     <input [type]="type" [(ngModel)]="_value" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" [placeholder]="placeholder" class="text-input">
     <input [type]="type" aria-hidden="true" next-input *ngIf="_useAssist">
-    <button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>
+    <button ion-button clear [hidden]="!clearInput" type="button" class="text-input-clear-icon" (click)="clearTextInput()" (mousedown)="clearTextInput()"></button>
     <div (touchstart)="pointerStart($event)" (touchend)="pointerEnd($event)" (mousedown)="pointerStart($event)" (mouseup)="pointerEnd($event)" class="input-cover" tappable *ngIf="_useAssist"></div>
   `,
   directives: [NativeInput, NextInput, NgIf, NgModel],
diff --git a/src/components/input/test/clear-input/main.html b/src/components/input/test/clear-input/main.html
index b1d68b8f097..24bcf4ea12a 100644
--- a/src/components/input/test/clear-input/main.html
+++ b/src/components/input/test/clear-input/main.html
@@ -19,12 +19,12 @@
     <ion-item>
       <ion-label>Button:</ion-label>
       <ion-input class="e2eClearInput" [(ngModel)]="myValue"></ion-input>
-      <button item-right (click)="clicked()">Button</button>
+      <button ion-button item-right (click)="clicked()">Button</button>
     </ion-item>
 
     <ion-item>
       <input type="text" placeholder="Native Input"/>
-      <button item-right (click)="clicked()">Button</button>
+      <button ion-button item-right (click)="clicked()">Button</button>
     </ion-item>
   </ion-list>
 
diff --git a/src/components/input/test/fixed-inline-labels/main.html b/src/components/input/test/fixed-inline-labels/main.html
index 9d48f35d257..b695ca79e6a 100644
--- a/src/components/input/test/fixed-inline-labels/main.html
+++ b/src/components/input/test/fixed-inline-labels/main.html
@@ -30,7 +30,7 @@
     <ion-item>
       <ion-label fixed>From</ion-label>
       <ion-input value="Text 3"></ion-input>
-      <button clear item-right>
+      <button ion-button icon-only clear item-right>
         <ion-icon name="power"></ion-icon>
       </button>
     </ion-item>
@@ -70,7 +70,7 @@
     <ion-item>
       <ion-label fixed>Score</ion-label>
       <ion-input value="10" type="number"></ion-input>
-      <button outline item-right>Update</button>
+      <button ion-button outline item-right>Update</button>
     </ion-item>
 
     <ion-item>
diff --git a/src/components/input/test/floating-labels/main.html b/src/components/input/test/floating-labels/main.html
index e7231f7ec1d..b4902ddfaf3 100644
--- a/src/components/input/test/floating-labels/main.html
+++ b/src/components/input/test/floating-labels/main.html
@@ -14,7 +14,7 @@
     <ion-item>
       <ion-label floating>Params: {{ myParam }}</ion-label>
       <ion-input [(ngModel)]="myParam" type="text"></ion-input>
-      <button clear item-right>
+      <button ion-button icon-only clear item-right>
         <ion-icon name="settings"></ion-icon>
       </button>
     </ion-item>
@@ -37,7 +37,7 @@
     <ion-item>
       <ion-label floating primary>Floating Label 4: {{ myValues.value2 }}</ion-label>
       <ion-textarea [(ngModel)]='myValues.value2'></ion-textarea>
-      <button outline item-right>
+      <button ion-button outline item-right>
         View
       </button>
     </ion-item>
diff --git a/src/components/input/test/form-inputs/main.html b/src/components/input/test/form-inputs/main.html
index 8dc08f2a515..2fc5a45b851 100644
--- a/src/components/input/test/form-inputs/main.html
+++ b/src/components/input/test/form-inputs/main.html
@@ -41,7 +41,7 @@
       </ion-item>
 
       <div padding-left padding-right>
-        <button block (click)="submit($event, login)">Login</button>
+        <button ion-button block (click)="submit($event, login)">Login</button>
       </div>
       <div padding-left>
         <b>Valid form?:</b> {{ mf.form.valid }}<br>
@@ -65,7 +65,7 @@
         <ion-input type="password" [(ngModel)]="user.password" formControlName="password" required></ion-input>
       </ion-item>
       <div padding-left padding-right>
-        <button block type="submit">Login</button>
+        <button ion-button block type="submit">Login</button>
       </div>
       <div padding-left>
         <b>Valid form?:</b> {{ lf.form.valid }}<br>
@@ -125,6 +125,6 @@
     </ion-item>
   </ion-list>
 
-  <button (click)="disable()">Disable</button>
+  <button ion-button (click)="disable()">Disable</button>
 
 </ion-content>
diff --git a/src/components/input/test/inline-labels/main.html b/src/components/input/test/inline-labels/main.html
index 18031ebeb1b..91c1ade9a0c 100644
--- a/src/components/input/test/inline-labels/main.html
+++ b/src/components/input/test/inline-labels/main.html
@@ -26,7 +26,7 @@
       <ion-item>
         <ion-label>From:</ion-label>
         <ion-input value="Text 3"></ion-input>
-        <button clear item-right>
+        <button ion-button icon-only clear item-right>
           <ion-icon name="power"></ion-icon>
         </button>
       </ion-item>
@@ -63,7 +63,7 @@
       <ion-item>
         <ion-label>Score:</ion-label>
         <ion-input value="10" type="number"></ion-input>
-        <button outline item-right>Update</button>
+        <button ion-button outline item-right>Update</button>
       </ion-item>
 
       <ion-item>
diff --git a/src/components/input/test/input-focus/main.html b/src/components/input/test/input-focus/main.html
index 5c250b857a9..c6b77df9a6f 100644
--- a/src/components/input/test/input-focus/main.html
+++ b/src/components/input/test/input-focus/main.html
@@ -3,7 +3,7 @@
   <ion-toolbar primary>
     <ion-title>Inset Focus</ion-title>
     <ion-buttons end>
-      <button (click)="reload()">
+      <button ion-button (click)="reload()">
         Reload
       </button>
     </ion-buttons>
@@ -25,7 +25,7 @@
 
     <ion-item>
       Item with button right
-      <button item-right>Button 1</button>
+      <button ion-button item-right>Button 1</button>
     </ion-item>
 
     <ion-item>
@@ -33,14 +33,14 @@
       <ion-input value="value"></ion-input>
     </ion-item>
 
-    <button ion-item>
+    <button ion-button ion-item>
       Button Item
     </button>
 
     <ion-item>
       <ion-label>Text 3:</ion-label>
       <ion-input></ion-input>
-      <button clear item-right>
+      <button ion-button clear item-right>
         <ion-icon name="power"></ion-icon>
       </button>
     </ion-item>
@@ -87,7 +87,7 @@
     <ion-item>
       <ion-label>Score:</ion-label>
       <ion-input value="10" type="number"></ion-input>
-      <button outline item-right>Update</button>
+      <button ion-button outline item-right>Update</button>
     </ion-item>
 
     <ion-item>
diff --git a/src/components/input/test/inset-inputs/main.html b/src/components/input/test/inset-inputs/main.html
index cce8b236bb3..88550299808 100644
--- a/src/components/input/test/inset-inputs/main.html
+++ b/src/components/input/test/inset-inputs/main.html
@@ -49,7 +49,7 @@
     <ion-item inset>
       <ion-icon name="search" item-left></ion-icon>
       <ion-input value="Inset input inside a list"></ion-input>
-      <button outline item-right>Search</button>
+      <button ion-button outline item-right>Search</button>
     </ion-item>
 
   </ion-list>
diff --git a/src/components/input/test/stacked-labels/main.html b/src/components/input/test/stacked-labels/main.html
index 2ac801912ce..100ac391f7b 100644
--- a/src/components/input/test/stacked-labels/main.html
+++ b/src/components/input/test/stacked-labels/main.html
@@ -20,8 +20,8 @@
     <ion-item>
       <ion-label stacked>Label 2</ion-label>
       <ion-input value="Text 2"></ion-input>
-      <button item-right clear><ion-icon name="heart-outline"></ion-icon></button>
-      <button item-right clear><ion-icon ios="ios-call-outline" md="md-call"></ion-icon></button>
+      <button ion-button icon-only item-right clear><ion-icon name="heart-outline"></ion-icon></button>
+      <button ion-button icon-only item-right clear><ion-icon ios="ios-call-outline" md="md-call"></ion-icon></button>
     </ion-item>
 
     <ion-item>
diff --git a/src/components/item/item-sliding.scss b/src/components/item/item-sliding.scss
index 992c18a621c..89e1469e1c4 100644
--- a/src/components/item/item-sliding.scss
+++ b/src/components/item/item-sliding.scss
@@ -51,7 +51,7 @@ ion-item-options .button {
   box-sizing: content-box;
 }
 
-ion-item-options:not([icon-left]) .button-icon-left {
+ion-item-options:not([icon-left]) .button {
   .button-inner {
     flex-direction: column;
   }
diff --git a/src/components/item/item-sliding.ts b/src/components/item/item-sliding.ts
index 86798d1d5e2..0e8ed924e3e 100644
--- a/src/components/item/item-sliding.ts
+++ b/src/components/item/item-sliding.ts
@@ -29,7 +29,7 @@ export const enum ItemSideFlags {
  *     Item 1
  *   </ion-item>
  *   <ion-item-options side="right" (ionSwipe)="saveItem(item)">
- *     <button expandable (click)="saveItem(item)">
+ *     <button ion-button expandable (click)="saveItem(item)">
  *       <ion-icon name="star"></ion-icon>
  *     </button>
  *   </ion-item-options>
@@ -107,12 +107,12 @@ const enum SlidingState {
  *       Item
  *     </ion-item>
  *     <ion-item-options side="left">
- *       <button (click)="favorite(item)">Favorite</button>
- *       <button danger (click)="share(item)">Share</button>
+ *       <button ion-button (click)="favorite(item)">Favorite</button>
+ *       <button ion-button danger (click)="share(item)">Share</button>
  *     </ion-item-options>
 
  *     <ion-item-options side="right">
- *       <button (click)="unread(item)">Unread</button>
+ *       <button ion-button (click)="unread(item)">Unread</button>
  *     </ion-item-options>
  *   </ion-item-sliding>
  * </ion-list>
@@ -127,14 +127,14 @@ const enum SlidingState {
  *
  * ```html
  * <ion-item-options side="right">
- *   <button (click)="archive(item)">
+ *   <button ion-button (click)="archive(item)">
  *     <ion-icon name="archive"></ion-icon>
  *     Archive
  *   </button>
  * </ion-item-options>
 
  * <ion-item-options side="left">
- *   <button (click)="archive(item)">
+ *   <button ion-button (click)="archive(item)">
  *     <ion-icon name="archive"></ion-icon>
  *     Archive
  *   </button>
@@ -149,7 +149,7 @@ const enum SlidingState {
  * <ion-item-sliding (ionDrag)="logDrag($event)">
  *   <ion-item>Item</ion-item>
  *   <ion-item-options>
- *     <button>Favorite</button>
+ *     <button ion-button>Favorite</button>
  *   </ion-item-options>
  * </ion-item-sliding>
  * ```
@@ -162,7 +162,7 @@ const enum SlidingState {
  *
  * ```html
  * <ion-item-options icon-left>
- *    <button (click)="archive(item)">
+ *    <button ion-button (click)="archive(item)">
  *      <ion-icon name="archive"></ion-icon>
  *      Archive
  *    </button>
@@ -434,7 +434,7 @@ export class ItemSliding {
    *       Item
    *     </ion-item>
    *     <ion-item-options>
-   *       <button (click)="share(slidingItem)">Share</button>
+   *       <button ion-button (click)="share(slidingItem)">Share</button>
    *     </ion-item-options>
    *   </ion-item-sliding>
    * </ion-list>
diff --git a/src/components/item/item.ios.scss b/src/components/item/item.ios.scss
index 13931633091..bc76aebc7b7 100644
--- a/src/components/item/item.ios.scss
+++ b/src/components/item/item.ios.scss
@@ -138,8 +138,8 @@ ion-thumbnail[item-right] {
   font-size: 1.3rem;
 }
 
-.item-button.button-icon-only ion-icon,
-.item-button.button-icon-only {
+.item-button[icon-only] ion-icon,
+.item-button[icon-only] {
   padding: 0 1px;
 }
 
diff --git a/src/components/item/item.md.scss b/src/components/item/item.md.scss
index 9cc69b64bd1..283abe2268d 100644
--- a/src/components/item/item.md.scss
+++ b/src/components/item/item.md.scss
@@ -137,8 +137,8 @@ ion-icon[item-right] {
   font-size: 1.2rem;
 }
 
-.item-button.button-icon-only ion-icon,
-.item-button.button-icon-only {
+.item-button[icon-only] ion-icon,
+.item-button[icon-only] {
   padding: 0 1px;
 }
 
diff --git a/src/components/item/item.ts b/src/components/item/item.ts
index fa0f3579ed3..0540f27dd4a 100644
--- a/src/components/item/item.ts
+++ b/src/components/item/item.ts
@@ -181,9 +181,9 @@ import { Label } from '../label/label';
  *
  *   <!-- List header with buttons on each side -->
  *   <ion-list-header>
- *     <button item-left (click)="buttonClick()">Button</button>
+ *     <button ion-button item-left (click)="buttonClick()">Button</button>
  *     List Header
- *     <button outline item-right (click)="buttonClick()">Outline</button>
+ *     <button ion-button outline item-right (click)="buttonClick()">Outline</button>
  *   </ion-list-header>
  *
  *   <!-- Loops through and creates multiple items -->
@@ -209,25 +209,25 @@ import { Label } from '../label/label';
  *
  *   <!-- Item with left and right buttons -->
  *   <ion-item>
- *     <button item-left (click)="buttonClick()">Button</button>
+ *     <button ion-button item-left (click)="buttonClick()">Button</button>
  *     Item
- *     <button outline item-right (click)="buttonClick()">Outline</button>
+ *     <button ion-button outline item-right (click)="buttonClick()">Outline</button>
  *   </ion-item>
  *
  *   <!-- Item divider with a right button -->
  *   <ion-item-divider>
  *     Item Divider
- *     <button item-right>Button</button>
+ *     <button ion-button item-right>Button</button>
  *   </ion-item-divider>
  *
  *   <!-- Disabled button item with left and right buttons -->
  *   <button ion-item disabled>
- *     <button item-left (click)="buttonClick()">
+ *     <button ion-button item-left (click)="buttonClick()">
  *       <ion-icon name="home"></ion-icon>
  *       Left Icon
  *     </button>
  *     Disabled Button Item
- *     <button outline item-right (click)="buttonClick()">
+ *     <button ion-button outline item-right (click)="buttonClick()">
  *       <ion-icon name="star"></ion-icon>
  *       Left Icon
  *     </button>
@@ -239,7 +239,7 @@ import { Label } from '../label/label';
  *       <img src="img/my-avatar.png">
  *     </ion-avatar>
  *     Avatar Item
- *     <button outline item-right>View</button>
+ *     <button ion-button outline item-right>View</button>
  *   </ion-item>
  *
  *   <!-- Item with a thumbnail on the right -->
@@ -257,7 +257,7 @@ import { Label } from '../label/label';
  *       Item
  *     </ion-item>
  *     <ion-item-options>
- *       <button primary (click)="archive()">Archive</button>
+ *       <button ion-button primary (click)="archive()">Archive</button>
  *     </ion-item-options>
  *   </ion-item-sliding>
  *
diff --git a/src/components/item/item.wp.scss b/src/components/item/item.wp.scss
index 7ba0feea0b9..4d5fd9979f2 100644
--- a/src/components/item/item.wp.scss
+++ b/src/components/item/item.wp.scss
@@ -138,8 +138,8 @@ ion-icon[item-right] {
   font-size: 1.2rem;
 }
 
-.item-button.button-icon-only ion-icon,
-.item-button.button-icon-only {
+.item-button[icon-only] ion-icon,
+.item-button[icon-only] {
   padding: 0 1px;
 }
 
diff --git a/src/components/item/test/buttons/main.html b/src/components/item/test/buttons/main.html
index 05fa6e4adbb..51e45bf4b24 100644
--- a/src/components/item/test/buttons/main.html
+++ b/src/components/item/test/buttons/main.html
@@ -26,55 +26,55 @@
   </button>
 
   <ion-item>
-    <button item-left (click)="testClick($event)">Default</button>
+    <button ion-button item-left (click)="testClick($event)">Default</button>
     Inner Buttons
-    <button outline item-right (click)="testClick($event)">Outline</button>
+    <button ion-button outline item-right (click)="testClick($event)">Outline</button>
   </ion-item>
 
   <button ion-item disabled>
-    <button item-left (click)="testClick($event)">
+    <button ion-button item-left icon-left (click)="testClick($event)">
       <ion-icon name="home"></ion-icon>
       Left Icon
     </button>
     disabled left icon buttons
-    <button outline item-right (click)="testClick($event)">
+    <button ion-button outline item-right icon-left (click)="testClick($event)">
       <ion-icon name="star"></ion-icon>
       Left Icon
     </button>
   </button>
 
   <ion-item>
-    <button item-left (click)="testClick($event)">
+    <button ion-button item-left icon-right (click)="testClick($event)">
       Right Icon
       <ion-icon name="home"></ion-icon>
     </button>
     right icon buttons
-    <button outline item-right (click)="testClick($event)">
+    <button ion-button outline item-right icon-right (click)="testClick($event)">
       Right Icon
       <ion-icon name="star"></ion-icon>
     </button>
   </ion-item>
 
   <ion-item>
-    <button clear item-left default (click)="testClick($event)">
+    <button ion-button icon-only clear item-left default (click)="testClick($event)">
       <ion-icon name="navigate"></ion-icon>
     </button>
     icon only buttons default
-    <button clear item-right default (click)="testClick($event)">
+    <button ion-button icon-only clear item-right default (click)="testClick($event)">
       <ion-icon name="navigate"></ion-icon>
     </button>
   </ion-item>
 
   <a ion-item disabled>
     a ion-item disabled right icon/text button large
-    <button item-right large (click)="testClick($event)">
+    <button ion-button item-right large icon-left (click)="testClick($event)">
       <ion-icon name="refresh"></ion-icon>
       Refresh
     </button>
   </a>
 
   <ion-item>
-    <button clear item-left small (click)="testClick($event)">
+    <button ion-button clear item-left small icon-left (click)="testClick($event)">
       <ion-icon name="settings"></ion-icon>
       Settings
     </button>
@@ -83,7 +83,7 @@
 
   <ion-item>
     ion-item right clear button
-    <button secondary clear item-right (click)="testClick($event)">
+    <button ion-button secondary clear item-right (click)="testClick($event)">
       Edit
     </button>
   </ion-item>
@@ -92,7 +92,7 @@
     This is multiline text that has a
     long description of about how the text is really long
     and a <a href="#" (click)="testClick($event)">link</a>.
-    <button outline item-right (click)="testClick($event)">View</button>
+    <button ion-button outline item-right (click)="testClick($event)">View</button>
   </ion-item>
 
   <button ion-item *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1" (click)="testClick($event)">
diff --git a/src/components/item/test/dividers/main.html b/src/components/item/test/dividers/main.html
index 553dc7292d1..4513b63f25a 100644
--- a/src/components/item/test/dividers/main.html
+++ b/src/components/item/test/dividers/main.html
@@ -18,7 +18,7 @@
   <ion-item-group>
     <ion-item-divider>
       Item Divider
-      <button item-right>button</button>
+      <button ion-button item-right>button</button>
     </ion-item-divider>
 
     <ion-item text-wrap>
@@ -29,10 +29,10 @@
 
   <ion-item-group>
     <ion-item-divider dark>
-      <button item-left clear>
+      <button ion-button item-left clear>
         <ion-icon name="cloudy"></ion-icon>
       </button>
-      <button item-left clear light>
+      <button ion-button item-left clear light>
         <ion-icon name="rainy"></ion-icon>
       </button>
       Dark
@@ -53,7 +53,7 @@ <h2>H2 Title Text</h2>
         <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
       </ion-avatar>
       Light
-      <button item-right clear danger>
+      <button ion-button item-right clear danger>
         <ion-icon name="sunny"></ion-icon>
       </button>
     </ion-item-divider>
diff --git a/src/components/item/test/groups/index.ts b/src/components/item/test/groups/index.ts
index 08e7748b7c0..34b75a6387e 100644
--- a/src/components/item/test/groups/index.ts
+++ b/src/components/item/test/groups/index.ts
@@ -11,7 +11,7 @@ import { ionicBootstrap, NavController, NavParams } from '../../../../../src';
     </ion-header>
     <ion-content padding>
       <p>{{session.description}}</p>
-      <p><button (click)="navCtrl.pop()">Go Back</button></p>
+      <p><button ion-button (click)="navCtrl.pop()">Go Back</button></p>
     </ion-content>
   `
 })
diff --git a/src/components/item/test/groups/session-list.html b/src/components/item/test/groups/session-list.html
index 776f1ef0b3c..b5493797c72 100644
--- a/src/components/item/test/groups/session-list.html
+++ b/src/components/item/test/groups/session-list.html
@@ -3,7 +3,7 @@
   <ion-navbar>
     <ion-title>Item Groups</ion-title>
     <ion-buttons end>
-      <button (click)="reload()">Reload</button>
+      <button ion-button (click)="reload()">Reload</button>
     </ion-buttons>
   </ion-navbar>
 
@@ -31,7 +31,7 @@ <h3>{{session.name}}</h3>
           </p>
         </button>
         <ion-item-options>
-          <button (click)="addFavorite(timeSlot, session, slidingItem)">Add to<br>Favorites</button>
+          <button ion-button (click)="addFavorite(timeSlot, session, slidingItem)">Add to<br>Favorites</button>
         </ion-item-options>
       </ion-item-sliding>
     </ion-item-group>
diff --git a/src/components/item/test/media/main.html b/src/components/item/test/media/main.html
index 6709ebf3bb2..d4a0d85caff 100644
--- a/src/components/item/test/media/main.html
+++ b/src/components/item/test/media/main.html
@@ -28,7 +28,7 @@
       <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
     </ion-avatar>
     Media/Avatar, right button
-    <button outline item-right>View</button>
+    <button ion-button outline item-right>View</button>
   </ion-item>
 
   <a ion-item href="#">
@@ -52,7 +52,7 @@ <h2>H2 Title Text</h2>
     </ion-thumbnail>
     <h2>H2 Title Text</h2>
     <p>Button on right</p>
-    <button outline item-right>View</button>
+    <button ion-button outline item-right>View</button>
   </ion-item>
 
   <button ion-item>
diff --git a/src/components/item/test/reorder/main.html b/src/components/item/test/reorder/main.html
index 6cf434a1058..77b38d41520 100644
--- a/src/components/item/test/reorder/main.html
+++ b/src/components/item/test/reorder/main.html
@@ -2,7 +2,7 @@
   <ion-toolbar primary>
     <ion-title>Item Reorder</ion-title>
     <ion-buttons end>
-      <button (click)="toggle()">
+      <button ion-button (click)="toggle()">
         Edit
       </button>
     </ion-buttons>
diff --git a/src/components/item/test/sliding/main.html b/src/components/item/test/sliding/main.html
index c6f2fe7e69a..688eddc8a26 100644
--- a/src/components/item/test/sliding/main.html
+++ b/src/components/item/test/sliding/main.html
@@ -3,7 +3,7 @@
   <ion-toolbar>
     <ion-title>Sliding Items</ion-title>
     <ion-buttons end>
-      <button (click)="reload()">Reload</button>
+      <button ion-button (click)="reload()">Reload</button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -13,9 +13,9 @@
 <ion-content>
 
   <div padding>
-    <button block (click)="toggleSliding()">Toggle sliding</button>
-    <button block (click)="changeDynamic()">Change Dynamic Options</button>
-    <button block (click)="closeOpened()">Close Opened Items</button>
+    <button ion-button block (click)="toggleSliding()">Toggle sliding</button>
+    <button ion-button block (click)="changeDynamic()">Change Dynamic Options</button>
+    <button ion-button block (click)="closeOpened()">Close Opened Items</button>
   </div>
 
   <ion-list #myList>
@@ -31,15 +31,15 @@ <h2>HubStruck Notifications</h2>
       </a>
 
       <ion-item-options side="left">
-        <button (click)="unread(item100)">
+        <button ion-button (click)="unread(item100)">
           <ion-icon name="mail"></ion-icon>
         </button>
       </ion-item-options>
       <ion-item-options side="right">
-        <button danger (click)="unread(item100)">
+        <button ion-button danger (click)="unread(item100)">
           <ion-icon name="trash"></ion-icon>
         </button>
-        <button (click)="unread(item100)" >
+        <button ion-button (click)="unread(item100)" >
           <ion-icon name="star"></ion-icon>
         </button>
       </ion-item-options>
@@ -52,8 +52,8 @@ <h2>RIGHT side - no icons</h2>
         <p>Hey do you want to go to the game tonight?</p>
       </button>
       <ion-item-options *ngIf="slidingEnabled">
-        <button primary (click)="archive(item0)">Archive</button>
-        <button danger (click)="del(item0)">Delete</button>
+        <button ion-button primary (click)="archive(item0)">Archive</button>
+        <button ion-button danger (click)="del(item0)">Delete</button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -63,8 +63,8 @@ <h2>LEFT side - no icons</h2>
         <p>I think I figured out how to get more Mountain Dew</p>
       </a>
       <ion-item-options side="left" (ionSwipe)="del($event)" *ngIf="slidingEnabled">
-        <button primary (click)="archive(item1)">Archive</button>
-        <button danger (click)="del(item1)">Delete</button>
+        <button ion-button primary (click)="archive(item1)">Archive</button>
+        <button ion-button danger (click)="del(item1)">Delete</button>
       </ion-item-options>
     </ion-item-sliding>
 
@@ -75,16 +75,16 @@ <h2>RIGHT/LEFT side - icons</h2>
         <p>I think I figured out how to get more Mountain Dew</p>
       </ion-item>
       <ion-item-options side="left" (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
-        <button secondary expandable (click)="unread(item2)">
+        <button ion-button secondary expandable (click)="unread(item2)">
           <ion-icon name="ios-checkmark"></ion-icon>Unread
         </button>
       </ion-item-options>
 
       <ion-item-options side="right" (ionSwipe)="del(item2)" *ngIf="slidingEnabled">
-        <button primary (click)="archive(item2)">
+        <button ion-button primary (click)="archive(item2)">
           <ion-icon name="mail"></ion-icon>Archive
         </button>
-        <button danger (click)="del(item2)" expandable>
+        <button ion-button danger (click)="del(item2)" expandable>
           <ion-icon name="trash"></ion-icon>Delete
         </button>
       </ion-item-options>
@@ -97,16 +97,16 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
         <p>I think I figured out how to get more Mountain Dew</p>
       </ion-item>
       <ion-item-options side="left" icon-left (ionSwipe)="unread($event)" *ngIf="slidingEnabled">
-        <button secondary expandable (click)="unread(item3)">
+        <button ion-button secondary expandable (click)="unread(item3)">
           <ion-icon name="ios-checkmark"></ion-icon>Unread
         </button>
       </ion-item-options>
 
       <ion-item-options icon-left (ionSwipe)="del(item3)">
-        <button primary (click)="archive(item3)">
+        <button ion-button primary (click)="archive(item3)">
           <ion-icon name="mail"></ion-icon>Archive
         </button>
-        <button danger (click)="del(item3)" expandable *ngIf="slidingEnabled">
+        <button ion-button danger (click)="del(item3)" expandable *ngIf="slidingEnabled">
           <ion-icon name="trash"></ion-icon>Delete
         </button>
       </ion-item-options>
@@ -119,7 +119,7 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
         One Line w/ Icon, div only text
       </ion-item>
       <ion-item-options icon-left (ionSwipe)="archive($event)">
-        <button primary (click)="archive(item4)" expandable *ngIf="slidingEnabled">
+        <button ion-button primary (click)="archive(item4)" expandable *ngIf="slidingEnabled">
           <ion-icon name="archive"></ion-icon>Archive
         </button>
       </ion-item-options>
@@ -134,13 +134,13 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
         One Line w/ Avatar, div only text
       </ion-item>
       <ion-item-options>
-        <button primary expandable>
+        <button ion-button primary expandable>
           <ion-icon name="more"></ion-icon>More
         </button>
-        <button secondary (click)="archive(item5)">
+        <button ion-button secondary (click)="archive(item5)">
           <ion-icon name="archive"></ion-icon>Archive
         </button>
-        <button danger (click)="del(item5)">
+        <button ion-button danger (click)="del(item5)">
           <ion-icon name="trash"></ion-icon>Delete
         </button>
       </ion-item-options>
@@ -151,11 +151,11 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
         One Line, dynamic option
       </ion-item>
       <ion-item-options>
-        <button primary>
+        <button ion-button primary>
           <ion-icon name="more"></ion-icon>
           {{ moreText }}
         </button>
-        <button secondary (click)="archive(item6)">
+        <button ion-button secondary (click)="archive(item6)">
           <ion-icon name="archive"></ion-icon>
           {{ archiveText }}
         </button>
@@ -167,11 +167,11 @@ <h2>RIGHT/LEFT side - icons (item-left)</h2>
         One Line, dynamic icon-left option
       </ion-item>
       <ion-item-options icon-left>
-        <button primary>
+        <button ion-button primary>
           <ion-icon name="more"></ion-icon>
           {{ moreText }}
         </button>
-        <button secondary (click)="archive(item7)">
+        <button ion-button secondary (click)="archive(item7)">
           <ion-icon name="archive"></ion-icon>
           {{ archiveText }}
         </button>
@@ -187,10 +187,10 @@ <h2>DOWNLOAD</h2>
         <p>Paragraph text.</p>
       </ion-item>
       <ion-item-options (ionSwipe)="download($event)">
-        <button primary (click)="archive(item8)">
+        <button ion-button primary (click)="archive(item8)">
           <ion-icon name="archive"></ion-icon>Archive
         </button>
-        <button secondary expandable (click)="download(item8)">
+        <button ion-button secondary expandable (click)="download(item8)">
           <ion-icon name="download" class="download-hide"></ion-icon>
           <div class="download-hide">Download</div>
           <ion-spinner id="download-spinner"></ion-spinner>
@@ -227,7 +227,7 @@ <h2>Normal button (no sliding)</h2>
         <h3>ng-for {{data}}</h3>
       </ion-item>
       <ion-item-options>
-        <button primary (click)="archive(item9)">Archive</button>
+        <button ion-button primary (click)="archive(item9)">Archive</button>
       </ion-item-options>
     </ion-item-sliding>
 
diff --git a/src/components/list/test/header-scenarios/main.html b/src/components/list/test/header-scenarios/main.html
index dc6446dec96..d693488489a 100644
--- a/src/components/list/test/header-scenarios/main.html
+++ b/src/components/list/test/header-scenarios/main.html
@@ -10,59 +10,59 @@
       This is multiline text that has a
       long description of about how the text is really long
       and a <a href="#" (click)="testClick($event)">link</a>.
-      <button outline item-right (click)="testClick($event)">View</button>
+      <button ion-button outline item-right (click)="testClick($event)">View</button>
     </ion-list-header>
 
     <ion-list-header>
-      <button item-left (click)="testClick($event)">Default</button>
+      <button ion-button item-left (click)="testClick($event)">Default</button>
       Inner Buttons
-      <button outline item-right (click)="testClick($event)">Outline</button>
+      <button ion-button outline item-right (click)="testClick($event)">Outline</button>
     </ion-list-header>
 
     <ion-list-header disabled>
-      <button item-left (click)="testClick($event)">
+      <button ion-button icon-left item-left (click)="testClick($event)">
         <ion-icon name="home"></ion-icon>
         Left Icon
       </button>
       disabled left icon buttons
-      <button outline item-right (click)="testClick($event)">
+      <button ion-button icon-left outline item-right (click)="testClick($event)">
         <ion-icon name="star"></ion-icon>
         Left Icon
       </button>
     </ion-list-header>
 
     <ion-list-header>
-      <button item-left (click)="testClick($event)">
+      <button ion-button icon-right item-left (click)="testClick($event)">
         Right Icon
         <ion-icon name="home"></ion-icon>
       </button>
       right icon buttons
-      <button outline item-right (click)="testClick($event)">
+      <button ion-button icon-right outline item-right (click)="testClick($event)">
         Right Icon
         <ion-icon name="star"></ion-icon>
       </button>
     </ion-list-header>
 
     <ion-list-header>
-      <button clear item-left default (click)="testClick($event)">
+      <button ion-button icon-only clear item-left default (click)="testClick($event)">
         <ion-icon name="navigate"></ion-icon>
       </button>
       icon only buttons default
-      <button clear item-right default (click)="testClick($event)">
+      <button ion-button icon-only clear item-right default (click)="testClick($event)">
         <ion-icon name="navigate"></ion-icon>
       </button>
     </ion-list-header>
 
     <ion-list-header>
       ion-list-header right icon/text button large
-      <button item-right large (click)="testClick($event)">
+      <button ion-button item-right icon-left large (click)="testClick($event)">
         <ion-icon name="refresh"></ion-icon>
         Refresh
       </button>
     </ion-list-header>
 
     <ion-list-header>
-      <button clear item-left small (click)="testClick($event)">
+      <button ion-button clear item-left icon-left small (click)="testClick($event)">
         <ion-icon name="settings"></ion-icon>
         Settings
       </button>
@@ -71,14 +71,14 @@
 
     <ion-list-header>
       ion-list-header right clear button
-      <button secondary clear item-right (click)="testClick($event)">
+      <button ion-button secondary clear item-right (click)="testClick($event)">
         Edit
       </button>
     </ion-list-header>
 
     <ion-list-header *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1">
       <ion-avatar item-left>
-          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
       </ion-avatar>
       <p>ng-for {{i}}</p>
       <ion-badge item-right>{{i + 1}}</ion-badge>
diff --git a/src/components/list/test/headers/main.html b/src/components/list/test/headers/main.html
index f2091041436..231a9268cea 100644
--- a/src/components/list/test/headers/main.html
+++ b/src/components/list/test/headers/main.html
@@ -45,7 +45,7 @@
 
     <ion-list-header>
       List Header
-      <button item-right outline>Info</button>
+      <button ion-button item-right outline>Info</button>
     </ion-list-header>
 
     <ion-item>
diff --git a/src/components/list/test/inset/main.html b/src/components/list/test/inset/main.html
index 5b4c06ada39..9ac35863f74 100644
--- a/src/components/list/test/inset/main.html
+++ b/src/components/list/test/inset/main.html
@@ -52,7 +52,7 @@
 
     <ion-item>
       Inset List, No Header
-      <button outline item-right>View</button>
+      <button ion-button outline item-right>View</button>
     </ion-item>
 
     <ion-item>
diff --git a/src/components/loading/test/basic/index.ts b/src/components/loading/test/basic/index.ts
index aa396d63605..d68afef04a1 100644
--- a/src/components/loading/test/basic/index.ts
+++ b/src/components/loading/test/basic/index.ts
@@ -197,7 +197,7 @@ class E2EPage {
     <ion-footer>
       <ion-toolbar>
         <ion-buttons end>
-          <button (click)="goToPage3()">
+          <button ion-button (click)="goToPage3()">
             Navigate
             <ion-icon name="arrow-forward"></ion-icon>
           </button>
diff --git a/src/components/loading/test/basic/main.html b/src/components/loading/test/basic/main.html
index 4ef49cec5f3..5cc76f8395e 100644
--- a/src/components/loading/test/basic/main.html
+++ b/src/components/loading/test/basic/main.html
@@ -9,16 +9,16 @@
 
 <ion-content padding>
 
-  <button block (click)="presentLoadingIos()">iOS Spinner</button>
-  <button block (click)="presentLoadingDots()">Dots Spinner</button>
-  <button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
-  <button block (click)="presentLoadingCircles()">Circles Spinner</button>
-  <button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
-  <button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
-  <button block (click)="presentLoadingCustom()" light>Custom Spinner</button>
-  <button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
-  <button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
-  <button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
+  <button ion-button block (click)="presentLoadingIos()">iOS Spinner</button>
+  <button ion-button block (click)="presentLoadingDots()">Dots Spinner</button>
+  <button ion-button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
+  <button ion-button block (click)="presentLoadingCircles()">Circles Spinner</button>
+  <button ion-button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
+  <button ion-button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
+  <button ion-button block (click)="presentLoadingCustom()" light>Custom Spinner</button>
+  <button ion-button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
+  <button ion-button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
+  <button ion-button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
 
 </ion-content>
 
@@ -27,11 +27,11 @@
 
   <ion-toolbar>
     <ion-buttons end>
-      <button (click)="goToPage2()">
+      <button ion-button icon-right (click)="goToPage2()">
         Navigate
         <ion-icon name="arrow-forward"></ion-icon>
       </button>
     </ion-buttons>
   </ion-toolbar>
 
-</ion-footer>
\ No newline at end of file
+</ion-footer>
diff --git a/src/components/loading/test/tabs/main.html b/src/components/loading/test/tabs/main.html
index 608ddf7b508..54635404f36 100644
--- a/src/components/loading/test/tabs/main.html
+++ b/src/components/loading/test/tabs/main.html
@@ -9,7 +9,7 @@
 
 <ion-content padding>
 
-  <button block (click)="presentLoading()" class="e2eLoadingTabsContent">Loading Content</button>
-  <button block (click)="presentLoadingNav()">Loading w/ Nav</button>
+  <button ion-button block (click)="presentLoading()" class="e2eLoadingTabsContent">Loading Content</button>
+  <button ion-button block (click)="presentLoadingNav()">Loading w/ Nav</button>
 
 </ion-content>
diff --git a/src/components/menu/menu-close.ts b/src/components/menu/menu-close.ts
index cb95e03aed0..06d79d972a7 100644
--- a/src/components/menu/menu-close.ts
+++ b/src/components/menu/menu-close.ts
@@ -13,14 +13,14 @@ import { MenuController } from './menu-controller';
  * A simple `menuClose` button can be added using the following markup:
  *
  * ```html
- * <button menuClose>Close Menu</button>
+ * <button ion-button menuClose>Close Menu</button>
  * ```
  *
  * To close a certain menu by its id or side, give the `menuClose`
  * directive a value.
  *
  * ```html
- * <button menuClose="left">Close Left Menu</button>
+ * <button ion-button menuClose="left">Close Left Menu</button>
  * ```
  *
  * @demo /docs/v2/demos/menu/
diff --git a/src/components/menu/menu-toggle.ts b/src/components/menu/menu-toggle.ts
index b7681d106b6..bd6097edc4f 100644
--- a/src/components/menu/menu-toggle.ts
+++ b/src/components/menu/menu-toggle.ts
@@ -18,14 +18,14 @@ import { ViewController } from '../nav/view-controller';
  * A simple `menuToggle` button can be added using the following markup:
  *
  * ```html
- * <button menuToggle>Toggle Menu</button>
+ * <button ion-button menuToggle>Toggle Menu</button>
  * ```
  *
  * To toggle a specific menu by its id or side, give the `menuToggle`
  * directive a value.
  *
  * ```html
- * <button menuToggle="right">Toggle Right Menu</button>
+ * <button ion-button menuToggle="right">Toggle Right Menu</button>
  * ```
  *
  * If placing the `menuToggle` in a navbar or toolbar, it should be
@@ -37,18 +37,18 @@ import { ViewController } from '../nav/view-controller';
  *
  *   <ion-navbar>
  *     <ion-buttons start>
- *       <button>
+ *       <button ion-button>
  *         <ion-icon name="contact"></ion-icon>
  *       </button>
  *     </ion-buttons>
- *     <button menuToggle>
+ *     <button ion-button menuToggle>
  *       <ion-icon name="menu"></ion-icon>
  *     </button>
  *     <ion-title>
  *       Title
  *     </ion-title>
  *     <ion-buttons end>
- *       <button (click)="doClick()">
+ *       <button ion-button (click)="doClick()">
  *         <ion-icon name="more"></ion-icon>
  *       </button>
  *     </ion-buttons>
@@ -62,14 +62,14 @@ import { ViewController } from '../nav/view-controller';
  *
  * ```html
  * <ion-toolbar>
- *   <button menuToggle right>
+ *   <button ion-button menuToggle right>
  *     <ion-icon name="menu"></ion-icon>
  *   </button>
  *   <ion-title>
  *     Title
  *   </ion-title>
  *   <ion-buttons end>
- *     <button (click)="doClick()">
+ *     <button ion-button (click)="doClick()">
  *       <ion-icon name="more"></ion-icon>
  *     </button>
  *   </ion-buttons>
diff --git a/src/components/menu/menu.ts b/src/components/menu/menu.ts
index f08a03ced21..f09b17c7691 100644
--- a/src/components/menu/menu.ts
+++ b/src/components/menu/menu.ts
@@ -125,7 +125,7 @@ import { GestureController } from '../../gestures/gesture-controller';
  * directive anywhere in the page's template:
  *
  * ```html
- * <button menuToggle>Toggle Menu</button>
+ * <button ion-button menuToggle>Toggle Menu</button>
  * ```
  *
  * To close a menu, add the `menuClose` button. It can be added anywhere
@@ -136,7 +136,7 @@ import { GestureController } from '../../gestures/gesture-controller';
  * <ion-menu [content]="mycontent">
  *   <ion-content>
  *     <ion-list>
- *       <button menuClose ion-item detail-none>Close Menu</button>
+ *       <button ion-button menuClose ion-item detail-none>Close Menu</button>
  *     </ion-list>
  *   </ion-content>
  * </ion-menu>
diff --git a/src/components/menu/test/basic/page1.html b/src/components/menu/test/basic/page1.html
index ae6905f8272..32b0b05ad02 100644
--- a/src/components/menu/test/basic/page1.html
+++ b/src/components/menu/test/basic/page1.html
@@ -2,7 +2,7 @@
 
   <ion-navbar>
 
-    <button menuToggle="left">
+    <button ion-button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -11,18 +11,18 @@
     </ion-title>
 
     <ion-buttons end>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="football"></ion-icon>
       </button>
     </ion-buttons>
 
     <ion-buttons start>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="baseball"></ion-icon>
       </button>
     </ion-buttons>
 
-    <button menuToggle="right" right secondary>
+    <button ion-button menuToggle="right" right secondary>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -40,17 +40,17 @@ <h3>Page 1</h3>
       <button ion-item class="e2eContentToggleLeftMenu" menuToggle="left">Toggle Left Menu</button>
 
       <ion-item-options side="left">
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
       <ion-item-options>
-        <button>Test</button>
+        <button ion-button>Test</button>
       </ion-item-options>
     </ion-item-sliding>
   </ion-list>
 
 
   <p>
-    <button class="e2eContentToggleRightMenu" menuToggle="right">Toggle Right Menu</button>
+    <button ion-button class="e2eContentToggleRightMenu" menuToggle="right">Toggle Right Menu</button>
   </p>
 
   <ion-card>
@@ -61,11 +61,11 @@ <h3>Page 1</h3>
   </ion-card>
 
   <p>
-    <button (click)="presentAlert()">Open alert</button>
+    <button ion-button (click)="presentAlert()">Open alert</button>
   </p>
 
   <p>
-    <button (click)="goToPage2()">Go to Page 2</button>
+    <button ion-button (click)="goToPage2()">Go to Page 2</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
diff --git a/src/components/menu/test/basic/page2.html b/src/components/menu/test/basic/page2.html
index 8c24b208ad0..55cc7ec7df5 100644
--- a/src/components/menu/test/basic/page2.html
+++ b/src/components/menu/test/basic/page2.html
@@ -2,7 +2,7 @@
 
   <ion-navbar>
 
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
 
@@ -20,11 +20,11 @@
   <h3>Page 2</h3>
 
   <p>
-    <button menuToggle class="e2eContentToggleMenu">Toggle Left Menu</button>
+    <button ion-button menuToggle class="e2eContentToggleMenu">Toggle Left Menu</button>
   </p>
 
   <p>
-    <button (click)="page3()">Go to page 3</button>
+    <button ion-button (click)="page3()">Go to page 3</button>
   </p>
 
 </ion-content>
diff --git a/src/components/menu/test/basic/page3.html b/src/components/menu/test/basic/page3.html
index ecb7fe5aa23..881f39bd0c0 100644
--- a/src/components/menu/test/basic/page3.html
+++ b/src/components/menu/test/basic/page3.html
@@ -1,13 +1,13 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle="left">
+    <button ion-button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Menu
     </ion-title>
-    <button menuToggle="right" right>
+    <button ion-button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-navbar>
@@ -20,7 +20,7 @@
   <h3>Page 3</h3>
 
   <p>
-    <button menuToggle="right">Toggle Right Menu</button>
+    <button ion-button menuToggle="right">Toggle Right Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
diff --git a/src/components/menu/test/disable-swipe/page1.html b/src/components/menu/test/disable-swipe/page1.html
index 19ed542a18b..daf112d36ca 100644
--- a/src/components/menu/test/disable-swipe/page1.html
+++ b/src/components/menu/test/disable-swipe/page1.html
@@ -1,13 +1,13 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle="left">
+    <button ion-button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Main
     </ion-title>
-    <button menuToggle="right" right secondary>
+    <button ion-button menuToggle="right" right secondary>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-navbar>
@@ -21,13 +21,13 @@ <h3>Page 1</h3>
   <p>Left Menu Swipe Enabled: {{ leftMenuSwipeEnabled }}</p>
 
   <p>
-    <button (click)="toggleLeftMenuSwipeable()">Toggle Left Menu Swipeable</button>
+    <button ion-button (click)="toggleLeftMenuSwipeable()">Toggle Left Menu Swipeable</button>
   </p>
 
   <p>Right Menu Swipe Enabled: {{ rightMenuSwipeEnabled }}</p>
 
   <p>
-    <button (click)="toggleRightMenuSwipeable()">Toggle Right Menu Swipeable</button>
+    <button ion-button (click)="toggleRightMenuSwipeable()">Toggle Right Menu Swipeable</button>
   </p>
 
 </ion-content>
diff --git a/src/components/menu/test/enable-disable/page1.html b/src/components/menu/test/enable-disable/page1.html
index 2e629d9ec46..2173ea66338 100644
--- a/src/components/menu/test/enable-disable/page1.html
+++ b/src/components/menu/test/enable-disable/page1.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle="left">
+    <button ion-button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
@@ -17,7 +17,7 @@
   <h3> Page 1 </h3>
 
   <p>
-    <button menuToggle="left">Toggle Menu</button>
+    <button ion-button menuToggle="left">Toggle Menu</button>
   </p>
 
   <p>This page has two left menus, but only one is active at a time.</p>
diff --git a/src/components/menu/test/enable-disable/page2.html b/src/components/menu/test/enable-disable/page2.html
index 096e330b072..72ffb73500c 100644
--- a/src/components/menu/test/enable-disable/page2.html
+++ b/src/components/menu/test/enable-disable/page2.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle="left">
+    <button ion-button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
@@ -17,7 +17,7 @@
   <h3> Page 2 </h3>
 
   <p>
-    <button menuToggle="left">Toggle Menu</button>
+    <button ion-button menuToggle="left">Toggle Menu</button>
   </p>
 
   <p>This page has two left menus, but only one is active at a time.</p>
diff --git a/src/components/menu/test/multiple/page1.html b/src/components/menu/test/multiple/page1.html
index 6b5c3edb827..20d40198cd4 100644
--- a/src/components/menu/test/multiple/page1.html
+++ b/src/components/menu/test/multiple/page1.html
@@ -1,7 +1,7 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
@@ -17,15 +17,15 @@
   <h4>Active Menu: {{ activeMenu }}</h4>
 
   <p>
-    <button secondary (click)="menu1Active()">Make Menu 1 Active</button>
+    <button ion-button secondary (click)="menu1Active()">Make Menu 1 Active</button>
   </p>
 
   <p>
-    <button danger (click)="menu2Active()">Make Menu 2 Active</button>
+    <button ion-button danger (click)="menu2Active()">Make Menu 2 Active</button>
   </p>
 
   <p>
-    <button [menuToggle]="activeMenu">Toggle Menu</button>
+    <button ion-button [menuToggle]="activeMenu">Toggle Menu</button>
   </p>
 
   <p>This page has two left menus, but only one is active at a time.</p>
diff --git a/src/components/menu/test/overlay/page1.html b/src/components/menu/test/overlay/page1.html
index 8956609498f..5ce04fd927d 100644
--- a/src/components/menu/test/overlay/page1.html
+++ b/src/components/menu/test/overlay/page1.html
@@ -1,13 +1,13 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle="myMenuId">
+    <button ion-button menuToggle="myMenuId">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Overlay Menu
     </ion-title>
-    <button menuToggle="myMenuId2" end>
+    <button ion-button menuToggle="myMenuId2" end>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-navbar>
@@ -18,11 +18,11 @@
 <ion-content #content padding>
 
   <p>
-    <button menuToggle="myMenuId">Toggle Left Overlay Menu</button>
+    <button ion-button menuToggle="myMenuId">Toggle Left Overlay Menu</button>
   </p>
 
   <p>
-    <button menuToggle="myMenuId2">Toggle Right Overlay Menu</button>
+    <button ion-button menuToggle="myMenuId2">Toggle Right Overlay Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
diff --git a/src/components/menu/test/push/page1.html b/src/components/menu/test/push/page1.html
index 308e0b3e0ef..b8d81f29ad0 100644
--- a/src/components/menu/test/push/page1.html
+++ b/src/components/menu/test/push/page1.html
@@ -1,13 +1,13 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle="left">
+    <button ion-button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Push Menu
     </ion-title>
-    <button menuToggle="right" end>
+    <button ion-button menuToggle="right" end>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-navbar>
@@ -18,11 +18,11 @@
 <ion-content #content padding>
 
   <p>
-    <button menuToggle="left">Toggle Left Push Menu</button>
+    <button ion-button menuToggle="left">Toggle Left Push Menu</button>
   </p>
 
   <p>
-    <button menuToggle="right">Toggle Right Push Menu</button>
+    <button ion-button menuToggle="right">Toggle Right Push Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
diff --git a/src/components/menu/test/reveal/page1.html b/src/components/menu/test/reveal/page1.html
index 73d5f8bcb30..10d58e43521 100644
--- a/src/components/menu/test/reveal/page1.html
+++ b/src/components/menu/test/reveal/page1.html
@@ -1,13 +1,13 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Reveal Menu
     </ion-title>
-    <button menuToggle="right" end>
+    <button ion-button menuToggle="right" end>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-navbar>
@@ -18,11 +18,11 @@
 <ion-content #content padding>
 
   <p>
-    <button menuToggle>Toggle Left Reveal Menu</button>
+    <button ion-button menuToggle>Toggle Left Reveal Menu</button>
   </p>
 
   <p>
-    <button menuToggle="right">Toggle Right Reveal Menu</button>
+    <button ion-button menuToggle="right">Toggle Right Reveal Menu</button>
   </p>
 
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
diff --git a/src/components/modal/test/basic/index.ts b/src/components/modal/test/basic/index.ts
index ee4c7c8d6d3..5e5397fa75e 100644
--- a/src/components/modal/test/basic/index.ts
+++ b/src/components/modal/test/basic/index.ts
@@ -132,7 +132,7 @@ class E2EPage {
   </ion-header>
 
   <ion-content>
-    <button full (click)="submit()">Submit</button>
+    <button ion-button full (click)="submit()">Submit</button>
   </ion-content>
   `
 })
@@ -154,7 +154,7 @@ class NavigableModal {
   </ion-header>
 
   <ion-content>
-    <button full (click)="submit()">Submit</button>
+    <button ion-button full (click)="submit()">Submit</button>
   </ion-content>
   `
 })
@@ -187,7 +187,7 @@ class NavigableModal2 {
           <ion-input [(ngModel)]="data.name"></ion-input>
         </ion-item>
       </ion-list>
-      <button full (click)="submit()">Submit</button>
+      <button ion-button full (click)="submit()">Submit</button>
     </ion-content>
   `,
   providers: [SomeComponentProvider]
@@ -243,7 +243,7 @@ class ModalPassData {
     </ion-header>
 
     <ion-content padding>
-      <button block danger (click)="dismiss()" class="e2eCloseToolbarModal">
+      <button ion-button block danger (click)="dismiss()" class="e2eCloseToolbarModal">
         Dismission Modal
       </button>
 
@@ -257,7 +257,7 @@ class ModalPassData {
 
       <div>Aenean rhoncus urna at interdum blandit. Donec ac massa nec libero vehicula tincidunt. Sed sit amet hendrerit risus. Aliquam vitae vestibulum ipsum, non feugiat orci. Vivamus eu rutrum elit. Nulla dapibus tortor non dignissim pretium. Nulla in luctus turpis. Etiam non mattis tortor, at aliquet ex. Nunc ut ante varius, auctor dui vel, volutpat elit. Nunc laoreet augue sit amet ultrices porta. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum pellentesque lobortis est, ut tincidunt ligula mollis sit amet. In porta risus arcu, quis pellentesque dolor mattis non. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;</div>
 
-      <button block danger (click)="dismiss()" class="e2eCloseToolbarModal">
+      <button ion-button block danger (click)="dismiss()" class="e2eCloseToolbarModal">
         Dismission Modal
       </button>
     </ion-content>
@@ -282,7 +282,7 @@ class ToolbarModal {
     <ion-header>
       <ion-toolbar secondary>
         <ion-buttons start>
-          <button (click)="dismiss()">Close</button>
+          <button ion-button (click)="dismiss()">Close</button>
         </ion-buttons>
         <ion-title>Modal w/ Inputs</ion-title>
       </ion-toolbar>
@@ -305,7 +305,7 @@ class ToolbarModal {
           </ion-item>
         </ion-list>
         <div padding>
-          <button block large type="submit" [disabled]="!addForm.valid">Save</button>
+          <button ion-button block large type="submit" [disabled]="!addForm.valid">Save</button>
         </div>
       </form>
     </ion-content>
@@ -371,17 +371,17 @@ class ContactUs {
       <ion-navbar>
         <ion-title>First Page Header</ion-title>
         <ion-buttons start>
-          <button class="e2eCloseMenu" (click)="dismiss()">Close</button>
+          <button ion-button class="e2eCloseMenu" (click)="dismiss()">Close</button>
         </ion-buttons>
       </ion-navbar>
     </ion-header>
 
     <ion-content padding>
       <p>
-        <button (click)="push()">Push (Go to 2nd)</button>
+        <button ion-button (click)="push()">Push (Go to 2nd)</button>
       </p>
       <p>
-        <button (click)="openActionSheet()">Open Action Sheet</button>
+        <button ion-button (click)="openActionSheet()">Open Action Sheet</button>
       </p>
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
@@ -484,7 +484,7 @@ class ModalFirstPage {
     </ion-header>
     <ion-content padding>
       <p>
-        <button (click)="navCtrl.pop()">Pop (Go back to 1st)</button>
+        <button ion-button (click)="navCtrl.pop()">Pop (Go back to 1st)</button>
       </p>
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
       <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
diff --git a/src/components/modal/test/basic/main.html b/src/components/modal/test/basic/main.html
index dc1b62252e3..469ac549e0d 100644
--- a/src/components/modal/test/basic/main.html
+++ b/src/components/modal/test/basic/main.html
@@ -10,22 +10,22 @@
 <ion-content padding>
 
   <p>
-    <button (click)="presentModal()">Present modal, pass params</button>
+    <button ion-button (click)="presentModal()">Present modal, pass params</button>
   </p>
   <p>
-    <button (click)="presentNavigableModal()">Present modal, push page</button>
+    <button ion-button (click)="presentNavigableModal()">Present modal, push page</button>
   </p>
   <p>
-    <button class="e2eOpenModal" (click)="presentModalChildNav()">Present modal w/ child ion-nav</button>
+    <button ion-button class="e2eOpenModal" (click)="presentModalChildNav()">Present modal w/ child ion-nav</button>
   </p>
   <p>
-    <button class="e2eOpenToolbarModal" (click)="presentToolbarModal()">Present modal w/ toolbar</button>
+    <button ion-button class="e2eOpenToolbarModal" (click)="presentToolbarModal()">Present modal w/ toolbar</button>
   </p>
   <p>
-    <button (click)="presentModalWithInputs()">Present modal w/ inputs</button>
+    <button ion-button (click)="presentModalWithInputs()">Present modal w/ inputs</button>
   </p>
   <p>
-    <button (click)="presentModalCustomAnimation()">Modal: Custom Animation</button>
+    <button ion-button (click)="presentModalCustomAnimation()">Modal: Custom Animation</button>
   </p>
   <p>
     {{platforms | json}}
diff --git a/src/components/nav/nav-controller.ts b/src/components/nav/nav-controller.ts
index 44d264dd8d4..658055e657e 100644
--- a/src/components/nav/nav-controller.ts
+++ b/src/components/nav/nav-controller.ts
@@ -141,7 +141,7 @@ import { ViewController } from './view-controller';
  *    </ion-header>
  *
  *    <ion-content>
- *      <button (click)="pushPage()">
+ *      <button ion-button (click)="pushPage()">
  *        Go to OtherPage
  *      </button>
  *    </ion-content>
diff --git a/src/components/nav/nav-pop.ts b/src/components/nav/nav-pop.ts
index 3ed4e370764..3c9c42653ae 100644
--- a/src/components/nav/nav-pop.ts
+++ b/src/components/nav/nav-pop.ts
@@ -12,7 +12,7 @@ import { noop } from '../../util/util';
  * ```html
  * <ion-content>
  *
- *  <button navPop>Go Back</button>
+ *  <button ion-button navPop>Go Back</button>
  *
  * </ion-content>
  * ```
diff --git a/src/components/nav/nav-push.ts b/src/components/nav/nav-push.ts
index c22414b9d02..b901bfb19b4 100644
--- a/src/components/nav/nav-push.ts
+++ b/src/components/nav/nav-push.ts
@@ -11,14 +11,14 @@ import { noop } from '../../util/util';
  *
  * @usage
  * ```html
- * <button [navPush]="pushPage"></button>
+ * <button ion-button [navPush]="pushPage"></button>
  * ```
  *
  * To specify parameters you can use array syntax or the `navParams`
  * property:
  *
  * ```html
- * <button [navPush]="pushPage" [navParams]="params">Go</button>
+ * <button ion-button [navPush]="pushPage" [navParams]="params">Go</button>
  * ```
  *
  * Where `pushPage` and `params` are specified in your component,
@@ -29,7 +29,7 @@ import { noop } from '../../util/util';
  * import { LoginPage } from './login';
  *
  * @Component({
- *   template: `<button [navPush]="pushPage" [navParams]="params">Go</button>`
+ *   template: `<button ion-button [navPush]="pushPage" [navParams]="params">Go</button>`
  * })
  * class MyPage {
  *   constructor(){
diff --git a/src/components/nav/test/basic/index.ts b/src/components/nav/test/basic/index.ts
index 301a7da0b06..8e23c6699be 100644
--- a/src/components/nav/test/basic/index.ts
+++ b/src/components/nav/test/basic/index.ts
@@ -17,10 +17,10 @@ class MyCmpTest {}
       <ion-navbar>
         <ion-title>{{title}}</ion-title>
         <ion-buttons start>
-          <button><ion-icon name="star"></ion-icon></button>
+          <button ion-button icon-only><ion-icon name="star"></ion-icon></button>
         </ion-buttons>
         <ion-buttons end>
-          <button>S1g</button>
+          <button ion-button>S1g</button>
         </ion-buttons>
       </ion-navbar>
     </ion-header>
@@ -52,7 +52,7 @@ class MyCmpTest {}
         <button ion-item (click)="quickPop()">New pop during transition</button>
         <button ion-item (click)="reload()">Reload</button>
         <button ion-item (click)="scrollToBottom()">Scroll to bottom</button>
-        <button *ngFor="let i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
+        <button ion-item *ngFor="let i of pages" (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
         <button ion-item (click)="content.scrollToTop()">Scroll to top</button>
       </ion-list>
       <my-cmp></my-cmp>
@@ -135,13 +135,13 @@ class FirstPage {
     <ion-content padding>
       <h1>Full page</h1>
       <p>This page does not have a nav bar!</p>
-      <p><button (click)="navCtrl.pop()">Pop</button></p>
-      <p><button class="e2eFrom2To3" (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button></p>
-      <p><button (click)="pushAnother()">Push to AnotherPage</button></p>
-      <p><button (click)="pushFirstPage()">Push to FirstPage</button></p>
-      <p><button class="e2eFrom2To1" navPop>Pop with NavPop (Go back to 1st)</button></p>
-      <p><button (click)="setPages()">setPages() (Go to PrimaryHeaderPage, FirstPage 1st in history)</button></p>
-      <p><button (click)="presentAlert()">Present Alert</button></p>
+      <p><button ion-button (click)="navCtrl.pop()">Pop</button></p>
+      <p><button ion-button class="e2eFrom2To3" (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button></p>
+      <p><button ion-button (click)="pushAnother()">Push to AnotherPage</button></p>
+      <p><button ion-button (click)="pushFirstPage()">Push to FirstPage</button></p>
+      <p><button ion-button class="e2eFrom2To1" navPop>Pop with NavPop (Go back to 1st)</button></p>
+      <p><button ion-button (click)="setPages()">setPages() (Go to PrimaryHeaderPage, FirstPage 1st in history)</button></p>
+      <p><button ion-button (click)="presentAlert()">Present Alert</button></p>
     </ion-content>
   `
 })
@@ -209,7 +209,7 @@ class FullPage {
       <ion-navbar primary>
         <ion-title>Primary Color Page Header</ion-title>
         <ion-buttons end>
-          <button>S1g</button>
+          <button ion-button>S1g</button>
         </ion-buttons>
       </ion-navbar>
       <ion-toolbar no-border-top>
@@ -218,16 +218,16 @@ class FullPage {
     </ion-header>
 
     <ion-content padding fullscreen>
-      <p><button class="e2eFrom3To2" (click)="navCtrl.pop()">Pop</button></p>
-      <p><button (click)="pushAnother()">Push to AnotherPage</button></p>
-      <p><button (click)="pushFullPage()">Push to FullPage</button></p>
-      <p><button (click)="setRoot()">setRoot(AnotherPage)</button></p>
-      <p><button (click)="navCtrl.popToRoot()">Pop to root</button></p>
-      <p><button id="insert" (click)="insert()">Insert first page into history before this</button></p>
-      <p><button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
+      <p><button ion-button class="e2eFrom3To2" (click)="navCtrl.pop()">Pop</button></p>
+      <p><button ion-button (click)="pushAnother()">Push to AnotherPage</button></p>
+      <p><button ion-button (click)="pushFullPage()">Push to FullPage</button></p>
+      <p><button ion-button (click)="setRoot()">setRoot(AnotherPage)</button></p>
+      <p><button ion-button (click)="navCtrl.popToRoot()">Pop to root</button></p>
+      <p><button ion-button id="insert" (click)="insert()">Insert first page into history before this</button></p>
+      <p><button ion-button id="remove" (click)="removeSecond()">Remove second page in history</button></p>
       <div class="yellow"><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f></div>
       <ion-fixed style="bottom:0">
-        <button (click)="presentAlert()">fixed button (alert)</button>
+        <button ion-button (click)="presentAlert()">fixed button (alert)</button>
       </ion-fixed>
       <ion-fixed style="pointer-events: none; top:0; bottom:0; right:0; width:50%; background: rgba(0,0,0,0.5);"></ion-fixed>
     </ion-content>
diff --git a/src/components/nav/test/child-navs/index.ts b/src/components/nav/test/child-navs/index.ts
index 860bd10c422..11d0e81b260 100644
--- a/src/components/nav/test/child-navs/index.ts
+++ b/src/components/nav/test/child-navs/index.ts
@@ -21,7 +21,7 @@ ionicBootstrap(E2EApp);
   </ion-header>
 
   <ion-content>
-    <button primary (click)="goToPage()" class="nested-children-test">
+    <button ion-button primary (click)="goToPage()" class="nested-children-test">
       Nested Children Test
     </button>
   </ion-content>
diff --git a/src/components/nav/test/insert-views/index.ts b/src/components/nav/test/insert-views/index.ts
index 46c420684b6..b719154f8e4 100644
--- a/src/components/nav/test/insert-views/index.ts
+++ b/src/components/nav/test/insert-views/index.ts
@@ -11,7 +11,7 @@ import { ionicBootstrap, NavController } from '../../../../../src';
     </ion-header>
 
     <ion-content padding>
-      <button block (click)="pushPage()">Push Page</button>
+      <button ion-button block (click)="pushPage()">Push Page</button>
     </ion-content>`,
 })
 class FirstPage {
@@ -33,7 +33,7 @@ class FirstPage {
 
     <ion-content padding>
       <h1>Second page</h1>
-      <button block (click)="insertPage()">Insert Page</button>
+      <button ion-button block (click)="insertPage()">Insert Page</button>
     </ion-content>
   `
 })
diff --git a/src/components/nav/test/memory/index.ts b/src/components/nav/test/memory/index.ts
index 74d4a3286a9..83d24606190 100644
--- a/src/components/nav/test/memory/index.ts
+++ b/src/components/nav/test/memory/index.ts
@@ -10,8 +10,8 @@ let count = 0;
   template: `
     <ion-content padding text-center>
       <p>Page 1</p>
-      <button (click)="stop()">Stop</button>
-      <button (click)="play()">Play</button>
+      <button ion-button (click)="stop()">Stop</button>
+      <button ion-button (click)="play()">Play</button>
     </ion-content>
   `
 })
@@ -44,8 +44,8 @@ class Page1 {
   template: `
     <ion-content padding text-center>
       <p>Page 2</p>
-      <button (click)="stop()">Stop</button>
-      <button (click)="play()">Play</button>
+      <button ion-button (click)="stop()">Stop</button>
+      <button ion-button (click)="play()">Play</button>
     </ion-content>
   `
 })
diff --git a/src/components/nav/test/nested/index.ts b/src/components/nav/test/nested/index.ts
index cda61a81bf8..83521b634c3 100644
--- a/src/components/nav/test/nested/index.ts
+++ b/src/components/nav/test/nested/index.ts
@@ -11,8 +11,8 @@ import { Config, Nav, App } from '../../../../../src';
       </ion-navbar>
     </ion-header>
     <ion-content style="text-align:center;" padding>
-      <p><button (click)="goToAccount()">Login</button></p>
-      <p><button (click)="goBack()">App goBack()</button></p>
+      <p><button ion-button (click)="goToAccount()">Login</button></p>
+      <p><button ion-button (click)="goBack()">App goBack()</button></p>
     </ion-content>
   `
 })
@@ -93,16 +93,16 @@ export class Account {
   template: `
     <ion-header>
       <ion-navbar primary>
-        <button menuToggle>
+        <button ion-button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>Account Dashboard</ion-title>
       </ion-navbar>
     </ion-header>
     <ion-content padding>
-      <p><button (click)="goToProfile()">Profile</button></p>
-      <p><button (click)="logOut()">Logout</button></p>
-      <p><button (click)="goBack()">App goBack()</button></p>
+      <p><button ion-button (click)="goToProfile()">Profile</button></p>
+      <p><button ion-button (click)="logOut()">Logout</button></p>
+      <p><button ion-button (click)="goBack()">App goBack()</button></p>
     </ion-content>
   `
 })
@@ -130,16 +130,16 @@ export class Dashboard {
   template: `
     <ion-header>
       <ion-navbar danger>
-        <button menuToggle>
+        <button ion-button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>Account Profile</ion-title>
       </ion-navbar>
     </ion-header>
     <ion-content padding>
-      <p><button (click)="goToDashboard()">Dashboard</button></p>
-      <p><button (click)="logOut()">Logout</button></p>
-      <p><button (click)="goBack()">App goBack()</button></p>
+      <p><button ion-button (click)="goToDashboard()">Dashboard</button></p>
+      <p><button ion-button (click)="logOut()">Logout</button></p>
+      <p><button ion-button (click)="goBack()">App goBack()</button></p>
     </ion-content>
   `
 })
diff --git a/src/components/navbar/navbar.ts b/src/components/navbar/navbar.ts
index f82e8b3b461..1c0be949a13 100644
--- a/src/components/navbar/navbar.ts
+++ b/src/components/navbar/navbar.ts
@@ -74,7 +74,7 @@ class ToolbarBackground {
  * <ion-header>
  *
  *   <ion-navbar>
- *     <button menuToggle>
+ *     <button ion-button menuToggle>
  *       <ion-icon name="menu"></ion-icon>
  *     </button>
  *
@@ -83,7 +83,7 @@ class ToolbarBackground {
  *     </ion-title>
  *
  *     <ion-buttons end>
- *       <button (click)="openModal()">
+ *       <button ion-button (click)="openModal()">
  *         <ion-icon name="options"></ion-icon>
  *       </button>
  *     </ion-buttons>
@@ -99,7 +99,7 @@ class ToolbarBackground {
   selector: 'ion-navbar',
   template: `
     <div class="toolbar-background"></div>
-    <button category="bar-button" class="back-button" [hidden]="_hideBb">
+    <button ion-button="bar-button" class="back-button" [hidden]="_hideBb">
       <span class="button-inner">
         <ion-icon class="back-button-icon" [name]="_bbIcon"></ion-icon>
         <span class="back-button-text">
diff --git a/src/components/picker/picker-component.ts b/src/components/picker/picker-component.ts
index b3f95ef4042..cdd69fc2821 100644
--- a/src/components/picker/picker-component.ts
+++ b/src/components/picker/picker-component.ts
@@ -24,7 +24,7 @@ import { ViewController } from '../nav/view-controller';
   template: `
     <div *ngIf="col.prefix" class="picker-prefix" [style.width]="col.prefixWidth">{{col.prefix}}</div>
     <div class="picker-opts" #colEle [style.width]="col.optionsWidth">
-      <button *ngFor="let o of col.options; let i=index" [style.transform]="o._trans" [style.transitionDuration]="o._dur" [style.webkitTransform]="o._trans" [style.webkitTransitionDuration]="o._dur" [class.picker-opt-selected]="col.selectedIndex === i" [class.picker-opt-disabled]="o.disabled" (click)="optClick($event, i)" type="button" category="picker-opt">
+      <button ion-button="picker-opt" *ngFor="let o of col.options; let i=index" [style.transform]="o._trans" [style.transitionDuration]="o._dur" [style.webkitTransform]="o._trans" [style.webkitTransitionDuration]="o._dur" [class.picker-opt-selected]="col.selectedIndex === i" [class.picker-opt-disabled]="o.disabled" (click)="optClick($event, i)" type="button">
         {{o.text}}
       </button>
     </div>
@@ -355,7 +355,7 @@ export class PickerColumnCmp {
     <div class="picker-wrapper">
       <div class="picker-toolbar">
         <div *ngFor="let b of d.buttons" class="picker-toolbar-button" [ngClass]="b.cssRole">
-          <button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
+          <button ion-button (click)="btnClick(b)" [ngClass]="b.cssClass" class="picker-button" clear>
             {{b.text}}
           </button>
         </div>
diff --git a/src/components/picker/test/basic/main.html b/src/components/picker/test/basic/main.html
index f0b36486703..0ea68438166 100644
--- a/src/components/picker/test/basic/main.html
+++ b/src/components/picker/test/basic/main.html
@@ -9,19 +9,19 @@
 
 <ion-content padding>
 
-  <button block class="e2eTwoColumns" (click)="twoColumns()">
+  <button ion-button block class="e2eTwoColumns" (click)="twoColumns()">
     2 Columns
   </button>
 
-  <button block class="e2ePrefixLabel" (click)="prefixLabel()">
+  <button ion-button block class="e2ePrefixLabel" (click)="prefixLabel()">
     Prefix Label
   </button>
 
-  <button block class="e2eSuffixLabel" (click)="suffixLabel()">
+  <button ion-button block class="e2eSuffixLabel" (click)="suffixLabel()">
     Suffix Label
   </button>
 
-  <button block class="e2eColumnSizesLabel" (click)="columnSizes()">
+  <button ion-button block class="e2eColumnSizesLabel" (click)="columnSizes()">
     Columns with sizes
   </button>
 
diff --git a/src/components/popover/popover.ts b/src/components/popover/popover.ts
index 4b7754dc3be..062f2cc7c68 100644
--- a/src/components/popover/popover.ts
+++ b/src/components/popover/popover.ts
@@ -103,7 +103,7 @@ export class Popover extends ViewController {
  * which creates and presents the popover:
  *
  * ```html
- * <button (click)="presentPopover($event)">
+ * <button ion-button (click)="presentPopover($event)">
  *   <ion-icon name="more"></ion-icon>
  * </button>
  * ```
diff --git a/src/components/popover/test/basic/index.ts b/src/components/popover/test/basic/index.ts
index ad99dcc6132..02466f1e4cb 100644
--- a/src/components/popover/test/basic/index.ts
+++ b/src/components/popover/test/basic/index.ts
@@ -8,24 +8,24 @@ import { ionicBootstrap, PopoverController, NavParams, ViewController } from '..
       <ion-list radio-group [(ngModel)]="fontFamily" (ionChange)="changeFontFamily()">
         <ion-row>
           <ion-col>
-            <button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>
+            <button ion-button (click)="changeFontSize('smaller')" ion-item detail-none class="text-button text-smaller">A</button>
           </ion-col>
           <ion-col>
-            <button (click)="changeFontSize('larger')" ion-item detail-none class="text-button text-larger">A</button>
+            <button ion-button (click)="changeFontSize('larger')" ion-item detail-none class="text-button text-larger">A</button>
           </ion-col>
         </ion-row>
         <ion-row class="row-dots">
           <ion-col>
-            <button (click)="changeBackground('white')" category="dot" class="dot-white" [class.selected]="background == 'white'"></button>
+            <button ion-button="dot" (click)="changeBackground('white')" class="dot-white" [class.selected]="background == 'white'"></button>
           </ion-col>
           <ion-col>
-            <button (click)="changeBackground('tan')" category="dot" class="dot-tan" [class.selected]="background == 'tan'"></button>
+            <button ion-button="dot" (click)="changeBackground('tan')" class="dot-tan" [class.selected]="background == 'tan'"></button>
           </ion-col>
           <ion-col>
-            <button (click)="changeBackground('grey')" category="dot" class="dot-grey" [class.selected]="background == 'grey'"></button>
+            <button ion-button="dot" (click)="changeBackground('grey')" class="dot-grey" [class.selected]="background == 'grey'"></button>
           </ion-col>
           <ion-col>
-            <button (click)="changeBackground('black')" category="dot" class="dot-black" [class.selected]="background == 'black'"></button>
+            <button ion-button="dot" (click)="changeBackground('black')" class="dot-black" [class.selected]="background == 'black'"></button>
           </ion-col>
         </ion-row>
         <ion-item class="text-athelas">
diff --git a/src/components/popover/test/basic/main.html b/src/components/popover/test/basic/main.html
index d031afd4481..8eaa497bffe 100644
--- a/src/components/popover/test/basic/main.html
+++ b/src/components/popover/test/basic/main.html
@@ -2,19 +2,19 @@
 
   <ion-navbar primary>
     <ion-buttons left>
-      <button (click)="presentRadioPopover($event)">
+      <button ion-button icon-only (click)="presentRadioPopover($event)">
         <ion-icon name="person"></ion-icon>
       </button>
-      <button (click)="presentLongListPopover($event)">
+      <button ion-button icon-only (click)="presentLongListPopover($event)">
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-title>Popover</ion-title>
     <ion-buttons end>
-      <button (click)="presentListPopover($event)">
+      <button ion-button icon-only (click)="presentListPopover($event)">
         <ion-icon name="options"></ion-icon>
       </button>
-      <button (click)="presentRadioPopover($event)">
+      <button ion-button icon-only (click)="presentRadioPopover($event)">
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -43,13 +43,13 @@
   </ion-grid>
 
   <div padding #popoverText class="text-to-change">
-    <button block secondary (click)="presentLongListPopover($event)">
+    <button ion-button block secondary (click)="presentLongListPopover($event)">
       Present Long List Popover
     </button>
 
     <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris vel ipsum in purus mollis dictum eget vitae purus. Nulla ultrices est odio, a maximus velit pretium ac. Donec vel elementum mi. Proin elementum pulvinar neque, in lacinia nibh tempus auctor. Nam sapien velit, commodo ac nibh a, maximus ullamcorper nunc. Integer luctus tortor dignissim, dictum neque at, scelerisque purus. Vivamus nec erat vel magna posuere euismod. Sed ac augue eu tellus tincidunt fermentum eget sit amet nunc. Donec sit amet mi libero. Cras nunc arcu, ultrices nec sapien eu, convallis posuere libero. Pellentesque vulputate lacus eros, at lobortis lorem egestas et. Vestibulum tempus quam in efficitur lobortis. Maecenas consectetur consequat sem pharetra aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</div>
 
-    <button block secondary (click)="presentNoEventPopover()">
+    <button ion-button block secondary (click)="presentNoEventPopover()">
       Present No Event Popover
     </button>
 
@@ -70,10 +70,10 @@
   <ion-toolbar>
     <ion-title>Popover</ion-title>
     <ion-buttons start>
-      <button (click)="presentListPopover($event)">
+      <button ion-button icon-only (click)="presentListPopover($event)">
         <ion-icon name="more"></ion-icon>
       </button>
-      <button (click)="presentLongListPopover($event)">
+      <button ion-button icon-only (click)="presentLongListPopover($event)">
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
diff --git a/src/components/radio/radio-button.ts b/src/components/radio/radio-button.ts
index eec525b5cdf..bfa9d912c89 100644
--- a/src/components/radio/radio-button.ts
+++ b/src/components/radio/radio-button.ts
@@ -47,14 +47,13 @@ import { RadioGroup } from './radio-group';
     <div class="radio-icon" [class.radio-checked]="_checked">
       <div class="radio-inner"></div>
     </div>
-    <button role="radio"
+    <button ion-button="item-cover" 
+            role="radio"
             type="button"
-            category="item-cover"
             [id]="id"
             [attr.aria-checked]="_checked"
             [attr.aria-labelledby]="_labelId"
-            [attr.aria-disabled]="_disabled"
-            class="item-cover">
+            [attr.aria-disabled]="_disabled">
     </button>
   `,
   host: {
diff --git a/src/components/radio/test/basic/main.html b/src/components/radio/test/basic/main.html
index 036fd224b1c..0530154fe91 100644
--- a/src/components/radio/test/basic/main.html
+++ b/src/components/radio/test/basic/main.html
@@ -58,9 +58,9 @@
   </form>
 
   <div aria-hidden="true" text-center>
-    <button (click)="setApple()" outline small>Select Apple</button>
-    <button (click)="setBanana()" outline small>Select Banana</button>
-    <button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
+    <button ion-button (click)="setApple()" outline small>Select Apple</button>
+    <button ion-button (click)="setBanana()" outline small>Select Banana</button>
+    <button ion-button class="e2eCherry" (click)="setCherry()" outline small>Select Cherry</button>
   </div>
 
   <div padding>
diff --git a/src/components/range/test/basic/page1.html b/src/components/range/test/basic/page1.html
index 1d13d0ff00d..e00b9c858d5 100644
--- a/src/components/range/test/basic/page1.html
+++ b/src/components/range/test/basic/page1.html
@@ -1,13 +1,13 @@
 <ion-header>
 
   <ion-navbar>
-    <button menuToggle="left">
+    <button ion-button menuToggle="left">
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>
       Range
     </ion-title>
-    <button menuToggle="right" right>
+    <button ion-button menuToggle="right" right>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-navbar>
diff --git a/src/components/searchbar/searchbar.ts b/src/components/searchbar/searchbar.ts
index 0596fb35e1f..f915a04f91d 100644
--- a/src/components/searchbar/searchbar.ts
+++ b/src/components/searchbar/searchbar.ts
@@ -30,14 +30,14 @@ import { Debouncer } from '../../util/debouncer';
   selector: 'ion-searchbar',
   template:
     '<div class="searchbar-input-container">' +
-      '<button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear dark class="searchbar-md-cancel">' +
+      '<button ion-button (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" clear dark class="searchbar-md-cancel">' +
         '<ion-icon name="arrow-back"></ion-icon>' +
       '</button>' +
       '<div #searchbarIcon class="searchbar-search-icon"></div>' +
       '<input #searchbarInput [(ngModel)]="_value" [attr.placeholder]="placeholder" (input)="inputChanged($event)" (blur)="inputBlurred($event)" (focus)="inputFocused($event)" class="searchbar-input">' +
-      '<button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
+      '<button ion-button clear class="searchbar-clear-icon" (click)="clearInput($event)" (mousedown)="clearInput($event)"></button>' +
     '</div>' +
-    '<button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
+    '<button ion-button #cancelButton [tabindex]="_isActive ? 1 : -1" clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
   directives: [Icon, NgModel],
   host: {
     '[class.searchbar-has-value]': '_value',
diff --git a/src/components/searchbar/test/basic/main.html b/src/components/searchbar/test/basic/main.html
index 9497f54e450..f999ece5316 100644
--- a/src/components/searchbar/test/basic/main.html
+++ b/src/components/searchbar/test/basic/main.html
@@ -27,6 +27,6 @@ <h5 padding-left> Search - Value passed </h5>
   <ion-searchbar value="mysearch" showCancelButton (ionInput)="triggerInput($event)" (ionCancel)="onCancelSearchbar($event)" (ionClear)="onClearSearchbar($event)" cancelButtonText="Really Long Cancel" dark></ion-searchbar>
 
   <p padding>
-    <button block (click)="changeValue()">Change Value</button>
+    <button ion-button block (click)="changeValue()">Change Value</button>
   </p>
 </ion-content>
diff --git a/src/components/searchbar/test/nav/main.html b/src/components/searchbar/test/nav/main.html
index d2eae7098a6..4e35b4dd542 100644
--- a/src/components/searchbar/test/nav/main.html
+++ b/src/components/searchbar/test/nav/main.html
@@ -9,6 +9,6 @@
 
 <ion-content padding>
 
-  <button block (click)="goToSecond()">Go to Searchbar Page</button>
+  <button ion-button block (click)="goToSecond()">Go to Searchbar Page</button>
 
 </ion-content>
diff --git a/src/components/segment/test/basic/main.html b/src/components/segment/test/basic/main.html
index 53d8f464ab6..ad0ad19ba0c 100644
--- a/src/components/segment/test/basic/main.html
+++ b/src/components/segment/test/basic/main.html
@@ -13,7 +13,7 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons end>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
@@ -96,7 +96,7 @@ <h4>Model style: NgModel</h4>
     </ion-segment-button>
   </ion-segment>
 
-  <button block dark (click)="toggleDisabled()">Toggle Disabled</button>
+  <button ion-button block dark (click)="toggleDisabled()">Toggle Disabled</button>
 
 </ion-content>
 
diff --git a/src/components/segment/test/nav/index.ts b/src/components/segment/test/nav/index.ts
index d71803fe41c..1cef045f35a 100644
--- a/src/components/segment/test/nav/index.ts
+++ b/src/components/segment/test/nav/index.ts
@@ -21,7 +21,7 @@ class SegmentPage {
   template: `
     <ion-header>
       <ion-navbar hideBackButton>
-        <button menuToggle>
+        <button ion-button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>
diff --git a/src/components/segment/test/nav/main.html b/src/components/segment/test/nav/main.html
index 7ae5c26b0b2..1a121be0726 100644
--- a/src/components/segment/test/nav/main.html
+++ b/src/components/segment/test/nav/main.html
@@ -27,13 +27,13 @@
 
   <ion-row>
     <ion-col>
-      <button block (click)="signInType='new'">New</button>
+      <button ion-button block (click)="signInType='new'">New</button>
     </ion-col>
     <ion-col>
-      <button light block (click)="signInType='existing'">Existing</button>
+      <button ion-button light block (click)="signInType='existing'">Existing</button>
     </ion-col>
     <ion-col>
-      <button dark block (click)="signInType='test'" class="e2eSegmentTestButton">Test</button>
+      <button ion-button dark block (click)="signInType='test'" class="e2eSegmentTestButton">Test</button>
     </ion-col>
   </ion-row>
 
@@ -49,6 +49,6 @@
     </div>
  </div>
 
- <button block (click)="goToPage2()">Next Page</button>
+ <button ion-button block (click)="goToPage2()">Next Page</button>
 
 </ion-content>
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index de2f4127c8b..ba0274691f4 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -123,12 +123,11 @@ export const SELECT_VALUE_ACCESSOR = new Provider(
     <div class="select-icon">
       <div class="select-icon-inner"></div>
     </div>
-    <button aria-haspopup="true"
+    <button ion-button="item-cover"
+            aria-haspopup="true"
             [id]="id"
-            category="item-cover"
             [attr.aria-labelledby]="_labelId"
-            [attr.aria-disabled]="_disabled"
-            class="item-cover">
+            [attr.aria-disabled]="_disabled">
     </button>
   `,
   directives: [NgIf],
diff --git a/src/components/select/test/multiple-value/main.html b/src/components/select/test/multiple-value/main.html
index c0d1b88818f..7466f1585d3 100644
--- a/src/components/select/test/multiple-value/main.html
+++ b/src/components/select/test/multiple-value/main.html
@@ -79,7 +79,7 @@
           <ion-option>3</ion-option>
         </ion-select>
       </ion-item>
-      <button full block class="no-margin" type="submit">Submit</button>
+      <button ion-button full block class="no-margin" type="submit">Submit</button>
     </ion-list>
   </form>
 
diff --git a/src/components/select/test/single-value/main.html b/src/components/select/test/single-value/main.html
index 97d9163baf7..efcc2fb6563 100644
--- a/src/components/select/test/single-value/main.html
+++ b/src/components/select/test/single-value/main.html
@@ -104,7 +104,7 @@
     </ion-select>
   </ion-item>
 
-  <button (click)="resetGender()">Reset Gender</button>
+  <button ion-button (click)="resetGender()">Reset Gender</button>
 
   <p aria-hidden="true" padding>
     <code>gender: {{gender}}</code>
diff --git a/src/components/show-hide-when/test/basic/main.html b/src/components/show-hide-when/test/basic/main.html
index 3b53a9dea64..d92f14f9be0 100644
--- a/src/components/show-hide-when/test/basic/main.html
+++ b/src/components/show-hide-when/test/basic/main.html
@@ -3,9 +3,9 @@
   <ion-toolbar>
     <ion-title>Show/Hide When</ion-title>
     <ion-buttons end>
-      <button showWhen="ios">iOS</button>
-      <button showWhen="windows">Windows</button>
-      <button showWhen="android">Android</button>
+      <button ion-button showWhen="ios">iOS</button>
+      <button ion-button showWhen="windows">Windows</button>
+      <button ion-button showWhen="android">Android</button>
     </ion-buttons>
   </ion-toolbar>
 
@@ -14,9 +14,9 @@
 
 <ion-content padding>
 
-  <button showWhen="ios">iOS</button>
-  <button showWhen="windows">Windows</button>
-  <button showWhen="android">Android</button>
+  <button ion-button showWhen="ios">iOS</button>
+  <button ion-button showWhen="windows">Windows</button>
+  <button ion-button showWhen="android">Android</button>
 
   <p showWhen="ios" style="background:blue; color:white">
     showWhen="ios"
@@ -78,6 +78,6 @@
     showWhen="android" hideWhen="landscape"
   </p>
 
-  <button (click)="toggle = !toggle">Toggle Hide When</button>
+  <button ion-button (click)="toggle = !toggle">Toggle Hide When</button>
 
 </ion-content>
diff --git a/src/components/slides/test/controller/main.html b/src/components/slides/test/controller/main.html
index ccf7b2678cb..7fd86a60814 100644
--- a/src/components/slides/test/controller/main.html
+++ b/src/components/slides/test/controller/main.html
@@ -1,23 +1,23 @@
 <ion-slides #mySlider [options]="mySlideOptions" (ionDidChange)="onSlideChanged()" (ionDrag)="onSlideMove($event)" class="my-slides">
   <ion-slide padding>
     <h1>Slide 1</h1>
-    <button block (click)="goToPrevSlide()">Navigate Back</button>
-    <button block (click)="goToNextSlide()">Navigate Forward</button>
-    <button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
-    <button block (click)="getLength()">Get Slide Length</button>
-    <button block (click)="getIndex()">Get Index</button>
+    <button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
+    <button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
+    <button ion-button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
+    <button ion-button block (click)="getLength()">Get Slide Length</button>
+    <button ion-button block (click)="getIndex()">Get Index</button>
   </ion-slide>
   <ion-slide padding>
     <h1>Slide 2</h1>
-    <button block (click)="goToPrevSlide()">Navigate Back</button>
-    <button block (click)="goToNextSlide()">Navigate Forward</button>
-    <button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
-    <button block (click)="getIndex()">Get Index</button>
+    <button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
+    <button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
+    <button ion-button block (click)="goToSlide(2)">Navigate to 3rd Slide</button>
+    <button ion-button block (click)="getIndex()">Get Index</button>
   </ion-slide>
   <ion-slide padding>
     <h1>Slide 3</h1>
-    <button block (click)="goToPrevSlide()">Navigate Back</button>
-    <button block (click)="goToNextSlide()">Navigate Forward</button>
-    <button block (click)="getIndex()">Get Index</button>
+    <button ion-button block (click)="goToPrevSlide()">Navigate Back</button>
+    <button ion-button block (click)="goToNextSlide()">Navigate Forward</button>
+    <button ion-button block (click)="getIndex()">Get Index</button>
   </ion-slide>
 </ion-slides>
diff --git a/src/components/slides/test/intro/main.html b/src/components/slides/test/intro/main.html
index e31c7863861..b6b259d9b97 100644
--- a/src/components/slides/test/intro/main.html
+++ b/src/components/slides/test/intro/main.html
@@ -2,7 +2,7 @@
 
   <ion-navbar>
     <ion-buttons end>
-      <button (click)="skip()">
+      <button ion-button (click)="skip()">
         {{continueText}}
       </button>
     </ion-buttons>
@@ -35,7 +35,7 @@ <h5>Just three steps:</h5>
            <li>There is no step 3</li>
          </ol>
        </div>
-       <button (click)="toggleLastSlide()">Toggle Last Slide</button>
+       <button ion-button (click)="toggleLastSlide()">Toggle Last Slide</button>
     </ion-slide>
     <ion-slide *ngIf="showSlide">
       <h3>Any questions?</h3>
diff --git a/src/components/spinner/test/basic/main.html b/src/components/spinner/test/basic/main.html
index b837b8696cb..19922b84133 100644
--- a/src/components/spinner/test/basic/main.html
+++ b/src/components/spinner/test/basic/main.html
@@ -54,6 +54,6 @@
     </tr>
   </table>
 
-  <button (click)="toggleState()">Toggle Paused</button>
+  <button ion-button (click)="toggleState()">Toggle Paused</button>
 
 </ion-content>
diff --git a/src/components/tabs/test/advanced/modalChat.html b/src/components/tabs/test/advanced/modalChat.html
index 8b34f2d2fb8..5af825aea15 100644
--- a/src/components/tabs/test/advanced/modalChat.html
+++ b/src/components/tabs/test/advanced/modalChat.html
@@ -9,6 +9,6 @@
 
 <ion-content padding>
 
-  <p><button (click)="viewCtrl.dismiss()">Close Modal</button></p>
+  <p><button ion-button (click)="viewCtrl.dismiss()">Close Modal</button></p>
 
 </ion-content>
diff --git a/src/components/tabs/test/advanced/signIn.html b/src/components/tabs/test/advanced/signIn.html
index 1c012f7c747..3d2a5059fdf 100644
--- a/src/components/tabs/test/advanced/signIn.html
+++ b/src/components/tabs/test/advanced/signIn.html
@@ -19,7 +19,7 @@
       <ion-input type="password"></ion-input>
     </ion-item>
     <ion-item>
-      <button block id="signIn" (click)="push()">Sign In</button>
+      <button ion-button block id="signIn" (click)="push()">Sign In</button>
     </ion-item>
   </ion-card>
 
diff --git a/src/components/tabs/test/advanced/tab1page1.html b/src/components/tabs/test/advanced/tab1page1.html
index b9c2d615d9a..821c5a9b6b0 100644
--- a/src/components/tabs/test/advanced/tab1page1.html
+++ b/src/components/tabs/test/advanced/tab1page1.html
@@ -9,10 +9,10 @@
 
 <ion-content padding>
 
-  <p><button id="goToTab1Page2" (click)="push()">Go to Tab 1, Page 2</button></p>
-  <p><button (click)="logout()">Logout</button></p>
-  <p><button (click)="favoritesTab()">Favorites Tab</button></p>
-  <p><button (click)="goBack()">Go Back</button></p>
+  <p><button ion-button id="goToTab1Page2" (click)="push()">Go to Tab 1, Page 2</button></p>
+  <p><button ion-button (click)="logout()">Logout</button></p>
+  <p><button ion-button (click)="favoritesTab()">Favorites Tab</button></p>
+  <p><button ion-button (click)="goBack()">Go Back</button></p>
   <p>UserId: {{userId}}</p>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
diff --git a/src/components/tabs/test/advanced/tab1page2.html b/src/components/tabs/test/advanced/tab1page2.html
index a59f4d5a0ce..c465a60a72e 100644
--- a/src/components/tabs/test/advanced/tab1page2.html
+++ b/src/components/tabs/test/advanced/tab1page2.html
@@ -9,8 +9,8 @@
 
 <ion-content padding>
 
-  <p><button (click)="push()">Go to Tab 1, Page 3</button></p>
-  <p><button id="backToTab1Page1" (click)="navCtrl.pop()">Back to Tab 1, Page 1</button></p>
+  <p><button ion-button (click)="push()">Go to Tab 1, Page 3</button></p>
+  <p><button ion-button id="backToTab1Page1" (click)="navCtrl.pop()">Back to Tab 1, Page 1</button></p>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
 
diff --git a/src/components/tabs/test/advanced/tab1page3.html b/src/components/tabs/test/advanced/tab1page3.html
index 9d56a21e829..f6dc67eaadf 100644
--- a/src/components/tabs/test/advanced/tab1page3.html
+++ b/src/components/tabs/test/advanced/tab1page3.html
@@ -9,7 +9,7 @@
 
 <ion-content padding>
 
-  <p><button (click)="navCtrl.pop()">Back to Tab 1, Page 2</button></p>
+  <p><button ion-button (click)="navCtrl.pop()">Back to Tab 1, Page 2</button></p>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
 
diff --git a/src/components/tabs/test/advanced/tab2page1.html b/src/components/tabs/test/advanced/tab2page1.html
index c2962227046..8c2d595bc2e 100644
--- a/src/components/tabs/test/advanced/tab2page1.html
+++ b/src/components/tabs/test/advanced/tab2page1.html
@@ -9,7 +9,7 @@
 
 <ion-content padding>
 
-  <p><button (click)="push()">Go to Tab 2, Page 2</button></p>
+  <p><button ion-button (click)="push()">Go to Tab 2, Page 2</button></p>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
 
diff --git a/src/components/tabs/test/advanced/tab2page2.html b/src/components/tabs/test/advanced/tab2page2.html
index c9c03b27e61..0ecc30a35fc 100644
--- a/src/components/tabs/test/advanced/tab2page2.html
+++ b/src/components/tabs/test/advanced/tab2page2.html
@@ -9,8 +9,8 @@
 
 <ion-content padding>
 
-  <p><button (click)="push()">Go to Tab 2, Page 3 (no navbar)</button></p>
-  <p><button (click)="navCtrl.pop()">Back to Tab 2, Page 1</button></p>
+  <p><button ion-button (click)="push()">Go to Tab 2, Page 3 (no navbar)</button></p>
+  <p><button ion-button (click)="navCtrl.pop()">Back to Tab 2, Page 1</button></p>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
 
diff --git a/src/components/tabs/test/advanced/tab2page3.html b/src/components/tabs/test/advanced/tab2page3.html
index 3289171ed99..11a7897dcd0 100644
--- a/src/components/tabs/test/advanced/tab2page3.html
+++ b/src/components/tabs/test/advanced/tab2page3.html
@@ -5,7 +5,7 @@ <h2>Tab 2, Page 3</h2>
 
   <p>No Header.</p>
 
-  <p><button (click)="navCtrl.pop()">Back to Tab 2, Page 2</button></p>
+  <p><button ion-button (click)="navCtrl.pop()">Back to Tab 2, Page 2</button></p>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
   <f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
 
diff --git a/src/components/tabs/test/basic/index.ts b/src/components/tabs/test/basic/index.ts
index 2b8325066e6..22d2a899ab3 100644
--- a/src/components/tabs/test/basic/index.ts
+++ b/src/components/tabs/test/basic/index.ts
@@ -9,7 +9,7 @@ import { ionicBootstrap, App, AlertController, ModalController, ViewController,
   <ion-header>
     <ion-toolbar>
       <ion-buttons start>
-        <button (click)="dismiss()">Cancel</button>
+        <button ion-button (click)="dismiss()">Cancel</button>
       </ion-buttons>
 
       <ion-title>
@@ -17,7 +17,7 @@ import { ionicBootstrap, App, AlertController, ModalController, ViewController,
       </ion-title>
 
       <ion-buttons end>
-        <button (click)="dismiss()">Done</button>
+        <button ion-button (click)="dismiss()">Done</button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
@@ -82,10 +82,10 @@ class MyModal {
         <ion-item *ngFor="let i of items">Item {{i}} {{i}} {{i}} {{i}}</ion-item>
       </ion-list>
       <p>
-        <button (click)="selectPrevious()">Select Previous Tab</button>
+        <button ion-button (click)="selectPrevious()">Select Previous Tab</button>
       </p>
       <p>
-        <button (click)="appNavPop()">App Nav Pop</button>
+        <button ion-button (click)="appNavPop()">App Nav Pop</button>
       </p>
     </ion-content>
     `
@@ -127,16 +127,16 @@ export class Tab1 {
             <p>{{session.location}} {{session.location}} {{session.location}}</p>
           </ion-item>
           <ion-item-options>
-            <button primary>Speaker<br>Info</button>
-            <button secondary>Add to<br>Favorites</button>
+            <button ion-button primary>Speaker<br>Info</button>
+            <button ion-button secondary>Add to<br>Favorites</button>
           </ion-item-options>
         </ion-item-sliding>
       </ion-list>
       <p>
-        <button (click)="selectPrevious()">Select Previous Tab</button>
+        <button ion-button (click)="selectPrevious()">Select Previous Tab</button>
       </p>
       <p>
-        <button (click)="appNavPop()">App Nav Pop</button>
+        <button ion-button (click)="appNavPop()">App Nav Pop</button>
       </p>
     </ion-content>
   `
@@ -169,7 +169,7 @@ export class Tab2 {
   template: `
     <ion-header>
       <ion-navbar>
-        <button menuToggle>
+        <button ion-button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>Stopwatch</ion-title>
@@ -179,14 +179,14 @@ export class Tab2 {
     <ion-content padding>
       <h2>Tab 3</h2>
       <p>
-        <button (click)="presentAlert()">Present Alert</button>
-        <button (click)="presentModal()">Present Modal</button>
+        <button ion-button (click)="presentAlert()">Present Alert</button>
+        <button ion-button (click)="presentModal()">Present Modal</button>
       </p>
       <p>
-        <button (click)="selectPrevious()">Select Previous Tab</button>
+        <button ion-button (click)="selectPrevious()">Select Previous Tab</button>
       </p>
       <p>
-        <button (click)="appNavPop()">App Nav Pop</button>
+        <button ion-button (click)="appNavPop()">App Nav Pop</button>
       </p>
     </ion-content>
     `
diff --git a/src/components/tabs/test/ghost/index.ts b/src/components/tabs/test/ghost/index.ts
index 699d63d68e0..793e55387e9 100644
--- a/src/components/tabs/test/ghost/index.ts
+++ b/src/components/tabs/test/ghost/index.ts
@@ -43,7 +43,7 @@ class Tab2 {}
   template: `
     <ion-header>
       <ion-navbar>
-        <button menuToggle>
+        <button ion-button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>Stopwatch</ion-title>
@@ -63,7 +63,7 @@ class Tab3 {}
   template: `
     <ion-header>
       <ion-navbar>
-        <button menuToggle>
+        <button ion-button menuToggle>
           <ion-icon name="menu"></ion-icon>
         </button>
         <ion-title>Quesarito</ion-title>
diff --git a/src/components/toast/test/basic/main.html b/src/components/toast/test/basic/main.html
index 40eded850d4..70ba37f984f 100644
--- a/src/components/toast/test/basic/main.html
+++ b/src/components/toast/test/basic/main.html
@@ -9,13 +9,13 @@
 
 <ion-content padding>
 
-  <button block (click)="showToast()">Show Toast and Navigate</button>
-  <button block (click)="showLongToast()">Show Long Toast</button>
+  <button ion-button block (click)="showToast()">Show Toast and Navigate</button>
+  <button ion-button block (click)="showLongToast()">Show Long Toast</button>
   <br />
-  <button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
-  <button block (click)="showToastWithCloseButton('bottom')" class="e2eOpenToast">With closeButtonText</button>
-  <button block (click)="showToastWithCloseButton('top')">Top With closeButtonText</button>
-  <button block (click)="showToastWithCloseButton('middle')">Middle With closeButtonText</button>
+  <button ion-button block (click)="showDismissDurationToast()">Custom (1.5s) Duration</button>
+  <button ion-button block (click)="showToastWithCloseButton('bottom')" class="e2eOpenToast">With closeButtonText</button>
+  <button ion-button block (click)="showToastWithCloseButton('top')">Top With closeButtonText</button>
+  <button ion-button block (click)="showToastWithCloseButton('middle')">Middle With closeButtonText</button>
 
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lacinia purus ac turpis fermentum, nec accumsan nulla rutrum. Aenean lorem est, luctus id iaculis ac, ultricies quis odio. Aenean imperdiet imperdiet ex et vehicula. Suspendisse vulputate turpis quis ultricies porttitor. Proin malesuada tortor at libero laoreet, eu eleifend enim pulvinar. Nulla facilisi. Fusce sit amet mauris mauris. Mauris consequat libero sed egestas tincidunt.
diff --git a/src/components/toast/toast-component.ts b/src/components/toast/toast-component.ts
index 43111ed6660..4a17f2f9ee4 100644
--- a/src/components/toast/toast-component.ts
+++ b/src/components/toast/toast-component.ts
@@ -21,7 +21,7 @@ import { ViewController } from '../nav/view-controller';
       [class.toast-top]="d.position === 'top'">
       <div class="toast-container">
         <div class="toast-message" id="{{hdrId}}" *ngIf="d.message">{{d.message}}</div>
-        <button clear class="toast-button" *ngIf="d.showCloseButton" (click)="cbClick()">
+        <button ion-button clear class="toast-button" *ngIf="d.showCloseButton" (click)="cbClick()">
           {{ d.closeButtonText || 'Close' }}
          </button>
       </div>
diff --git a/src/components/toggle/test/basic/main.html b/src/components/toggle/test/basic/main.html
index b4bb136e1b4..2be8c5416d1 100644
--- a/src/components/toggle/test/basic/main.html
+++ b/src/components/toggle/test/basic/main.html
@@ -58,9 +58,9 @@
   </form>
 
   <p aria-hidden="true" text-center>
-    <button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
-    <button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
-    <button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
+    <button ion-button (click)="toggleGrapeChecked()" outline small class="e2eGrapeChecked">Grape Checked</button>
+    <button ion-button (click)="toggleGrapeDisabled()" outline small class="e2eGrapeDisabled">Grape Disabled</button>
+    <button ion-button (click)="doSubmit($event)" outline small class="e2eSubmit">Submit</button>
   </p>
 
   <p aria-hidden="true" padding>
diff --git a/src/components/toggle/toggle.ts b/src/components/toggle/toggle.ts
index a53ae828b0c..d038b69b4c8 100644
--- a/src/components/toggle/toggle.ts
+++ b/src/components/toggle/toggle.ts
@@ -55,14 +55,13 @@ export const TOGGLE_VALUE_ACCESSOR = new Provider(
     <div class="toggle-icon" [class.toggle-checked]="_checked" [class.toggle-activated]="_activated">
       <div class="toggle-inner"></div>
     </div>
-    <button role="checkbox"
+    <button ion-button="item-cover"
+            role="checkbox"
             type="button"
-            category="item-cover"
             [id]="id"
             [attr.aria-checked]="_checked"
             [attr.aria-labelledby]="_labelId"
-            [attr.aria-disabled]="_disabled"
-            class="item-cover">
+            [attr.aria-disabled]="_disabled">
     </button>
   `,
   host: {
diff --git a/src/components/toolbar/test/colors/main.html b/src/components/toolbar/test/colors/main.html
index 6e8dfb43a73..a5f7dbe4523 100644
--- a/src/components/toolbar/test/colors/main.html
+++ b/src/components/toolbar/test/colors/main.html
@@ -5,19 +5,19 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-buttons start>
-      <button showWhen="ios">
+      <button ion-button showWhen="ios">
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button>
+      <button ion-button>
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary>
+      <button ion-button secondary>
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -26,15 +26,15 @@
 
   <ion-toolbar no-border-top primary>
     <ion-buttons start>
-      <button showWhen="ios">
+      <button ion-button showWhen="ios">
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button>
+      <button ion-button>
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary>
+      <button ion-button secondary>
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -43,15 +43,15 @@
 
   <ion-toolbar no-border-top primary>
     <ion-buttons start>
-      <button cla showWhen="ios"ss="activated">
+      <button ion-button cla showWhen="ios"ss="activated">
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button class="activated">
+      <button ion-button class="activated">
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary class="activated">
+      <button ion-button secondary class="activated">
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -60,17 +60,17 @@
 
   <ion-toolbar no-border-top secondary>
     <ion-buttons start>
-      <button solid>
+      <button ion-button solid>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button solid>
+      <button ion-button solid>
         <ion-icon name="contact"></ion-icon>
         Solid
       </button>
     </ion-buttons>
     <ion-title>Secondary</ion-title>
     <ion-buttons end>
-      <button solid danger>
+      <button ion-button solid danger>
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -79,17 +79,17 @@
 
   <ion-toolbar no-border-top secondary>
     <ion-buttons start>
-      <button solid class="activated">
+      <button ion-button solid class="activated">
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button solid class="activated">
+      <button ion-button solid class="activated">
         <ion-icon name="contact"></ion-icon>
         Solid
       </button>
     </ion-buttons>
     <ion-title>Secondary Activated</ion-title>
     <ion-buttons end>
-      <button solid danger class="activated">
+      <button ion-button solid danger class="activated">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -98,16 +98,16 @@
 
   <ion-toolbar no-border-top dark>
     <ion-buttons start>
-      <button outline>
+      <button ion-button outline>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button outline>
+      <button ion-button outline>
         <ion-icon name="star"></ion-icon>
         Star
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary outline>
+      <button ion-button secondary outline>
         <ion-icon name="contact"></ion-icon>
       </button>
     </ion-buttons>
@@ -116,16 +116,16 @@
 
   <ion-toolbar no-border-top dark>
     <ion-buttons start>
-      <button outline class="activated">
+      <button ion-button outline class="activated">
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button outline class="activated">
+      <button ion-button outline class="activated">
         <ion-icon name="star"></ion-icon>
         Star
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary outline class="activated">
+      <button ion-button secondary outline class="activated">
         <ion-icon name="contact"></ion-icon>
       </button>
     </ion-buttons>
@@ -134,13 +134,13 @@
 
   <ion-toolbar no-border-top danger>
     <ion-buttons start>
-      <button>
+      <button ion-button>
         <ion-icon name="contact"></ion-icon>
         Clear
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button>
+      <button ion-button>
         Edit
         <ion-icon name="create"></ion-icon>
       </button>
@@ -149,11 +149,11 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top danger>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-buttons start>
-      <button>
+      <button ion-button>
         <ion-icon name="star"></ion-icon>
       </button>
     </ion-buttons>
@@ -162,13 +162,13 @@
 
   <ion-toolbar no-border-top light>
     <ion-buttons start>
-      <button>
+      <button ion-button>
         <ion-icon name="contact"></ion-icon>
         Clear
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button>
+      <button ion-button>
         Edit
         <ion-icon name="create"></ion-icon>
       </button>
@@ -177,11 +177,11 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top light>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-buttons start>
-      <button>
+      <button ion-button>
         <ion-icon name="star"></ion-icon>
       </button>
     </ion-buttons>
@@ -190,12 +190,12 @@
 
   <ion-toolbar no-border-top transparent>
     <ion-buttons end>
-      <button #button1 (click)="buttonClick(button1)">
+      <button ion-button #button1 (click)="buttonClick(button1)">
         <ion-icon name="star"></ion-icon>
       </button>
     </ion-buttons>
     <ion-title>Transparent</ion-title>
-    <button menuToggle right>
+    <button ion-button menuToggle right>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-toolbar>
diff --git a/src/components/toolbar/test/scenarios/main.html b/src/components/toolbar/test/scenarios/main.html
index 0865c79263d..2286621d750 100644
--- a/src/components/toolbar/test/scenarios/main.html
+++ b/src/components/toolbar/test/scenarios/main.html
@@ -6,15 +6,15 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary>
+      <button ion-button icon-only secondary>
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -23,15 +23,15 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary>
+      <button ion-button icon-only secondary>
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -40,15 +40,15 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button class="activated">
+      <button ion-button icon-only class="activated">
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button class="activated">
+      <button ion-button icon-only class="activated">
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary class="activated">
+      <button ion-button icon-only secondary class="activated">
         <ion-icon name="more"></ion-icon>
       </button>
     </ion-buttons>
@@ -57,17 +57,17 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button solid>
+      <button ion-button icon-only solid>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button solid>
+      <button ion-button icon-left solid>
         <ion-icon name="contact"></ion-icon>
         Solid
       </button>
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button solid secondary>
+      <button ion-button icon-right solid secondary>
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -76,17 +76,17 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <a button solid class="activated">
+      <a ion-button icon-only solid class="activated">
         <ion-icon name="contact"></ion-icon>
       </a>
-      <button solid class="activated">
+      <button ion-button icon-left solid class="activated">
         <ion-icon name="contact"></ion-icon>
         Solid
       </button>
     </ion-buttons>
     <ion-title>Solid Activated</ion-title>
     <ion-buttons end>
-      <button solid secondary class="activated">
+      <button ion-button icon-right solid secondary class="activated">
         Help
         <ion-icon name="help-circle"></ion-icon>
       </button>
@@ -95,16 +95,16 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button outline>
+      <button ion-button icon-only outline>
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button outline>
+      <button ion-button icon-left outline>
         <ion-icon name="star"></ion-icon>
         Star
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary outline>
+      <button ion-button icon-only secondary outline>
         <ion-icon name="contact"></ion-icon>
       </button>
     </ion-buttons>
@@ -113,16 +113,16 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button outline class="activated">
+      <button ion-button icon-only outline class="activated">
         <ion-icon name="contact"></ion-icon>
       </button>
-      <button outline class="activated">
+      <button ion-button icon-left outline class="activated">
         <ion-icon name="star"></ion-icon>
         Star
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <button secondary outline class="activated">
+      <button ion-button icon-only secondary outline class="activated">
         <ion-icon name="contact"></ion-icon>
       </button>
     </ion-buttons>
@@ -131,13 +131,14 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button>
+      <button ion-button icon-left>
         <ion-icon name="contact"></ion-icon>
         Clear
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <a button href="#">Edit
+      <a ion-button icon-right href="#">
+        Edit
         <ion-icon name="create"></ion-icon>
       </a>
     </ion-buttons>
@@ -146,12 +147,12 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons start>
-      <button>
+      <button ion-button>
         Go Back
       </button>
     </ion-buttons>
     <ion-buttons end>
-      <a button href="#">
+      <a ion-button href="#">
         Edit
       </a>
     </ion-buttons>
@@ -159,11 +160,11 @@
   </ion-toolbar>
 
   <ion-toolbar no-border-top>
-    <button menuToggle>
+    <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-buttons start>
-      <button>
+      <button ion-button icon-only>
         <ion-icon name="star"></ion-icon>
       </button>
     </ion-buttons>
@@ -172,19 +173,19 @@
 
   <ion-toolbar no-border-top>
     <ion-buttons end>
-      <button #button1 (click)="buttonClick(button1)">
+      <button ion-button icon-only #button1 (click)="buttonClick(button1)">
         <ion-icon name="star"></ion-icon>
       </button>
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
-    <button menuToggle right>
+    <button ion-button menuToggle right>
       <ion-icon name="menu"></ion-icon>
     </button>
   </ion-toolbar>
 
   <ion-toolbar no-border-top>
     <ion-buttons end>
-      <button #button2 (click)="buttonClick(button2)">
+      <button ion-button icon-only #button2 (click)="buttonClick(button2)">
         <ion-icon name="search"></ion-icon>
       </button>
     </ion-buttons>
diff --git a/src/components/toolbar/toolbar.ios.scss b/src/components/toolbar/toolbar.ios.scss
index fd0a7885256..949036d1cf1 100644
--- a/src/components/toolbar/toolbar.ios.scss
+++ b/src/components/toolbar/toolbar.ios.scss
@@ -274,7 +274,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button-icon-only {
+.bar-button[icon-only] {
   padding: 0;
 
   min-width: .9em;
diff --git a/src/components/toolbar/toolbar.md.scss b/src/components/toolbar/toolbar.md.scss
index d637622da30..a25bf663257 100644
--- a/src/components/toolbar/toolbar.md.scss
+++ b/src/components/toolbar/toolbar.md.scss
@@ -304,7 +304,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button-icon-only {
+.bar-button[icon-only] {
   padding: 0;
 
   ion-icon {
diff --git a/src/components/toolbar/toolbar.ts b/src/components/toolbar/toolbar.ts
index 0d9a81cee3e..8463d3b939a 100644
--- a/src/components/toolbar/toolbar.ts
+++ b/src/components/toolbar/toolbar.ts
@@ -210,10 +210,10 @@ export class ToolbarBase extends Ion {
  *
  *   <ion-toolbar no-border-bottom>
  *     <ion-buttons start>
- *       <button>
+ *       <button ion-button>
  *         <ion-icon name="contact"></ion-icon>
  *       </button>
- *       <button>
+ *       <button ion-button>
  *         <ion-icon name="search"></ion-icon>
  *       </button>
  *     </ion-buttons>
@@ -241,7 +241,7 @@ export class ToolbarBase extends Ion {
  *   <ion-toolbar no-border>
  *     <ion-title>I'm a subfooter</ion-title>
  *     <ion-buttons right>
- *       <button>
+ *       <button ion-button>
  *         <ion-icon name="menu"></ion-icon>
  *       </button>
  *     </ion-buttons>
@@ -250,10 +250,10 @@ export class ToolbarBase extends Ion {
  *   <ion-toolbar no-border-top>
  *     <ion-title>I'm a footer</ion-title>
  *     <ion-buttons end>
- *       <button>
+ *       <button ion-button>
  *         <ion-icon name="more"></ion-icon>
  *       </button>
- *       <button>
+ *       <button ion-button>
  *         <ion-icon name="options"></ion-icon>
  *       </button>
  *     </ion-buttons>
diff --git a/src/components/toolbar/toolbar.wp.scss b/src/components/toolbar/toolbar.wp.scss
index 321c8575297..3e5e4a2dfe0 100644
--- a/src/components/toolbar/toolbar.wp.scss
+++ b/src/components/toolbar/toolbar.wp.scss
@@ -260,7 +260,7 @@ ion-buttons[right] {
   pointer-events: none;
 }
 
-.bar-button-icon-only {
+.bar-button[icon-only] {
   padding: 0;
 
   ion-icon {
diff --git a/src/components/virtual-scroll/test/basic/main.html b/src/components/virtual-scroll/test/basic/main.html
index ff29033aae0..45348fb1b8b 100644
--- a/src/components/virtual-scroll/test/basic/main.html
+++ b/src/components/virtual-scroll/test/basic/main.html
@@ -2,7 +2,7 @@
   <ion-navbar>
     <ion-title>Virtual Scroll{{webview}}</ion-title>
     <ion-buttons end>
-      <button (click)="reload()">
+      <button ion-button (click)="reload()">
         Reload
       </button>
     </ion-buttons>
diff --git a/src/components/virtual-scroll/test/image-gallery/main.html b/src/components/virtual-scroll/test/image-gallery/main.html
index c67ce21cbb0..e86a4c9d2eb 100644
--- a/src/components/virtual-scroll/test/image-gallery/main.html
+++ b/src/components/virtual-scroll/test/image-gallery/main.html
@@ -2,7 +2,7 @@
   <ion-navbar>
     <ion-title>Virtual Scroll: Image Gallery</ion-title>
     <ion-buttons end>
-      <button (click)="reload()">
+      <button ion-button (click)="reload()">
         Reload
       </button>
     </ion-buttons>
diff --git a/src/components/virtual-scroll/test/sliding-item/main.html b/src/components/virtual-scroll/test/sliding-item/main.html
index 297576de1fe..728a273ae06 100644
--- a/src/components/virtual-scroll/test/sliding-item/main.html
+++ b/src/components/virtual-scroll/test/sliding-item/main.html
@@ -2,7 +2,7 @@
   <ion-navbar>
     <ion-title>Virtual Scroll{{webview}}</ion-title>
     <ion-buttons end>
-      <button (click)="reload()">
+      <button ion-button (click)="reload()">
         Reload
       </button>
     </ion-buttons>
@@ -22,10 +22,10 @@
     <ion-item-sliding *virtualItem="let item">
       <ion-item>Item: {{item.value}} {{item.someMethod()}}</ion-item>
       <ion-item-options>
-        <button>Archive</button>
+        <button ion-button>Archive</button>
       </ion-item-options>
       <ion-item-options side="left">
-        <button danger>Remove</button>
+        <button ion-button danger>Remove</button>
       </ion-item-options>
     </ion-item-sliding>