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-buttons start>
    <button>
      <ion-icon name="contact"></ion-icon>
    </button>
    <button>
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-buttons>
  <ion-buttons end>
    <button secondary>
      <ion-icon name="more"></ion-icon>
    </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-icon name="contact"></ion-icon>
    </button>
    <button>
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-buttons>
  <ion-buttons end>
    <button secondary>
      <ion-icon name="more"></ion-icon>
    </button>
  </ion-buttons>
  <ion-title>Defaults</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-buttons start>
    <button class="activated">
      <ion-icon name="contact"></ion-icon>
    </button>
    <button class="activated">
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-buttons>
  <ion-buttons end>
    <button secondary class="activated">
      <ion-icon name="more"></ion-icon>
    </button>
  </ion-buttons>
  <ion-title>Defaults.activated</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-buttons start>
    <button solid>
      <ion-icon name="contact"></ion-icon>
    </button>
    <button solid>
      <ion-icon name="contact"></ion-icon>
      Solid
    </button>
  </ion-buttons>
  <ion-title>Solid</ion-title>
  <ion-buttons end>
    <button solid secondary>
      Help
      <ion-icon name="help-circle"></ion-icon>
    </button>
  </ion-buttons>
</ion-toolbar>


<ion-toolbar>
  <ion-buttons start>
    <a button solid class="activated">
      <ion-icon name="contact"></ion-icon>
    </a>
    <button 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">
      Help
      <ion-icon name="help-circle"></ion-icon>
    </button>
  </ion-buttons>
</ion-toolbar>


<ion-toolbar>
  <ion-buttons start>
    <button outline>
      <ion-icon name="contact"></ion-icon>
    </button>
    <button outline>
      <ion-icon name="star"></ion-icon>
      Star
    </button>
  </ion-buttons>
  <ion-buttons end>
    <button secondary outline>
      <ion-icon name="contact"></ion-icon>
    </button>
  </ion-buttons>
  <ion-title>Outline</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-buttons start>
    <button outline class="activated">
      <ion-icon name="contact"></ion-icon>
    </button>
    <button outline class="activated">
      <ion-icon name="star"></ion-icon>
      Star
    </button>
  </ion-buttons>
  <ion-buttons end>
    <button secondary outline class="activated">
      <ion-icon name="contact"></ion-icon>
    </button>
  </ion-buttons>
  <ion-title>Outline.activated</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-buttons start>
    <button>
      <ion-icon name="contact"></ion-icon>
      Clear
    </button>
  </ion-buttons>
  <ion-buttons end>
    <a button href="#">Edit
      <ion-icon name="create"></ion-icon>
    </a>
  </ion-buttons>
  <ion-title>Icon/Color Attr</ion-title>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons start>
    <button>
      Go Back
    </button>
  </ion-buttons>
  <ion-buttons end>
    <a button href="#">
      Edit
    </a>
  </ion-buttons>
  <ion-title>Text Only</ion-title>
</ion-toolbar>


<ion-toolbar>
  <button menuToggle>
    <ion-icon name="menu"></ion-icon>
  </button>
  <ion-buttons start>
    <button>
      <ion-icon name="star"></ion-icon>
    </button>
  </ion-buttons>
  <ion-title>Left side menu toggle</ion-title>
</ion-toolbar>


<ion-toolbar>
  <ion-buttons end>
    <button #button1 (click)="buttonClick(button1)">
      <ion-icon name="star"></ion-icon>
    </button>
  </ion-buttons>
  <ion-title>Right side menu toggle</ion-title>
  <button menuToggle right>
    <ion-icon name="menu"></ion-icon>
  </button>
</ion-toolbar>

<ion-toolbar>
  <ion-buttons end>
    <button #button2 (click)="buttonClick(button2)">
      <ion-icon name="search"></ion-icon>
    </button>
  </ion-buttons>
  <ion-segment secondary>
    <ion-segment-button value="something">
      Something
    </ion-segment-button>
    <ion-segment-button value="else">
      Else
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>

<ion-toolbar>
  <ion-segment>
    <ion-segment-button value="light">
      Light
    </ion-segment-button>
    <ion-segment-button value="toolbar">
      Toolbar
    </ion-segment-button>
    <ion-segment-button value="default">
      Default Segment
    </ion-segment-button>
  </ion-segment>
</ion-toolbar>


<style>
  .toolbar {
    border-bottom: 1px solid black;
  }
</style>