Ionic FAB Button

Ionic FAB are Floating Action Buttons that acts as a container element. They are material design components that can contain one or more fab buttons. It should be placed in a fixed position so that it does not scroll with the content. The FAB must contain one main fab-button. It also includes a fab-lists, which contains related buttons that show when the main fab-button is pressed/clicked. It also allows to contain several fab list elements with different side values. The FAB buttons are shaped like a circle. We can access the floating action button by using a standard <ion-fab> component.

The idea behind having a FAB button is used as a call to the promoted action on a page. For example, if you have a list of items and you want to add one more item, then the add button can be used as a Floating Action Button.

By default, the floating action button is fixed at the right bottom corner. But, we can also configure the FAB buttons to provide the default action within the view. For example, it can be fixed at a specific position, or it can be a scroll with the view, etc.

Example

The following example explains the working of the FAB button in an Ionic application. Here, we are going to take three <ion-fab-button> inside the <ion-fab> component and add the icons for all of these buttons.

Output:

When you execute the above Ionic app, you will get the following screen. In this screen, you can see that the three FAB buttons are displayed at the top-end, bottom-end, and center-start positions.

Ion-fab-list

It contains multiple fab buttons. These fab buttons contain the action related to the main fab button and are flung out on pressed or click. The button can also specify to appear at the specific position by setting the side property start, end, top, and bottom. The below example explains how <ion-fab-list> work with <ion-fab-button>.

Example

In this example, we are going to create a list that contains several FAB buttons. The fab buttons have different icons, such as icons for WhatsApp, Twitter, Facebook, and Instagram. These fab buttons contain the action related to the main fab button and are flung out on pressed or click.

Output:

When you execute the above Ionic app, it will give the following screen. Here, you will see the share button icon, which is flung out on pressed or click.

When the share button icon flung out on pressed or click, you will get the following screen. Here, you can see the icons for Facebook, Instagram, WhatsApp, and Twitter.