Ion-fab-button : How to change the displayed fab-buttons format and position?

Ionic Framework Ionic Angular
1

Hello Everyone !

I would like to display some names when the main fab-button is clicked on.

So far, I could just put some text in it. I also could change de width of the buttons, but is also change the size of the main button which I would like to remain square.

Also, I could like each fab button to adapt themselves to the size of the text in it.

Could you help me on this?
Here below a picture of what I currently have and what I would like to do. Also, find my code below the picture.

tempsnip
tempsnip529×506 16.5 KB

--------------- Global CSS ------------------

ion-fab-button::part(native) {
background-color: #b7f399;
border-radius: 15px;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
color: black;
}

ion-fab-button::part(native):hover::after {
background-color: #a3e681;
}

ion-fab-button::part(native):active::after {
background-color: #87d361;
}

ion-fab-list::part(native) {
position: fixed;
bottom: 100px;
right: 100px;
}

---------------- HTML -----------------------

<ion-fab-button>
  <ion-icon name="chevron-up-circle"></ion-icon>
</ion-fab-button>
<ion-fab-list side="top">
  <ion-fab-button position="fixed" right="100px">
    <ion-icon name="globe"></ion-icon>
  </ion-fab-button>
  <ion-fab-button label="Coucou">
    Hello world ! 
  </ion-fab-button>
  <ion-fab-button>
    <ion-icon name="globe"></ion-icon>
  </ion-fab-button>
</ion-fab-list>
2

FABs can only contain icons. I recently tried forcing text but had no luck.

Since FABs are allowed to contain only icons… (source)

If you want to show some text when tapped/clicked, you should probably use a Popover or something else.