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

<ion-toolbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-title>menu-toggle left. This is the title that never ends. It just goes on and on my friend.</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button>
      <icon ios=contact></icon>
    </button>
    <button>
      <icon search></icon>
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button>
      <icon more></icon>
    </button>
  </ion-nav-items>
  <ion-title>Defaults</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button class="hover">
      <icon ios=contact></icon>
    </button>
    <button class="hover">
      <icon search></icon>
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button class="hover">
      <icon more></icon>
    </button>
  </ion-nav-items>
  <ion-title>Defaults.hover</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button class="activated">
      <icon ios=contact></icon>
    </button>
    <button class="activated">
      <icon search></icon>
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button class="activated">
      <icon more></icon>
    </button>
  </ion-nav-items>
  <ion-title>Defaults.activated</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button clear>
      <icon contact></icon>
    </button>
    <button clear>
      <icon contact></icon>
      Clear
    </button>
  </ion-nav-items>
  <ion-title>Clear</ion-title>
  <ion-nav-items secondary>
    <button clear secondary>
      Help
      <icon help-circle></icon>
    </button>
  </ion-nav-items>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button clear class="hover">
      <icon contact></icon>
    </button>
    <button clear class="hover">
      <icon contact></icon>
      Clear
    </button>
  </ion-nav-items>
  <ion-title>Clear</ion-title>
  <ion-nav-items secondary>
    <button clear secondary class="hover">
      Help
      <icon help-circle></icon>
    </button>
  </ion-nav-items>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button clear class="activated">
      <icon contact></icon>
    </button>
    <button clear class="activated">
      <icon contact></icon>
      Clear
    </button>
  </ion-nav-items>
  <ion-title>Clear</ion-title>
  <ion-nav-items secondary>
    <button clear secondary class="activated">
      Help
      <icon help-circle></icon>
    </button>
  </ion-nav-items>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button outline>
      <icon contact></icon>
    </button>
    <button outline>
      <icon star></icon>
      Star
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button secondary outline>
      <icon contact></icon>
    </button>
  </ion-nav-items>
  <ion-title>Outline</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button outline class="hover">
      <icon contact></icon>
    </button primary>
    <button outline class="hover">
      <icon star></icon>
      Star
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button secondary outline class="hover">
      <icon contact></icon>
    </button>
  </ion-nav-items>
  <ion-title>Outline.hover</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button outline class="activated">
      <icon contact></icon>
    </button>
    <button outline class="activated">
      <icon star></icon>
      Star
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button secondary outline class="activated">
      <icon contact></icon>
    </button>
  </ion-nav-items>
  <ion-title>Outline.activated</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button>
      Btn
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button secondary>
      Btn
    </button>
  </ion-nav-items>
  <ion-title>ColorAttr</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button class="hover">
      Btn
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button secondary class="hover">
      Btn
    </button>
  </ion-nav-items>
  <ion-title>ColorAttr.hover</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button class="activated">
      Btn
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button secondary class="activated">
      Btn
    </button>
  </ion-nav-items>
  <ion-title>ColorAttr.activated</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-nav-items primary>
    <button>
      <icon contact></icon>
      Clear
    </button>
  </ion-nav-items>
  <ion-nav-items secondary>
    <button>
      Edit
      <icon create></icon>
    </button>
  </ion-nav-items>
  <ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>



<style>
  .toolbar {
    border-bottom: 1px solid black;
    background: #eee !important;
  }
</style>