Ionic - Button

There are several types of button in Ionic Framework, and we can use them according to our need. Ionic framework provides different classes to their components. For example for button their is button class. And the main class for all the button types is button.

We will add this code between <ion-content> tag.

<button class="button">
    Default
</button>

Ionic also provide nine different color classes, to implement these color on button we only need to give sub-class after main class of button.

<button class="button button-light">
  button-light
</button>

<button class="button button-stable">
  button-stable
</button>

<button class="button button-positive">
  button-positive
</button>

<button class="button button-calm">
  button-calm
</button>

<button class="button button-balanced">
  button-balanced
</button>

<button class="button button-energized">
  button-energized
</button>

<button class="button button-assertive">
  button-assertive
</button>

<button class="button button-royal">
  button-royal
</button>

<button class="button button-dark">
  button-dark
</button>

Block Button

Ionic block button takes 100% width of its parent's width with padding. Implementing block button to a button will also set display: block to CSS properties. And another button mean default buttons will set display: inline-block. You may use this button when you need to display this button on full width of screen. As you will saw in Face Book sign-In page.

<button class="button button-block button-positive">
  Block Button
</button>

Full Width Block Button

If you want to add button without left and right borders with display: block; than you need Full Width Block Button. This class of button will remove left and right borders from button. Additionally button's parent element does not have padding applied. This style for button is useful when you need to display your button across the entire width of screen.

<button class="button button-full button-positive">
     Full Width Block Button
</button>

Similarly you can achieve different sizes of button using "button-large", "button-small" classes. To make a transparent button you might use "button-outline" class. This class will remove background color from button and put an outline on button.

<button class="button button-outline button-positive">
  Outlined Button
</button>

You can also apply several colors to outline button by using color class.

Icon Button

You can also display icons on button, you can add icons by using built in Ionic icons or you may also add your custom icons.

<button class="button">
  <i class="icon ion-loading-c"></i> Loading...
</button>

<button class="button icon-left ion-home">Home</button>

<button class="button icon-left ion-star button-positive">Favorites</button>

<a class="button icon-right ion-chevron-right button-calm">Learn More</a>

<a class="button icon-left ion-chevron-left button-clear button-dark">Back</a>

<button class="button icon ion-gear-a"></button>

<a class="button button-icon icon ion-settings"></a>

<a class="button button-outline icon-right ion-navicon button-balanced">Reorder</a>

Recommend:

How to create and use card component in ionic