toolbar button updates

demos/component-docs/buttons/components/components.html

@@ -2,16 +2,16 @@
 
   <ion-title>Buttons</ion-title>
 
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon contact></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
   <button>
     <icon search></icon>
   </button>
-  </ion-nav-items>
+  </ion-buttons>
 
 </ion-navbar>
 

demos/component-docs/menus/basic/menu-events.html

@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Events

demos/component-docs/menus/basic/menu-friends.html

@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Friends

demos/component-docs/menus/basic/menu-home.html

@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menus

demos/component-docs/menus/basic/menu-places.html

@@ -1,8 +1,8 @@
 <ion-navbar *navbar hide-back-button class="android-attr">
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Places

demos/component-docs/modals/basic/modal-content.html

@@ -2,14 +2,14 @@
   <ion-title>
     Description
   </ion-title>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button (click)="close()" *ng-if=" currentPlatform === 'ios' ">
       Cancel
     </button>
     <button (click)="close()" *ng-if=" currentPlatform === 'android' ">
       <icon close></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 

demos/material/index.ts

@@ -5,13 +5,13 @@ import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
 @IonicView({
   template: '<ion-navbar *navbar primary>' +
     '<ion-title>Heading</ion-title>' +
-    '<a menu-toggle="menu">' +
+    '<button menu-toggle="menu">' +
       '<icon menu></icon>' +
-    '</a>' +
+    '</button>' +
-    '<ion-nav-items secondary>' +
+    '<ion-buttons end>' +
       '<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
       '<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
-    '</ion-nav-items>' +
+    '</ion-buttons>' +
   '</ion-navbar>' +
   '<ion-content>' +
     `

demos/menu/page1.html

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu

demos/menu/page2.html

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu

demos/modal/index.ts

@@ -73,7 +73,7 @@ export class ContactModal {
 
 @Page({
   template: `
-    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-nav-items primary><button (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
+    <ion-navbar *navbar><ion-title>First Page Header</ion-title><ion-buttons start><button (click)="closeModal()">Close</button></ion-buttons></ion-navbar>
     <ion-content padding>
       <p>
         <button (click)="push()">Push (Go to 2nd)</button>

demos/native/pages/battery.ts

@@ -4,9 +4,9 @@ import {IonicView, Battery} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Battery</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/camera.ts

@@ -5,9 +5,9 @@ import {Camera} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Camera</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/contacts.ts

@@ -5,9 +5,9 @@ import {Contacts} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Contacts</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/device-motion.ts

@@ -4,9 +4,9 @@ import {IonicView, DeviceMotion} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device Motion</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/device-orientation.ts

@@ -4,9 +4,9 @@ import {IonicView, DeviceOrientation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device Orientation</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/device.ts

@@ -4,9 +4,9 @@ import {IonicView, Device} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Device</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/dialogs.ts

@@ -4,9 +4,9 @@ import {IonicView, Dialogs} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Dialogs</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/geolocation.ts

@@ -5,9 +5,9 @@ import {Geolocation} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Geolocation</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/statusbar.ts

@@ -5,9 +5,9 @@ import {StatusBar} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>StatusBar</ion-title>
   </ion-navbar>
   <ion-content padding>

demos/native/pages/vibration.ts

@@ -5,9 +5,9 @@ import {Vibration} from 'ionic/ionic';
 @IonicView({
   template: `
   <ion-navbar *navbar>
-    <a menu-toggle>
+    <button menu-toggle>
       <icon menu></icon>
-    </a>
+    </button>
     <ion-title>Vibration</ion-title>
   </ion-navbar>
   <ion-content padding>

ionic/components/item/test/groups/session-list.html

@@ -1,8 +1,8 @@
 <ion-navbar *navbar>
   <ion-title>Item Groups</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">Reload</button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-navbar>
 
 <ion-content class="outer-content">

ionic/components/item/test/sliding/main.html

@@ -1,8 +1,8 @@
 <ion-toolbar>
   <ion-title>Sliding Items</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">Reload</button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 <ion-content>

ionic/components/menu/test/basic/page1.html

@@ -1,29 +1,29 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu
   </ion-title>
 
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon football></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon baseball></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 
-  <a menu-toggle="rightMenu" secondary>
+  <button menu-toggle="rightMenu" right>
     <icon menu></icon>
-  </a>
+  </button>
 
 </ion-navbar>
 

ionic/components/menu/test/basic/page2.html

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Menu

ionic/components/menu/test/basic/page3.html

@@ -5,9 +5,9 @@
     Menu
   </ion-title>
 
-  <a menu-toggle="rightMenu" secondary>
+  <button menu-toggle="rightMenu" right>
     <icon menu></icon>
-  </a>
+  </button>
 
 </ion-navbar>
 

ionic/components/menu/test/overlay/page1.html

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Overlay Menu

ionic/components/menu/test/push/page1.html

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Push Menu

ionic/components/menu/test/reveal/page1.html

@@ -1,9 +1,9 @@
 
 <ion-navbar *navbar>
 
-  <a menu-toggle="leftMenu">
+  <button menu-toggle="leftMenu">
     <icon menu></icon>
-  </a>
+  </button>
 
   <ion-title>
     Reveal Menu

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

@@ -141,9 +141,9 @@ class ContactUs {
   template: `
     <ion-navbar *navbar>
       <ion-title>First Page Header</ion-title>
-      <ion-nav-items primary>
+      <ion-buttons start>
         <button class="e2eCloseMenu" (click)="closeModal()">Close</button>
-      </ion-nav-items>
+      </ion-buttons>
     </ion-navbar>
     <ion-content padding>
       <p>

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

@@ -16,12 +16,12 @@ class MyCmpTest{}
   template: `
     <ion-navbar *navbar>
       <ion-title>{{title}}</ion-title>
-      <ion-nav-items primary>
+      <ion-buttons start>
         <button><icon star></icon></button>
-      </ion-nav-items>
+      </ion-buttons>
-      <ion-nav-items secondary>
+      <ion-buttons end>
         <button>S1</button>
-      </ion-nav-items>
+      </ion-buttons>
     </ion-navbar>
     <ion-content>
       <ion-list>

ionic/components/nav/test/nested/index.ts

@@ -75,9 +75,9 @@ export class Account {
 @Page({
   template: `
     <ion-navbar *navbar primary>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Account Dashboard</ion-title>
     </ion-navbar>
     <ion-content padding>
@@ -106,9 +106,9 @@ export class Dashboard {
 @Page({
   template: `
     <ion-navbar *navbar danger>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Account Profile</ion-title>
     </ion-navbar>
     <ion-content padding>

ionic/components/nav/test/routing/view1.html

@@ -1,8 +1,8 @@
 
 <ion-navbar *navbar>
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
   <ion-title>First View</ion-title>
 </ion-navbar>
 

ionic/components/nav/test/routing/view2.html

@@ -1,7 +1,7 @@
 
 <ion-navbar *navbar primary>
   <ion-title>Second View</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon help></icon>
     </button>

ionic/components/navbar/navbar.ts

@@ -71,9 +71,9 @@ class ToolbarBackground {
         '<span class="back-default">{{bbText}}</span>' +
       '</span>' +
     '</button>' +
-    '<ng-content select="[menu-toggle]"></ng-content>' +
+    '<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
-    '<ng-content select="ion-nav-items[primary]"></ng-content>' +
+    '<ng-content select="ion-buttons[start]"></ng-content>' +
-    '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
+    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
     '<div class="toolbar-content">' +
       '<ng-content></ng-content>' +
     '</div>',

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

@@ -10,11 +10,11 @@
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon search></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-segment secondary>
     <ion-segment-button>
       Something

ionic/components/slides/test/intro/main.html

@@ -30,16 +30,16 @@
 }
 </style>
 <ion-navbar *navbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       Skip
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="next()">
       Next
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Grid Icons</ion-title>
 </ion-navbar>
 <ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">

ionic/components/tabs/test/basic/index.ts

@@ -71,9 +71,9 @@ class Tab2 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Stopwatch</ion-title>
     </ion-navbar>
     <ion-content padding>

ionic/components/tabs/test/ghost/index.ts

@@ -46,9 +46,9 @@ class Tab2 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Stopwatch</ion-title>
     </ion-navbar>
     <ion-content padding>
@@ -68,9 +68,9 @@ class Tab3 {
 @Page({
   template: `
     <ion-navbar *navbar>
-      <a menu-toggle>
+      <button menu-toggle>
         <icon menu></icon>
-      </a>
+      </button>
       <ion-title>Quesarito</ion-title>
     </ion-navbar>
     <ion-content padding>

ionic/components/text-input/test/input-focus/main.html

@@ -1,11 +1,11 @@
 
 <ion-toolbar>
   <ion-title>Inset Focus</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button (click)="reload()">
       Reload
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 

ionic/components/toolbar/modes/ios.scss

@@ -6,18 +6,20 @@
 // --------------------------------------------------
 
 $toolbar-order-ios: (
-  back-button: 10,
+  back-button: 0,
-  menu-toggle-primary: 20,
+  menu-toggle-start: 1,
-  primary: 30,
+  buttons-left: 2,
-  secondary: 50,
+  buttons-start: 3,
-  menu-toggle-secondary: 60,
+  content: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
 );
 
 $toolbar-ios-padding:                       4px !default;
 $toolbar-ios-height:                        4.4rem !default;
 $toolbar-ios-button-font-size:              1.7rem !default;
 $toolbar-ios-title-font-size:               1.7rem !default;
-
 $navbar-ios-height:                         $toolbar-ios-height !default;
 
 
@@ -30,9 +32,73 @@ ion-navbar-section {
   min-height: $navbar-ios-height;
 }
 
+
+// iOS Toolbar Background
+// --------------------------------------------------
+
+.toolbar-background {
+  border-bottom-width: 1px;
+  border-bottom-style: solid;
+  border-color: $toolbar-ios-border-color;
+  background-color: $toolbar-ios-background-color;
+}
+
+&.hairlines .toolbar-background {
+  border-bottom-width: 0.55px;
+}
+
+
+// iOS Toolbar Content
+// --------------------------------------------------
+
+.toolbar-content {
+  flex: 1;
+  order: map-get($toolbar-order-ios, content);
+}
+
+.toolbar-title {
+  font-size: $toolbar-ios-title-font-size;
+  font-weight: 500;
+  text-align: center;
+  pointer-events: auto;
+  color: $toolbar-ios-text-color;
+}
+
+ion-title {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  padding: 0px 90px 1px 90px;
+  pointer-events: none;
+  transform: translateZ(0px);
+}
+
+
 // iOS Toolbar Buttons
 // --------------------------------------------------
 
+ion-buttons {
+  flex: 1;
+  order: map-get($toolbar-order-ios, buttons-start);
+  transform: translateZ(0px);
+}
+
+ion-buttons[left] {
+  order: map-get($toolbar-order-ios, buttons-left);
+}
+
+ion-buttons[end] {
+  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-end);
+}
+
+ion-buttons[right] {
+  text-align: right;
+  order: map-get($toolbar-order-ios, buttons-right);
+}
+
 .bar-button {
   margin-top: 0;
   margin-bottom: 0;
@@ -73,14 +139,14 @@ ion-navbar-section {
 }
 
 
-// iOS Back Button
+// iOS Toolbar  Back Button
 // --------------------------------------------------
 
 .back-button {
   margin: 0;
   min-height: 3.2rem;
   line-height: 1;
-  order: map-get($toolbar-order-ios, 'back-button');
+  order: map-get($toolbar-order-ios, back-button);
   overflow: visible;
   transform: translateZ(0px);
 }
@@ -93,16 +159,17 @@ ion-navbar-section {
 }
 
 
-// iOS Menu Toggle
+// iOS Toolbar Menu Toggle
 // --------------------------------------------------
 
 [menu-toggle] {
-  order: map-get($toolbar-order-ios, menu-toggle-primary);
+  order: map-get($toolbar-order-ios, menu-toggle-start);
   cursor: pointer;
 }
 
-[menu-toggle][secondary] {
+[menu-toggle][end],
-  order: map-get($toolbar-order-ios, menu-toggle-secondary);
+[menu-toggle][right] {
+  order: map-get($toolbar-order-ios, menu-toggle-end);
 }
 
 ion-segment-button[button] {
@@ -112,55 +179,6 @@ ion-segment-button[button] {
 }
 
 
-// iOS Toolbar Background
-// --------------------------------------------------
-
-.toolbar-background {
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-color: $toolbar-ios-border-color;
-  background-color: $toolbar-ios-background-color;
-}
-
-&.hairlines .toolbar-background {
-  border-bottom-width: 0.55px;
-}
-
-
-// iOS Toolbar Content
-// --------------------------------------------------
-
-ion-title {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  padding: 0px 90px 1px 90px;
-  pointer-events: none;
-  transform: translateZ(0px);
-}
-
-.toolbar-title {
-  font-size: $toolbar-ios-title-font-size;
-  font-weight: 500;
-  text-align: center;
-  pointer-events: auto;
-  color: $toolbar-ios-text-color;
-}
-
-ion-nav-items {
-  flex: 1;
-  order: map-get($toolbar-order-ios, primary);
-  transform: translateZ(0px);
-}
-
-ion-nav-items[secondary] {
-  text-align: right;
-  order: map-get($toolbar-order-ios, secondary);
-}
-
-
 // iOS Toolbar Color Generation
 // --------------------------------------------------
 

ionic/components/toolbar/modes/md.scss

@@ -5,41 +5,111 @@
 // Material Design Toolbar
 // --------------------------------------------------
 
+$toolbar-order-md: (
+  back-button: 0,
+  menu-toggle-start: 1,
+  buttons-left: 2,
+  content: 3,
+  buttons-start: 4,
+  buttons-end: 5,
+  buttons-right: 6,
+  menu-toggle-end: 7,
+);
+
 $toolbar-md-padding:                     4px !default;
 $toolbar-md-height:                      5.6rem !default;
 $toolbar-md-title-font-size:             2rem !default;
 $toolbar-md-button-font-size:            1.4rem !default;
+$navbar-md-height:                       $toolbar-md-height !default;
 
 
 .toolbar {
   padding: $toolbar-md-padding;
   min-height: $toolbar-md-height;
+}
 
-  button,
+ion-navbar-section {
-  [button],
+  min-height: $navbar-md-height;
-  button.activated,
+}
-  [button].activated {
+
-    margin-top: 0;
+
-    margin-bottom: 0;
+// Material Design Toolbar Background
-    padding: 0 5px;
+// --------------------------------------------------
-    min-height: 32px;
+
+.toolbar-background {
+  border-color: $toolbar-md-border-color;
+  background-color: $toolbar-md-background-color;
+}
+
+
+// Material Design Toolbar Content
+// --------------------------------------------------
+
+.toolbar-content {
+  flex: 1;
+  order: map-get($toolbar-order-md, content);
+}
+
+.toolbar-title {
+  color: $toolbar-md-text-color;
+}
+
+ion-title {
+  padding: 0 12px;
+  font-size: $toolbar-md-title-font-size;
+  font-weight: 500;
+}
+
+
+// Material Design Toolbar Buttons
+// --------------------------------------------------
+
+ion-buttons {
+  flex: 1;
+  order: map-get($toolbar-order-md, buttons-start);
+  transform: translateZ(0px);
+}
+
+ion-buttons[left] {
+  order: map-get($toolbar-order-md, buttons-left);
+}
+
+ion-buttons[left] .bar-button:first-child {
+  margin-left: 0;
+}
+
+ion-buttons[end] {
+  text-align: right;
+  order: map-get($toolbar-order-md, buttons-end);
+}
+
+ion-buttons[right] {
+  text-align: right;
+  order: map-get($toolbar-order-md, buttons-right);
+}
+
+
+// Material Design Toolbar Back Button
+// --------------------------------------------------
+
+.back-button {
+  margin: 0 0 0 12px;
   box-shadow: none;
-    overflow: visible;
-    color: $toolbar-md-active-color;
 }
 
-  button.icon-only,
+.back-button-icon {
-  [button].icon-only {
+  margin: 0;
-    padding-right: 0;
+  min-width: 44px;
-    padding-left: 0;
+  font-size: 2.4rem;
+  font-weight: normal;
+  text-align: left;
 }
 
-  button icon,
-  [button] icon {
-    padding: 0;
-    min-width: 28px;
-  }
 
+// Material Design Toolbar Menu Toggle
+// --------------------------------------------------
+
+.toolbar {
   [menu-toggle],
   [menu-toggle].activated {
     padding: 0 2px;
@@ -55,34 +125,6 @@ $toolbar-md-button-font-size:        1.4rem !default;
     margin: 0 2px;
     min-width: 28px;
   }
-
-}
-
-.toolbar button:hover:not(.disable-hover),
-.toolbar [button]:hover:not(.disable-hover),
-.toolbar button.activated,
-.toolbar [button].activated {
-  color: $toolbar-md-active-color;
-  background-color: transparent;
-}
-
-.toolbar-background {
-  border-color: $toolbar-md-border-color;
-  background-color: $toolbar-md-background-color;
-}
-
-ion-title {
-  padding: 0 12px;
-  font-size: $toolbar-md-title-font-size;
-  font-weight: 500;
-}
-
-.toolbar-title {
-  color: $toolbar-md-text-color;
-}
-
-ion-nav-items[primary] button:first-child {
-  margin-left: 0;
 }
 
 
@@ -96,20 +138,6 @@ ion-navbar-section {
   min-height: $navbar-md-height;
 }
 
-.back-button {
-  margin: 0 0 0 12px;
-  box-shadow: none;
-}
-
-.back-button-icon {
-  margin: 0;
-  min-width: 44px;
-  font-size: 2.4rem;
-  font-weight: normal;
-  text-align: left;
-}
-
-
 
 // Material Design Toolbar Color Generation
 // --------------------------------------------------

ionic/components/toolbar/test/scenarios/main.html

@@ -5,43 +5,43 @@
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon ios=contact></icon>
     </button>
     <button>
       <icon search></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       <icon more></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Defaults</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button class="activated">
       <icon ios="contact"></icon>
     </button>
     <button class="activated">
       <icon search></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button class="activated">
       <icon more></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Defaults.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button clear>
       <icon contact></icon>
     </button>
@@ -49,19 +49,19 @@
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Clear</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button clear secondary>
       Help
       <icon help-circle></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button clear class="activated">
       <icon contact></icon>
     </button>
@@ -69,19 +69,19 @@
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Clear</ion-title>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button clear secondary class="activated">
       Help
       <icon help-circle></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button outline>
       <icon contact></icon>
     </button>
@@ -89,18 +89,18 @@
       <icon star></icon>
       Star
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button secondary outline>
       <icon contact></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Outline</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button outline class="activated">
       <icon contact></icon>
     </button>
@@ -108,94 +108,94 @@
       <icon star></icon>
       Star
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button secondary outline class="activated">
       <icon contact></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Outline.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       Btn
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button secondary>
       Btn
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>ColorAttr</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button class="activated">
       Btn
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button secondary class="activated">
       Btn
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>ColorAttr.activated</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon contact></icon>
       Clear
     </button>
-  </ion-nav-items>
+  </ion-buttons>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button>
       Edit
       <icon create></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Icon/Color Attr</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-  <a menu-toggle>
+  <button menu-toggle>
     <icon menu></icon>
-  </a>
+  </button>
-  <ion-nav-items primary>
+  <ion-buttons start>
     <button>
       <icon star></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-title>Left side menu toggle</ion-title>
 </ion-toolbar>
 
 
 <ion-toolbar>
-<ion-nav-items secondary>
+<ion-buttons end>
   <button #button1 (click)="buttonClick(button1)">
     <icon star></icon>
   </button>
-</ion-nav-items>
+</ion-buttons>
   <ion-title>Right side menu toggle</ion-title>
-  <a menu-toggle secondary>
+  <button menu-toggle right>
     <icon menu></icon>
-  </a>
+  </button>
 </ion-toolbar>
 
 <ion-toolbar>
-  <ion-nav-items secondary>
+  <ion-buttons end>
     <button #button2 (click)="buttonClick(button2)">
       <icon search></icon>
     </button>
-  </ion-nav-items>
+  </ion-buttons>
   <ion-segment secondary>
     <ion-segment-button>
       Something

ionic/components/toolbar/toolbar-button.scss

@@ -39,14 +39,9 @@
   margin: 0 6px;
   padding: 0;
   min-width: 36px;
-  order: map-get($toolbar-order, menu-toggle-primary);
   box-shadow: none;
 }
 
-.toolbar [menu-toggle][secondary] {
-  order: map-get($toolbar-order, menu-toggle-secondary);
-}
-
 .toolbar [menu-toggle] icon {
   padding: 0 6px;
   font-size: 2.8rem;
@@ -57,8 +52,6 @@
 // --------------------------------------------------
 
 .back-button {
-  order: map-get($toolbar-order, backButton);
-
   display: none;
   &.show-back-button {
     display: flex;

ionic/components/toolbar/toolbar.scss

@@ -3,15 +3,6 @@
 // Toolbar
 // --------------------------------------------------
 
-$toolbar-order: (
-  backButton: 10,
-  menu-toggle-left: 20,
-  content: 30,
-  left: 40,
-  right: 50,
-  menu-toggle-right: 60,
-);
-
 
 .toolbar {
   position: relative;
@@ -40,12 +31,6 @@ $toolbar-order: (
   pointer-events: none;
 }
 
-.toolbar-content {
-  display: block;
-  flex: 1;
-  order: map-get($toolbar-order, content);
-}
-
 .toolbar[position=bottom] {
   order: $flex-order-toolbar-bottom;
 }
@@ -64,27 +49,22 @@ ion-title {
   overflow: hidden;
 }
 
-ion-nav-items {
+ion-buttons {
   display: block;
   margin: 0 0.2rem;
   pointer-events: none;
-  order: map-get($toolbar-order, left);
 }
 
-ion-nav-items[secondary] {
+ion-buttons button,
-  order: map-get($toolbar-order, right);
+ion-buttons a,
-}
+ion-buttons input,
-
+ion-buttons textarea,
-ion-nav-items button,
+ion-buttons div {
-ion-nav-items a,
-ion-nav-items input,
-ion-nav-items textarea,
-ion-nav-items div {
   pointer-events: auto;
 }
 
 // TODO this is a temp hack to fix segment overlapping ion-nav-item
-ion-nav-items,
+ion-buttons,
 [menu-toggle] {
   z-index: 99;
 }

ionic/components/toolbar/toolbar.ts

@@ -44,7 +44,7 @@ export class ToolbarBase extends Ion  {
 
   /**
    * @private
-   * A toolbar items include the left and right side `ion-nav-items`,
+   * A toolbar items include the left and right side `ion-buttons`,
    * and every `menu-toggle`. It does not include the `ion-title`.
    * @returns {TODO} Array of this toolbar's item ElementRefs.
    */
@@ -79,9 +79,9 @@ export class ToolbarBase extends Ion  {
   selector: 'ion-toolbar',
   template:
     '<div class="toolbar-background"></div>' +
-    '<ng-content select="[menu-toggle]"></ng-content>' +
+    '<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
-    '<ng-content select="ion-nav-items[primary]"></ng-content>' +
+    '<ng-content select="ion-buttons[start]"></ng-content>' +
-    '<ng-content select="ion-nav-items[secondary]"></ng-content>' +
+    '<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
     '<div class="toolbar-content">' +
       '<ng-content></ng-content>' +
     '</div>',
@@ -149,7 +149,7 @@ export class ToolbarTitle extends Ion {
  * @private
  */
 @Directive({
-  selector: 'ion-nav-items,[menu-toggle]'
+  selector: 'ion-buttons,[menu-toggle]'
 })
 export class ToolbarItem extends Ion {
   constructor(