Ionic Buttons - Ionic

What is a button in Ionic Framework?

Ionic Framework facilitates with several types of buttons, which are subtly animated and which enhances the experience of the user while the app is used. The main class for all the types of buttons is button. This class is used as a prefix when working with sub classes and is always applied to the buttons.

What are Block Buttons in Ionic Framework?

Block buttons have 100% width of their parent container. They will also have small padding applied. Always button-block class is used for adding block buttons. To remove padding but keep full width, button-full class can be used.

Following example displays the usage of both classes:

The screen produced by the above code appears as:

Button Block Full

How to change the Button size in Ionic Framework?

Button size can be changed by two Ionic classes - button-small and button-large. Following example displays the use:

The screen produced by the above code appears as:

Button Small Large

How to add colours to Button in Ionic Framework?

The button can be made stylish by adding appropriate colour class. The main element class is added as prefix to the colour class to style the elements. As footer bar is styled, the prefix class will be bar and colour class used in this example is assertive (red).

The screen produced by the above code appears as:

Ionic Button Colour

Anyone among the nine classes can be used to colour the app buttons:

Color Class
Description
Result
button-light
To be used for white color
button-stable
To be used for light grey color
button-positive
To be used for blue color
button-calm
To be used for light blue color
button-balanced
To be used for green color
button-energized
To be used for yellow color
button-assertive
To be used for red color
button-royal
To be used for violet color
button-dark
To be used for black color

How to add outline to Button in Ionic Framework?

If the buttons are desired to be transparent, apply button-outline class. By applying this class, the buttons will have outline border and transparent background.

To remove border from button, use button-clear class. The example displays the use of these two classes.

The screen produced by the above code appears as:

Button Outline Clear

How to add Icons to buttons in Ionic Framework?

One of the best way to add icons to the buttons is to use icon class. By using icon-left or icon-right icons can be placed on one side of the button. Icon is usually moved to one side when some text is there on the top of the button as:

The screen produced by the above code appears as:

Ionic Button Icons

How to use Button Bar in Ionic Framework?

To group couple of buttons together, button-bar class is used, here the buttons should be of equal size.

The screen produced by the above code appears as:

Ionic Button Bar

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Ionic Topics