Ionic - Buttons

The main class for all the button types is button. This class will always be applied to our buttons, and we will use it as a prefix when working with sub classes.

Block Buttons

You can use always have 100% width of their parent container. They will also have a small padding applied.

button-block class for adding block buttons.
<button class = "button button-block">

<button class = "button button-full">
The code will result: -

Button Size

There are two Ionic classes for changing the button size −

  • button-small and

  • button-large.

Following is an example to show their usage −

Button Colors

we are styling the footer bar, the prefix class will be a bar and the color class that we want to use in this example is assertive (red).
<button class = "button button-assertive">
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  

Button Outline

If you want your buttons transparent, you can apply button-outline class. Buttons with this class will have an outline border and a transparent background.

To remove the border from the button, you can use the button-clear class. The following example shows how to use these two classes.

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

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

Adding Icons

When you want to add Icons to your buttons, the best way is to use the icon class. You can place the icon on one side of the button by using the icon-left or the icon-right. You will usually want to move your icon to one side when you have some text on top of your button as explained below.

<button class = "button icon ion-home">

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

<button class = "button icon icon-right ion-home">
The above code will produce the following screen

Button Bar

If you want to group a couple of buttons together, you can use the button-bar class
<div class = "button-bar">
   <a class = "button button-positive">1</a>
   <a class = "button button-assertive">2</a>
   <a class = "button button-energized">3</a>
   <a class = "button">4</a>

Welookups is optimized for learning.Copy right 2018 kumar aditya singh .
All Right Reserved and you agree to have read and accepted our term and condition.
All Rights Reserved.