Button + icon element improvements

I added some code to create a loading button :slight_smile:

Live

Editor

7 Likes

I love this! Small things like this make a big difference. So many groups can now be buttons and so many icon plugins can now be deleted!

Is this not slowing down the app using different icon libraries @nick.carroll ?

1 Like

Great work, just noticed that the button text is not aligned to the center with the icon at 0px

1 Like

Great question. Icon plugins can often slow down page load as the entire icon pack is downloaded even though most icons are not being used. Bubble page loads don’t need more slowdowns :sweat_smile:
We need a confirmation that only referenced icons are downloaded to the page.

4 Likes

I needed to remove the gap. Thanks for the observation.

Finally! :clap: One of the little but really nagging pain points solved. Can’t wait to try it out!

So I was looking through all the new icon libraries on the Icon element. Just realized that you can make an icon element rotate perpetually but you can’t control its static rotation angle. Very weird (but also normal for Bubble).

@nick.carroll :open_hands:t6: :open_hands:t6: :raised_hands:t6: :raised_hands:t6:

very good job ! I think in future project I will never install other icon plugins ! it’s very clever, and easy. The only remark is the same as another guy wrote : all the parameters for the icon would be in better place if ther were in appearance and not in layout part. BRAVO anycase

yaaaay finally :smiley:

Great! But my BUTTON element shows like before, without the “type button” option. Why?
image

Congratulations @nick.carroll

Some Ideas
=> CONDITIONAL CHANGE : Type of Button ( To Colappse for Icons)
=> Search among all libs alltogether

Tks Augusto

1 Like

Look in the Icon, not the button

Thanks for your answer, but it didn´t help me. There is not options to select type button in button element neither icon element.

Did you refresh the browser (Ctrl+F5)? I had the same issue at first :grinning:.

wonderful!

since we’re at it, i wanna wish for a spinning wheel (when button is busy).
currently i have so many of these done manually.

We’ve noted this feature request. We have higher priority work on the mobile team right now, but something we’ll consider for the near term

5 Likes

Has anyone else experienced a bug with the “collapse when hidden” feature with buttons now?

I’ve created some “clear filter” buttons using the new button + icon option but when I click the button and the filter is removed, the button visibly hides but the spacing doesn’t fully collapse (“collapse when hidden” is checked). But if I refresh the page, the spacing is fully collapsed, as expected.

Just tested it with only the label and no icon – it fully collapses, as expected. I assume there’s a bug with the icon not being collapsed correctly. @nick.carroll, are you guys able to look into this? I can give more details and step-by-step if needed. Thanks!

1 Like

Same here. “Collapse when hidden” no longer works with Icon or Icon+Label. It only works with Labels option. If the button is initially hidden it does not display it, as expected, but as soon as it is rendered, it no longer collapses.

3 Likes