I think it would add to customization and better design if the buttons can be styled so that they have an icon as part of the button. This idea can be scrapped together using groups and reusable elements but it’ll be a lot better if it was already a feature.
So you’d probably need to choose where the icon is (left, top center, bottom center, right), what size the icon is, color, etc. I can see how it’s not trivial to implement, mainly on the user experience side of actually building the dang thing in the editor. Interesting!
This is one that I’ve done at the bottom of a repeating group.
The 3 buttons is in a group to keep them together for when I need to move them. The text is set to left alignment and then I placed the icons on top of the buttons.
I had to do the workflows for the buttons and the icons otherwise if the user clicked on the icon instead of the button it would not have worked. If you move a single button the icon does not move with it unless you group them together as well. So it becomes groups in a group.
It can become time consuming so I only do it when I have to. If there’s a better way I haven’t seen it and would like to know. I created these when I just started with Bubble and didn’t think of the reusable element.
Here’s a basic example. https://bubble.io/page?type=page&name=icon-buttons&id=forum_app2&tab=tabs-1
The button & icon on the left is grouped together with the group set a bit wider so that it can be dragged. The button in the center is not grouped. The button on the right is grouped but the group is the same size. If you try and drag it you drag the icon or button out of the group.
I’m doing something similar to what @raymond is doing, only it’s:
text object + icon object in a group
invisible button (ie, background is none, or full color/transparency 0%, no text) overlaid on top. All conditionals and workflows depend on the user clicking/hovering/etc. on this transparent button (which cuts down on the # of workflows, so you don’t have to handle the text + icon separately)
I put a tiny example in @raymond 's forum app page, underneath his buttons
NOTE: to display the button’s text, it’s important that it’s a text object and not a button, because right now Bubble’s buttons don’t have a H/V padding option, so you end up with text being way too close to the edge. Text objects give you much more control over the display.
honestly I’d prefer to keep doing this vs. seeing a Button+Icon implementation, it gives you the most control over positioning – if you look through the icons, you’ll notice that they are inconsistently positioned and sized, and you’d probably spend just as much time tweaking margins…
Well comparing to what they have in place already, it’s not really hard to implement. What you mentioned are actually things that are very easy to implement. It does not need to be fully dinamic in the beginning, but just having the option would not only be amazing but essencial. What interface nowadays doesn’t use icons in the buttons? This is trivial. Icons are much better for UX than text.
The current workarounds (that we shouldn’t have to go into), at least that I found were grouping a button and an icon together and putting an invisible button on top of those, acting like the real button, otherwise it would break the button’s UX because hovering on the icon would not act as clickable. Still, this workaround makes styling tricky.
I see. The hand comes about when that element has a start workflow action on it. If you do not want any actual action but do want the hand upon hovering … then … a hack could be to just create an action on that button that does not do anything material … e.g. set a state and do not assign any value to it