Make FAB Label clickable

Hi, i got 2 questions.

Question 1:
Can you make the floating action button label clickable? I get a lot of my customers thinking they can click on the label with the text and noting happens. The FAB labels in the Google native calendar app are also clickable.

Question 2:
Is it possible to get a transparent background when you open the stacked floating button(s)? Just like with the modal window? That would be great to prevent people from clicking on the wrong element by mistake.


both questions are releated to Css not exactly related to framework 7 app. As far as i understand the classes with label are responsible for the appearance, so you can just place a link having those classes or a button which will make them clickable.
For setting transparent background, you need to override background color property in your template and set it to something like.


Setting its opacity to 0 can be another option but it may have some undesirable effects

Just add this CSS rule:

.fab-label {
  pointer-events: auto;

This will require a bit more complex combination of JS + CSS, i think i can add it to next update


Check here Add overly with fab speed dial

1 Like

The fab-label css did the trick, thank you :slight_smile:

This will be a great update for next version :slight_smile:

It works! Thanks Vladimir!