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

<ion-toolbar>
  <ion-title>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="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="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="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="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>


<ion-toolbar>
  <a menu-toggle>
    <icon menu></icon>
  </a>
  <ion-nav-items primary>
    <button>
      <icon star></icon>
    </button>
  </ion-nav-items>
  <ion-title>Left side menu toggle</ion-title>
</ion-toolbar>


<ion-toolbar>
<ion-nav-items secondary>
  <button #button1 (click)="buttonClick(button1)">
    <icon star></icon>
  </button>
</ion-nav-items>
  <ion-title>Right side menu toggle</ion-title>
  <a menu-toggle secondary>
    <icon menu></icon>
  </a>
</ion-toolbar>

<ion-toolbar>
  <ion-nav-items secondary>
    <button #button2 (click)="buttonClick(button2)">
      <icon search></icon>
    </button>
  </ion-nav-items>
  <ion-segment secondary>
    <ion-segment-button>
      Something
    </ion-segment-button>
    <ion-segment-button>
      Else
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-toolbar>
  <ion-segment>
    <ion-segment-button>
      Light
    </ion-segment-button>
    <ion-segment-button>
      Toolbar
    </ion-segment-button>
    <ion-segment-button>
      Default Segment
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>


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