main.html

<ion-header>

  <ion-navbar>
    <ion-title>Button</ion-title>
  </ion-navbar>

</ion-header>


<ion-content text-center>

  <h4>Colors</h4>

  <button ion-button>Default</button>

  <button ion-button color="secondary">Secondary</button>

  <button ion-button color="danger">Danger</button>

  <button ion-button color="light">Light</button>

  <button ion-button color="dark">Dark</button>

  <h4>Shapes</h4>

  <button ion-button full>Full Button</button>

  <button ion-button block>Block Button</button>

  <button ion-button round>Round Button</button>

  <button ion-button fab style="position: relative;">FAB</button>

  <h4>Outlines</h4>

  <button ion-button color="secondary" full outline>Outline + Full</button>

  <button ion-button color="secondary" block outline>Outline + Block</button>

  <button ion-button color="secondary" round outline>Outline + Round</button>

  <button ion-button color="secondary" fab outline style="position: relative;">FAB</button>

  <h4>Icons</h4>

  <button ion-button icon-left color="dark">
    <ion-icon name="star"></ion-icon>
    Left Icon
  </button>

  <button ion-button icon-right color="dark">
    Right Icon
    <ion-icon name="star"></ion-icon>
  </button>

  <button ion-button icon-only color="dark">
    <ion-icon name="star"></ion-icon>
  </button>

  <h4>Sizes</h4>

  <button ion-button color="light" large>Large</button>

  <button ion-button color="light">Default</button>

  <button ion-button color="light" small>Small</button>

</ion-content>