From 947cb2b260da701e4cf28d02161087c34a429e3a Mon Sep 17 00:00:00 2001
From: Brandy Carney <brandyscarney@gmail.com>
Date: Tue, 13 Jun 2017 15:31:01 -0400
Subject: [PATCH] fix(button): update button usage to element ion-button

---
 .../test/anchors/pages/page-one/page-one.html |  32 ++---
 .../test/block/pages/page-one/page-one.html   |  26 ++--
 .../test/full/pages/page-one/page-one.html    |  24 ++--
 .../test/icons/pages/page-one/page-one.html   |  72 +++++------
 .../test/sizes/pages/page-one/page-one.html   |  30 ++---
 .../nav/test/nav-push-pop/main.html           |  37 ++++--
 .../pages/signin-page/sign-in-page.html       |   2 +-
 .../scenarios/pages/root-page/root-page.html  | 120 +++++++++---------
 8 files changed, 180 insertions(+), 163 deletions(-)

diff --git a/src/components/button/test/anchors/pages/page-one/page-one.html b/src/components/button/test/anchors/pages/page-one/page-one.html
index 20aa4b626b..9f19799e1e 100644
--- a/src/components/button/test/anchors/pages/page-one/page-one.html
+++ b/src/components/button/test/anchors/pages/page-one/page-one.html
@@ -10,43 +10,43 @@
 <ion-content padding style="text-align:center" no-bounce>
 
   <p>
-    <a ion-button>Default</a>
-    <a ion-button class="activated">Default.activated</a>
+    <ion-button href="#">Default</ion-button>
+    <ion-button href="#" class="activated">Default.activated</ion-button>
   </p>
 
   <p>
-    <a ion-button color="primary">Primary</a>
-    <a ion-button color="primary" class="activated">Primary.activated</a>
+    <ion-button href="#" color="primary">Primary</ion-button>
+    <ion-button href="#" color="primary" class="activated">Primary.activated</ion-button>
   </p>
 
   <p>
-    <a ion-button color="secondary">Secondary</a>
-    <a ion-button color="secondary" class="activated">Secondary.activated</a>
+    <ion-button href="#" color="secondary">Secondary</ion-button>
+    <ion-button href="#" color="secondary" class="activated">Secondary.activated</ion-button>
   </p>
 
   <p>
-    <a ion-button color="danger">Danger</a>
-    <a ion-button color="danger" class="activated">Danger.activated</a>
+    <ion-button href="#" color="danger">Danger</ion-button>
+    <ion-button href="#" color="danger" class="activated">Danger.activated</ion-button>
   </p>
 
   <p>
-    <a ion-button color="light">Light</a>
-    <a ion-button color="light" class="activated">Light.activated</a>
+    <ion-button href="#" color="light">Light</ion-button>
+    <ion-button href="#" color="light" class="activated">Light.activated</ion-button>
   </p>
 
   <p>
-    <a ion-button color="dark">Dark</a>
-    <a ion-button color="dark" class="activated">Dark.activated</a>
+    <ion-button href="#" color="dark">Dark</ion-button>
+    <ion-button href="#" color="dark" class="activated">Dark.activated</ion-button>
   </p>
 
   <p>
-    <a ion-button disabled>A Disabled</a>
-    <a ion-button color="secondary" disabled>Secondary Disabled</a>
+    <ion-button href="#" disabled>A Disabled</ion-button>
+    <ion-button href="#" color="secondary" disabled>Secondary Disabled</ion-button>
   </p>
 
   <p>
