menu

Ionic 2 Buttons


Ionic 2 Buttons: Buttons play an important role in navigation of any app, Ionic 2 provides predefined classes to create different-different buttons. Buttons can contain the text and icons which can be enhanced with different-different attributes. Here in this tutorial we are going to explain how you can create buttons in Ionic 2, you can also use our online editor to run and see the output of the example.


Ionic 2 Buttons | Example & Demo

Ionic uses standard html button <button> element to create buttons and ion-button directive to enhance the properties.

Following Buttons are available in Ionic 2-

  • 1. Default Style
  • 2. Outline Style
  • 3. Clear Style
  • 4. Round Buttons
  • 5. Block Buttons
  • 6. Full Buttons
  • 7. Button Sizes
  • 8. Icon Buttons
  • 9. Buttons In Components

Default Style Button

To create default Style add ion-button attribute to the button Add color using color attribute simply as below –

Ionic 2 Default Style Button Example

Try it »

If you run the above example it will produce output something like this –

Ionic 2 Buttons Default Example

Outline Style Button

To create outline Style add outline property to the button simply as below-

Ionic 2 Outline Style Button Example

Try it »

If you run the above example it will produce output something like this –

Ionic 2 Outline Buttons

Clear Style Button

If You want to create Clear Style Button just add clear property simply as below-

Ionic 2 Clear Style Button Example

Try it »

If you run the above example it will produce output something like this –

Ionic 2 Clear Buttons Example

Rounded Buttons

If You want to create rounded Buttons just add round property to button simply as below-

Ionic 2 Rounded Button Example

Try it »

If you run the above example it will produce output something like this –

Ionic 2 Rounded Buttons Example

Block Buttons

Add block property to button to make the block level, it will make button 100% of its parent container. Here is an example of block level button-

Ionic 2 Rounded Button Example

Try it »

If you run the above example it will produce output something like this –

Ionic 2 Block Buttons Example

Full Buttons

Add full property to button create Full width button. Full button will be 100% of it’s parent. It removes the left and right borders of the button. Here is an example of block level button-

Ionic 2 Full Buttons Example

If you run the above example it will produce output something like this –

Ionic 2 Full Buttons

Button Sizes

You can add large attribute to make the buttons large and small to make the buttons small-

Ionic 2 Small | Large Button Example

The output of the above example will look something like this –

ionic 2 button sizes

Icon Buttons

You can create icon buttons using ionic icons simply as in the example below –

Ionic 2 Small | Large Button Example

The output of the above example will look something like this –

Ionic 2 add icons to button

Buttons In Component

You can easily add the buttons in components such as header, footer or list items. Here is an example of a simple search button in header-

Buttons In Component Example

The output of the above example will look something like this –

Search Button in Header Example

Input Properties

AttributeTypeDescription
largeboolean Used to Create Large button.
small boolean Used to Create Small button.
defaultboolean Used to Create Default button.
outlinebooleanThis creates transparent button with a border.
clear booleanThis creates transparent button without a border.
solid booleanThis is used to force a solid button. Useful for buttons within an item.
round booleanThis creates button with rounded corners.
block booleanThis creates button that fills its parent container with a border-radius.
full booleanThis creates button that fills its parent container without a border-radius or borders on th
strong booleanThis is used to represent the important action.
mode stringThe mode to apply to this component.
color stringThe predefined color to use. For example:

Advertisements