BUTTONS IN IONIC

Share the post

Hello All, Today we will see the Ionic 4 basic design concepts related to buttons. In this topic, We will see How to use buttons in Ionic 4 mobile application ? We will also see what are the different button with design & output which we can able to use in Ionic 4.

Ionic 4 – Buttons :

1. Ionic full button :

<ion-button color="dark" expand="full"> FULL BUTTON </ion-button>

Output :

Full button output
Full Button Output

Description :

If you want a full button with no icon, then use expand attribute with value full.

 2. Ionic Round Shape button :

<ion-button color="dark" shape="round"> ROUND BUTTON </ion-button>

Output :

Round button output
Round button output

Description :

If you want a round button with no icon, then use shape attribute with value round.

3. Ionic Outline button :

<ion-button color="dark" fill="outline"> OUTLINE</ion-button>

Output :

Outline button output
Outline button output

Description :

If you want a outline for a button with no icon, then use fill attribute with the value outline.

4. Ionic clear button :

 <ion-button color="dark" fill="clear"> CLEAR </ion-button

Output :

Clear button output
Clear button output

Description :

If you want no outline for a button with no icon, then use fill attribute with the value clear.

5. Ionic small button :

<ion-button color="dark" size="small"> SMALL BUTTON</ion-button>

Output :

Small button output
Small button output

Description :

If you want a small button with no icon, then use size attribute with the value small.

6. Ionic large button :

<ion-button color="dark" size="large"> LARGE BUTTON </ion-button>

Output :

Large button output
Large button output

Description :

If you want a large button with no icon, then use size attribute with the value large.

7. Ionic Round Outline Block Button :

<ion-button color="dark" shape="round" expand="block" fill="outline"> ROUND OUTLINE BLOCK </ion-button>

Output :

Round outline block button
Round outline block button

Description :

If you want shape as round and outline for button then use shape attribute with round value & fill attribute with outline value.

8. Ionic Round Outline Block Button – Icon Start:

<ion-button color="dark" shape="round" expand="block" fill="outline">

      <ion-icon slot="start" name="home">Icon Start With Text</ion-icon>

 </ion-button>	

Output :

Round outline block button with icon at start
Round outline block button with icon at start

Description :

If you want a button with icon at start of the button, then use slot attribute for icon with the value start.

9. Ionic Round Outline Block Button – Icon End:

<ion-button color="dark" shape="round" expand="block" fill="outline">

      <ion-icon slot="end" name="home">Icon End With Text</ion-icon>

 </ion-button>

Output :

Round outline block button with icon at end
Round outline block button with icon at end

Description :

If you want a button with icon at end of the button, then use slot attribute for icon with the value end.

10.  Ionic Round Outline Block Button – Only Icon:

<ion-button color="dark" shape="round" expand="block" fill="outline">

      <ion-icon slot="icon-only" name="home"></ion-icon>

  </ion-button>

Output :

Round outline block button only icon
Round outline block button only icon

Description :

If you want a button with icon only with no Text of the button, then use slot attribute for icon with the value icon-only.

Leave a Comment