-    <a ion-button [color]="btnColor" (click)="chgColor()">Change Color</a>
-    <a ion-button outline [color]="btnColor" (click)="chgColor()">Change Color</a>
+    <ion-button href="#" [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
+    <ion-button href="#" outline [color]="btnColor" (click)="chgColor()">Change Color</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/block/pages/page-one/page-one.html b/src/components/button/test/block/pages/page-one/page-one.html
index dee8c3e9e0..2223ac03ad 100644
--- a/src/components/button/test/block/pages/page-one/page-one.html
+++ b/src/components/button/test/block/pages/page-one/page-one.html
@@ -10,37 +10,37 @@
 <ion-content padding style="text-align:center">
 
   <p>
-    <a ion-button block href="#">a[ion-button][block]</a>
-    <button ion-button block>button[ion-button][block]</button>
+    <ion-button block href="#">a[ion-button][block]</ion-button>
+    <ion-button block>button[ion-button][block]</ion-button>
   </p>
 
   <p>
-    <a ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</a>
-    <button ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</button>
+    <ion-button block href="#" icon-start><ion-icon name="help-circle"></ion-icon> a[ion-button][block] icon</ion-button>
+    <ion-button block icon-start><ion-icon name="help-circle"></ion-icon> button[ion-button][block] icon</ion-button>
   </p>
 
   <p>
-    <a ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</a>
-    <button ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</button>
+    <ion-button block outline color="secondary" href="#">a[ion-button][block][outline][secondary]</ion-button>
+    <ion-button block outline color="secondary">button[ion-button][block][outline][secondary]</ion-button>
   </p>
 
   <p>
-    <a ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</a>
-    <button ion-button block clear color="dark">button[ion-button][clear][block][dark]</button>
+    <ion-button block clear color="dark" href="#">a[ion-button][block][clear][dark]</ion-button>
+    <ion-button block clear color="dark">button[ion-button][clear][block][dark]</ion-button>
   </p>
 
   <p>
-    <a ion-button block round href="#">a[ion-button][block][round]</a>
-    <button ion-button block round>button[ion-button][block][round]</button>
+    <ion-button block round href="#">a[ion-button][block][round]</ion-button>
+    <ion-button block round>button[ion-button][block][round]</ion-button>
   </p>
 
   <p>
-    <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>
+    <ion-button block round outline href="#">a[ion-button][block][round][outline]</ion-button>
+    <ion-button block round outline>button[ion-button][block][round][outline]</ion-button>
   </p>
 
   <p>
-    <button ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</button>
+    <ion-button [block]="blockButton" (click)="toggleBlock()">Toggle Block</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/full/pages/page-one/page-one.html b/src/components/button/test/full/pages/page-one/page-one.html
index e5fb82c5b4..0b0f35a0b3 100644
--- a/src/components/button/test/full/pages/page-one/page-one.html
+++ b/src/components/button/test/full/pages/page-one/page-one.html
@@ -10,34 +10,34 @@
 <ion-content>
 
   <p>
-    <a ion-button full href="#">a[ion-button][full]</a>
-    <button ion-button full>button[ion-button][full]</button>
+    <ion-button full href="#">a[ion-button][full]</ion-button>
+    <ion-button full>button[ion-button][full]</ion-button>
   </p>
 
   <p>
-    <a ion-button full href="#" icon-start>
+    <ion-button full href="#" icon-start>
       <ion-icon name="help-circle"></ion-icon>
       a[ion-button][full] + icon
-    </a>
-    <button ion-button full icon-start>
+    </ion-button>
+    <ion-button full icon-start>
       <ion-icon name="help-circle"></ion-icon>
       button[ion-button][full] + icon
-    </button>
+    </ion-button>
   </p>
 
   <p>
-    <a ion-button full outline color="secondary" href="#">a[ion-button][full][outline][secondary]</a>
-    <button ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</button>
+    <ion-button full outline color="secondary" href="#">a[ion-button][full][outline][secondary]</ion-button>
+    <ion-button full outline color="secondary">button[ion-button][full][outline][secondary]</ion-button>
   </p>
 
   <p>
-    <a ion-button full clear color="light" href="#">a[ion-button][full][clear][light]</a>
-    <button ion-button full clear color="light">button[ion-button][full][clear][light]</button>
+    <ion-button full clear color="light" href="#">a[ion-button][full][clear][light]</ion-button>
+    <ion-button full clear color="light">button[ion-button][full][clear][light]</ion-button>
   </p>
 
   <p>
-    <a ion-button full clear color="dark" href="#">a[ion-button][full][clear][dark]</a>
-    <button ion-button full clear color="dark">button[ion-button][full][clear][dark]</button>
+    <ion-button full clear color="dark" href="#">a[ion-button][full][clear][dark]</ion-button>
+    <ion-button full clear color="dark">button[ion-button][full][clear][dark]</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/button/test/icons/pages/page-one/page-one.html b/src/components/button/test/icons/pages/page-one/page-one.html
index 12f8174f7e..3125bbae30 100644
--- a/src/components/button/test/icons/pages/page-one/page-one.html
+++ b/src/components/button/test/icons/pages/page-one/page-one.html
@@ -10,96 +10,96 @@
 <ion-content padding>
 
   <div>
-    <button ion-button icon-start>
+    <ion-button icon-start>
       <ion-icon name="home"></ion-icon>
       Left Icon
-    </button>
-    <a ion-button icon-start>
+    </ion-button>
+    <ion-button href="#" icon-start>
       <ion-icon name="home"></ion-icon>
       Left Icon
-    </a>
+    </ion-button>
   </div>
 
   <div>
-    <button ion-button icon-end>
+    <ion-button icon-end>
       Right Icon
       <ion-icon name="star"></ion-icon>
-    </button>
-    <a ion-button icon-end>
+    </ion-button>
+    <ion-button href="#" icon-end>
       Right Icon
       <ion-icon name="star"></ion-icon>
-    </a>
+    </ion-button>
   </div>
 
   <div>
-    <button ion-button icon-only>
+    <ion-button icon-only>
       <ion-icon name="flag"></ion-icon>
-    </button>
-    <a ion-button icon-only>
+    </ion-button>
+    <ion-button href="#" icon-only>
       <ion-icon name="flag"></ion-icon>
-    </a>
+    </ion-button>
   </div>
 
   <div>
-    <button ion-button large icon-start>
+    <ion-button large icon-start>
       <ion-icon name="help-circle"></ion-icon>
       Left, Large
-    </button>
-    <a ion-button large icon-start>
+    </ion-button>
+    <ion-button href="#" large icon-start>
       <ion-icon name="help-circle"></ion-icon>
       Left, Large
-    </a>
+    </ion-button>
   </div>
 
   <div>
-    <button ion-button large icon-end>
+    <ion-button large icon-end>
       Right, Large
       <ion-icon name="settings"></ion-icon>
-    </button>
-    <a ion-button large icon-end>
+    </ion-button>
+    <ion-button href="#" large icon-end>
       Right, Large
       <ion-icon name="settings"></ion-icon>
-    </a>
+    </ion-button>
   </div>
 
   <div>
-    <button ion-button large icon-only>
+    <ion-button large icon-only>
       <ion-icon name="heart"></ion-icon>
-    </button>
-    <a ion-button large icon-only>
+    </ion-button>
+    <ion-button href="#" large icon-only>
       <ion-icon name="heart"></ion-icon>
-    </a>
+    </ion-button>
   </div>
 
   <div>
-    <button ion-button small icon-start>
+    <ion-button small icon-start>
       <ion-icon name="checkmark"></ion-icon>
       Left, Small
-    </button>
-    <a ion-button small icon-start>
+    </ion-button>
+    <ion-button href="#" small icon-start>
       <ion-icon name="checkmark"></ion-icon>
       Left, Small
-    </a>
+    </ion-button>
   </div>
 
   <div>
-    <button ion-button small icon-end>
+    <ion-button small icon-end>
       Right, Small
       <ion-icon name="arrow-forward"></ion-icon>
-    </button>
-    <a ion-button small icon-end>
+    </ion-button>
+    <ion-button href="#" small icon-end>
       Right, Small
       <ion-icon name="arrow-forward"></ion-icon>
-    </a>
+    </ion-button>
   </div>
 
   <div>
-    <button ion-button small icon-only>
+    <ion-button small icon-only>
       <ion-icon name="search"></ion-icon>
-    </button>
-    <a ion-button small icon-only>
+    </ion-button>
+    <ion-button href="#" small icon-only>
       <ion-icon name="search"></ion-icon>
-    </a>
+    </ion-button>
   </div>
 
 </ion-content>
diff --git a/src/components/button/test/sizes/pages/page-one/page-one.html b/src/components/button/test/sizes/pages/page-one/page-one.html
index 040754c000..dbd0a28f88 100644
--- a/src/components/button/test/sizes/pages/page-one/page-one.html
+++ b/src/components/button/test/sizes/pages/page-one/page-one.html
@@ -10,43 +10,43 @@
 <ion-content padding>
 
   <p>
-    <a ion-button href="#">a[ion-button]</a>
-    <button ion-button>button</button>
+    <ion-button href="#">a[ion-button]</ion-button>
+    <ion-button>button</ion-button>
   </p>
 
   <p>
-    <a ion-button small href="#">a[ion-button][small]</a>
-    <button ion-button small>button[ion-button][small]</button>
+    <ion-button small href="#">a[ion-button][small]</ion-button>
+    <ion-button small>button[ion-button][small]</ion-button>
   </p>
 
   <p>
-    <a ion-button outline small href="#">a[ion-button][outline][small]</a>
-    <button ion-button outline small>button[ion-button][outline][small]</button>
+    <ion-button outline small href="#">a[ion-button][outline][small]</ion-button>
+    <ion-button outline small>button[ion-button][outline][small]</ion-button>
   </p>
 
   <p>
-    <a ion-button clear small href="#">a[ion-button][clear][small]</a>
-    <button ion-button clear small>button[ion-button][clear][small]</button>
+    <ion-button clear small href="#">a[ion-button][clear][small]</ion-button>
+    <ion-button clear small>button[ion-button][clear][small]</ion-button>
   </p>
 
   <p>
-    <button ion-button large>[large]</button>
-    <a ion-button large href="#">
+    <ion-button large>[large]</ion-button>
+    <ion-button large href="#">
       <span style="font-size:48px">H</span>
       <span style="font-size:38px">E</span>
       <span style="font-size:32px">L</span>
       <span style="font-size:24px">L</span>
-      O</a>
+      O</ion-button>
   </p>
 
   <p>
-    <a ion-button outline large href="#">a[ion-button][outline][large]</a>
-    <button ion-button outline large>button[ion-button][outline][large]</button>
+    <ion-button outline large href="#">a[ion-button][outline][large]</ion-button>
+    <ion-button outline large>button[ion-button][outline][large]</ion-button>
   </p>
 
   <p>
-    <a ion-button clear large href="#">a[clear][large]</a>
-    <button ion-button clear large>button[ion-button][clear][large]</button>
+    <ion-button clear large href="#">a[clear][large]</ion-button>
+    <ion-button clear large>button[ion-button][clear][large]</ion-button>
   </p>
 
 </ion-content>
diff --git a/src/components/nav/test/nav-push-pop/main.html b/src/components/nav/test/nav-push-pop/main.html
index 18e2ff5528..ea0f1e7881 100644
--- a/src/components/nav/test/nav-push-pop/main.html
+++ b/src/components/nav/test/nav-push-pop/main.html
@@ -52,35 +52,52 @@
   </ion-list>
 
   <p>
-    <a ion-button
+    <ion-button
+      href="#"
       [navPush]="pushPage"
-      [navParams]="{msg:'a (always visible)'}">a (always visible)</a>
+      [navParams]="{msg:'a (always visible)'}">
+      a (always visible)
+    </ion-button>
   </p>
 
   <p *ngIf="visible">
-    <a ion-button
+    <ion-button
+      href="#"
       [navPush]="pushPage"
-      [navParams]="{msg:'a (p *ngIf=visible)'}">a (p *ngIf="visible")</a>
+      [navParams]="{msg:'a (p *ngIf=visible)'}">
+      a (p *ngIf="visible")
+    </ion-button>
   </p>
 
   <p>
-    <a ion-button
+    <ion-button
+      href="#"
       *ngIf="visible"
       [navPush]="pushPage"
-      [navParams]="{msg:'a (a *ngIf=visible)'}">a (a *ngIf="visible")</a>
+      [navParams]="{msg:'a (a *ngIf=visible)'}">
+      a (a *ngIf="visible")
+    </ion-button>
   </p>
 
   <p *ngIf="!visible">
-    <a ion-button color="danger"
+    <ion-button
+      href="#"
+      color="danger"
       [navPush]="pushPage"
-      [navParams]="{msg:'a (p *ngIf=!visible)'}">a (p *ngIf="!visible")</a>
+      [navParams]="{msg:'a (p *ngIf=!visible)'}">
+      a (p *ngIf="!visible")
+    </ion-button>
   </p>
 
   <p>
-    <a ion-button color="danger"
+    <ion-button
+      href="#"
+      color="danger"
       *ngIf="!visible"
       [navPush]="pushPage"
-      [navParams]="{msg:'a (a *ngIf=!visible)'}">a (a *ngIf="!visible")</a>
+      [navParams]="{msg:'a (a *ngIf=!visible)'}">
+      a (a *ngIf="!visible")
+    </ion-button>
   </p>
 
   <p>
diff --git a/src/components/tabs/test/advanced/pages/signin-page/sign-in-page.html b/src/components/tabs/test/advanced/pages/signin-page/sign-in-page.html
index 81f34fea5f..b77ad1097c 100644
--- a/src/components/tabs/test/advanced/pages/signin-page/sign-in-page.html
+++ b/src/components/tabs/test/advanced/pages/signin-page/sign-in-page.html
@@ -19,7 +19,7 @@
       <ion-input type="password"></ion-input>
     </ion-item>
     <ion-item>
-      <a ion-button block [navPush]="tabsPage" class="e2eSignIn">Sign In</a>
+      <ion-button block [navPush]="tabsPage" class="e2eSignIn">Sign In</ion-button>
     </ion-item>
   </ion-card>
 
diff --git a/src/components/toolbar/test/scenarios/pages/root-page/root-page.html b/src/components/toolbar/test/scenarios/pages/root-page/root-page.html
index baa0abb4e5..6c57d40dd5 100644
--- a/src/components/toolbar/test/scenarios/pages/root-page/root-page.html
+++ b/src/components/toolbar/test/scenarios/pages/root-page/root-page.html
@@ -10,188 +10,188 @@
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button icon-only>
+      <ion-button icon-only>
         <ion-icon name="contact"></ion-icon>
-      </button>
-      <button ion-button icon-only>
+      </ion-button>
+      <ion-button icon-only>
         <ion-icon name="search"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <button ion-button icon-only color="secondary">
+      <ion-button icon-only color="secondary">
         <ion-icon name="more"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>This is a long title with buttons. It just goes on and on my friend.</ion-title>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button icon-only>
+      <ion-button icon-only>
         <ion-icon name="contact"></ion-icon>
-      </button>
-      <button ion-button icon-only>
+      </ion-button>
+      <ion-button icon-only>
         <ion-icon name="search"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <button ion-button icon-only color="secondary">
+      <ion-button icon-only color="secondary">
         <ion-icon name="more"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>Defaults</ion-title>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button icon-only class="activated">
+      <ion-button icon-only class="activated">
         <ion-icon name="contact"></ion-icon>
-      </button>
-      <button ion-button icon-only class="activated">
+      </ion-button>
+      <ion-button icon-only class="activated">
         <ion-icon name="search"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <button ion-button icon-only color="secondary" class="activated">
+      <ion-button icon-only color="secondary" class="activated">
         <ion-icon name="more"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>Defaults.activated</ion-title>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button icon-only solid>
+      <ion-button icon-only solid>
         <ion-icon name="contact"></ion-icon>
-      </button>
-      <button ion-button icon-start solid>
+      </ion-button>
+      <ion-button icon-start solid>
         <ion-icon name="contact"></ion-icon>
         Solid
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>Solid</ion-title>
     <ion-buttons end>
-      <button ion-button icon-end solid color="secondary">
+      <ion-button icon-end solid color="secondary">
         Help
         <ion-icon name="help-circle"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons start>
-      <a ion-button icon-only solid class="activated">
+      <ion-button href="#" icon-only solid class="activated">
         <ion-icon name="contact"></ion-icon>
-      </a>
-      <button ion-button icon-start solid class="activated">
+      </ion-button>
+      <ion-button icon-start solid class="activated">
         <ion-icon name="contact"></ion-icon>
         Solid
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>Solid Activated</ion-title>
     <ion-buttons end>
-      <button ion-button icon-end solid color="secondary" class="activated">
+      <ion-button icon-end solid color="secondary" class="activated">
         Help
         <ion-icon name="help-circle"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button icon-only outline>
+      <ion-button icon-only outline>
         <ion-icon name="contact"></ion-icon>
-      </button>
-      <button ion-button icon-start outline>
+      </ion-button>
+      <ion-button icon-start outline>
         <ion-icon name="star"></ion-icon>
         Star
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <button ion-button icon-only color="secondary" outline>
+      <ion-button icon-only color="secondary" outline>
         <ion-icon name="contact"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>Outline</ion-title>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button icon-only outline class="activated">
+      <ion-button icon-only outline class="activated">
         <ion-icon name="contact"></ion-icon>
-      </button>
-      <button ion-button icon-start outline class="activated">
+      </ion-button>
+      <ion-button icon-start outline class="activated">
         <ion-icon name="star"></ion-icon>
         Star
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <button ion-button icon-only color="secondary" outline class="activated">
+      <ion-button icon-only color="secondary" outline class="activated">
         <ion-icon name="contact"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>Outline.activated</ion-title>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button icon-start>
+      <ion-button icon-start>
         <ion-icon name="contact"></ion-icon>
         Clear
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <a ion-button icon-end href="#">
+      <ion-button href="#" icon-end href="#">
         Edit
         <ion-icon name="create"></ion-icon>
-      </a>
+      </ion-button>
     </ion-buttons>
     <ion-title>Icon/Color Attr</ion-title>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons start>
-      <button ion-button>
+      <ion-button>
         Go Back
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-buttons end>
-      <a ion-button href="#">
+      <ion-button href="#" href="#">
         Edit
-      </a>
+      </ion-button>
     </ion-buttons>
     <ion-title>Text Only</ion-title>
   </ion-toolbar>
 
   <ion-toolbar>
-    <button ion-button menuToggle>
+    <ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
-    </button>
+    </ion-button>
     <ion-buttons start>
-      <button ion-button icon-only>
+      <ion-button icon-only>
         <ion-icon name="star"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>Left side menu toggle</ion-title>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons end>
-      <button ion-button icon-only #button1 (click)="buttonClick(button1)">
+      <ion-button icon-only #button1 (click)="buttonClick(button1)">
         <ion-icon name="star"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
-    <button ion-button menuToggle right>
+    <ion-button menuToggle right>
       <ion-icon name="menu"></ion-icon>
-    </button>
+    </ion-button>
   </ion-toolbar>
 
   <ion-toolbar>
     <ion-buttons end>
-      <button ion-button icon-only #button2 (click)="buttonClick(button2)">
+      <ion-button icon-only #button2 (click)="buttonClick(button2)">
         <ion-icon name="search"></ion-icon>
-      </button>
+      </ion-button>
     </ion-buttons>
     <ion-segment color="secondary">
       <ion-segment-button value="something">