Ionic CSS - Buttons

Buttons provide a clickable element, which can be used in forms, or anywhere that needs simple, standard button functionality. They may display text, icons, or both. Buttons can be styled with several attributes to look a specific way.  There are several types of buttons in the Ionic Framework and these buttons are subtly animated, which further enhances the user experience when using the app. The main class for all the button types is a button. This class will always be applied to our buttons, and we will use it as a prefix when working with subclasses.

 

Block Button

Full-width button with rounded corners.

<ion-button expand="block">Block Button</ion-button>

 

Full Button

Full-width button with square corners and no border on the left or right.

<ion-button expand="full">Full Button</ion-button>

 

Outline Button

Button with a transparent background and a visible border.

<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button shape="round" fill="outline">Outline + Round</ion-button>

 

Small Button

Button with less height and padding. The default for buttons in an item.

<ion-button size="small">Small</ion-button>

 

Default Button

Button with the default height and padding. Useful for buttons in an item.

<ion-button>Default</ion-button>

 

Large Button

Button with more height and padding.

<ion-button size="large">Large</ion-button>

 

Icon Button

Buttons with an icon instead of Text.

<ion-button>
  <ion-icon slot="start" name="star"></ion-icon>
  Left Icon
</ion-button>

<ion-button>
  Right Icon
  <ion-icon slot="end" name="star"></ion-icon>
</ion-button>

<ion-button>
  <ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>