Forward Advance Learning


Buttons are one of the primary ways you'll want your users to interact with your app. In Ionic we make them using the native html5 <button> element.

A simple button looks like this:

Click Me!!

Buttons render differently depending on where you put them, so a button in the header bar will render differently to a button in the main app body.


We can add icons to buttons very easily using the ion-icon component. Here's an add button.

<ion-icon name="add"></ion-icon>

Find a list of all the available icons here:

Combining ionicons with text

We can put icons and text on the same button, like so:

<ion-icon name="add"></ion-icon>

We can choose to have the text first, or the icon first.

<ion-icon name="add"></ion-icon>

Button styles

Ionic comes with a short list of button styles that you can choose.

Button purpose (sets the colour)

By default buttons are blue, but you can change this.

  • light - (grey)
  • secondary - (green)
  • danger - (red)
  • dark - (black)

Button border

Buttons are solid by default. You can also pick:

  • clear - (no border is drawn)
  • outline - (only the outline is drawn)

Connecting a button to an action

We wire a button up using a regular on-click attribute

<button outline on-click="handleClick()">

We then handle this in the component:

templateUrl: 'build/pages/home/home.html'
export class HomePage {
handleClick() {
// do something here
constructor(private navCtrl: NavController) {}

Exercise - Create a counter app

Create a simple app with two buttons that allows you to count up and down. Click the up button, and a number goes up, click the down button, and the number goes back down.

For bonus points, use an ionicon on the button.