Ion-fab

<!-- fab placed to the top end -->

 

<ion-fabvertical="top"horizontal="end"slot="fixed">

<ion-fab-button>

<ion-iconname="add"></ion-icon>

</ion-fab-button>

</ion-fab>

 

<!-- fab placed to the bottom end -->

<ion-fabvertical="bottom"horizontal="end"slot="fixed">

<ion-fab-button>

<ion-iconname="arrow-dropleft"></ion-icon>

</ion-fab-button>

</ion-fab>

 

<!-- fab placed to the top start -->

<ion-fabvertical="top"horizontal="start"slot="fixed">

<ion-fab-button>

<ion-iconname="arrow-dropright"></ion-icon>

</ion-fab-button>

</ion-fab>

 

<!-- fab placed to the bottom start -->

<ion-fabvertical="bottom"horizontal="start"slot="fixed">

<ion-fab-button>

<ion-iconname="arrow-dropup"></ion-icon>

</ion-fab-button>

</ion-fab>

 

<!-- fab placed to the (vertical) center and start -->

<ion-fabvertical="center"horizontal="start"slot="fixed">

<ion-fab-button>

<ion-iconname="share"></ion-icon>

</ion-fab-button>

</ion-fab>

 

<!-- fab placed to the (vertical) center and end -->

<ion-fabvertical="center"horizontal="end"slot="fixed">

<ion-fab-button>

<ion-iconname="add"></ion-icon>

</ion-fab-button>

</ion-fab>

 

<!-- fab placed to the top and end and on the top edge of the content overlapping header -->

<ion-fabvertical="top"horizontal="end"edgeslot="fixed">

<ion-fab-button>

<ion-iconname="person"></ion-icon>

</ion-fab-button>

</ion-fab>

 

<!-- fab placed to the bottom and start and on the bottom edge of the content overlapping footer with a list to the right -->

<ion-fabvertical="center"horizontal="start"slot="fixed">

<ion-fab-button>

<ion-iconname="logo-video"></ion-icon>

</ion-fab-button>

</ion-fab>

 

<!-- fab placed in the center of the content with a list on each side -->

<ion-fabvertical="center"horizontal="center"slot="fixed">

<ion-fab-button>

<ion-iconname="share"></ion-icon>

</ion-fab-button>

<ion-fab-listside="top">

<ion-fab-button><ion-iconname="logo-vimeo"></ion-icon></ion-fab-button>

</ion-fab-list>

<ion-fab-listside="bottom">

<ion-fab-button><ion-iconname="logo-facebook"></ion-icon></ion-fab-button>

</ion-fab-list>

<ion-fab-listside="start">

<ion-fab-button><ion-iconname="logo-instagram"></ion-icon></ion-fab-button>

</ion-fab-list>

<ion-fab-listside="end">

<ion-fab-button><ion-iconname="logo-twitter"></ion-icon></ion-fab-button>

</ion-fab-list>

</ion-fab>