ionic-buttons  

 

ionic-button1

Ionic Framework comes with different button classes. By default, a button has display: inline-block applied. Various types of buttons that are available in Ionic Framework

General Buttons

Block Buttons

Full-Width Block Buttons

Different Size Buttons

Outlined Buttons

Clear Buttons

Icon Buttons

Buttons in Headers

Button Bars  

 

General Buttons

Ionic Framework comes with button class.


<button class="button">

Default</button>

We can color button using Ionic built-in color classes. The built-in button color classes are

button-light

button-stable

button-positive

button-calm

button-balanced

button-energized

button-assertive

button-royal

button-dark

 

Examples


<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 Buttons

A button-block class gives a full-width for buttons to parent’s width.


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

Block Button</button>

Here button-positive class is used to color the button. You can use any other color classes, which are mentioned above.

The block buttons will start from the edge of the device. If you need some space, use padding class in ion content tag


<ion-content class=”padding”>

 

Full-Width Block Button

Full-Width Block Button occupies the full length of your device.It's similar to block buttons but gives flat design.


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

Full Width Block Button</button>

As usual, we can apply any button color classes to the Full-width Block Button

 

Different Size Buttons

The Ionic framework comes with a small and large option for a button. They are

button-small

button-large

 

Example Code


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

Small Button</button><button class="button button-large button-positive">

Large Button</button>

As usual, we can apply any button color classes.

 

Outlined Buttons

A button-outline class gives transparent background color with colored border.


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

Outlined Button</button>

As usual, we can apply any button color classes.

 

Clear Buttons

A button-clear class gives transparent background and no border. Only the text in the button has a color.


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

Clear Button</button>

As usual, we can apply any button color classes.

 

Icon Buttons

We can use an icon in button to give a different look.


<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>

The <i> tag is placed inside the button. The icon will appear where the icon code is placed. If you want to specify left or right, append the -right or -left at the icon class. As usual, we can apply any button color classes.

 

Buttons in Headers

We can also include button in header and footer.


<ion-header-bar class="bar-royal">

    <button class="button icon ion-navicon"></button>

    <h1 class="title">Ampersand Academy </h1>


    <button class="button">Edit</button>

</ion-header-bar>

As usual, we can apply any button color classes.

 

Button Bar

To group buttons button-bar class is used.


<div class="button-bar">

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

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

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

</div>

As usual, we can apply any button color classes.