Nick, product manager at Bubble, here! While I spend most of my time working on our upcoming mobile product, today I have an exciting update on something else: the humble button element.
Previously, Bubble offered a simple button with just text. We have noticed that creative users would make their own buttons as groups of different elements (icons, text, links) to customize the look and feel of their interface. Of course, that required extra work and complexity, and you’d lose out on the html button tag for SEO value.
We are excited to share that Bubble’s button element is now more customizable!
The improved button element will not only support text, but also:
- Icons
- Text and icons together, with the ability to:
- Control gap spacing between icon and text
- Indicate whether the icon is leading, trailing, on top of or below the text.
Here are some examples of buttons that are now possible with Bubble’s button element:
But wait, there’s more…
Six new icon libraries
Now that buttons can support icons, it’d be a shame if the only icons that could be added were from our original set (Font Awesome v4).
Starting today, Bubble now supports six additional popular icon libraries in the property editor! When you open the icon picker, you’ll see the option to select from one of the seven icon libraries:
- Material UI Icons (new default)
- Phosphor
- Bootstrap
- Ionic
- Font Awesome v6 (free icons)
- Feather
- Font Awesome v4 (original for existing apps)
You’ll also be able to select from variants of the libraries where supported, such as light and fill. From there, you’re free to style and use your icons as before.
A few notes on default behavior:
- All existing icons in your app will stay the same
- The new default icon library for all new apps will be Material UI Icons, but you can change it at any time
- When you add an icon to your page, it’ll default to the star icon from the last selected library
- New icon libraries don’t support the [fa][/fa] rich text tags
Down the road, we are exploring the ability for you to:
- Set button type in a style
- Filter by icon library in the app search tool
- Search for icons across all supported icon libraries
- Set a default icon library for your app
- Upload your own icons/libraries (as popularly requested)
- Set which icon libraries should be visible in the icon picker
Shoutouts to the users who have advocated for this feature on the ideaboard before. We hope this will help you all create the kinds of sophisticated page designs that you’ve been aiming for much more easily!
Let us know your thoughts below!
Cheers,
Nick
