Button + icon element improvements

This is really sweet! :smiley: :+1:

Yeah, Iā€™ve been doing something similar, but Iā€™ll definitely be switching. Among other things, the built-in solution is simpler to use and lighter weight (from a DOM element perspective). I still have other, more sophisticated, ā€œfunctional componentsā€ which are built using REā€™s and properties; so Iā€™m really glad to see this common UI element updated and enhanced.

Nice job, Bubble Team!

:slightly_smiling_face:

1 Like

Better later than never! Please donā€™t forget about a way to easily track custom states in our pages, that is a must have feature!!!

Also a bug report?
my next button is meant to strech all way (no max widht), but now its not
image

A post was split to a new topic: Question about app speed

Imagine bubble releasing features like this every other weekā€¦ :heart_eyes:

6 Likes

@nick.carroll This feature is really good and thankfully, seems to have been shipped without any signfigant bugs. Thanks also for giving us a heads up before the feature was shipped.

I like most of the future feature upgrades (more comments below) but more important than any of those, and the only apparent regression of the new icon feature is the inability to search for a icon across ALL types of an icon library. In the example below, it shouldnā€™t require five(!) searches to see all folder icons. There should be an option to leave the icon library subtype dropdown blank, and when empty, search results should show all matching results within the library.


Some comments on the future feature upgrades:


ā€ƒā€ƒ Can each one be on the ideaboard individually so Bubble can build the ones that its power users want most?

ā€ƒā€ƒ For these 2, there should be an ability to set the icon library in a style for both icons and buttons. This will eliminate the need for an app wide default icon library (and the additional fields it entails).
Also, once the button type can be set in the style, it would make sense to eliminate the icon element altogether as the 2 elements are the same underlying element.

ā€ƒā€ƒThis is nice, but Iā€™d think that much more important (and easier to implement) is the PRO Font Icon libraries.

2 Likes

+1 for searching through all libraries

3 Likes

Potentially related bug: Icon tooltips inaccurate

Nice love this!

Is there any way to have a ā€˜customā€™ icon option and it lets us put in a SVG of our choice?

8 Likes

This part of my life, this little part, is called happiness! :pray:

Does font awesome v4 still support? Does font awesome v6 support?

This looks great

First of all this is the exact right direction you need to be going with feature releases. Look at all the annoying workarounds people are doing (including downloading common plugins with lots of downloads, e.g. JSON parsing) and then integrate them into the baseline experience.

While this has almost everything you need from a button element, it would be nice to control the button and text padding separately. Right now if I want a ā€œmove arrow to the rightā€ hover effect, thatā€™s only possible by using a group and playing around with conditional padding. You canā€™t do it with the ā€œGapā€ setting alone because that moves the text to the left.

Edit: @nick.carroll Does this mean we can delete the Material Icons plugin from our app? I donā€™t want a duplicate just sitting there.

1 Like

Nice.
I would love to be able to define the icon conditionally by name. This way I could populate a buttonā€™s icon with data from an option set or db.

11 Likes

Love these small updates :fire: :fire:

Nice.
I would love to be able to define the icon conditionally by name. This way I could populate a buttonā€™s icon with data from an option set or db.

:point_up: what he said

7 Likes

Thank you! Letā€™s have icons on regular inputs next week. :v:t4:

5 Likes

Thanks for getting it done! The ability to choose the icon library is crucial. Without it, the feature might not be very practical. Iā€™ll test it next week to see if it performs as well as it seems.

This is a great feature to finally have, weā€™ve been using custom code to implement this in buttons instead of using groups.

It would be great if you added lucide icons, preferably instead of feather IMO. Itā€™s a community maintained fork of feather icons and has a wider variety of icons and is more actively maintained. Even the original creator of feather recommends them now. :slight_smile:

+1 x 2

2 Likes

@nick.carroll this is great, thanks!

However, there are some possible improvements that I didnā€™t see on the roadmap you shared:

  1. Set the icon by name
  2. Set the fill color independently from the stroke color

Regarding Feather icons:

  • 2.1. Thereā€™s only one width; we should be able to set the stroke width.
  • 2.2. We cannot choose ā€œfilledā€ or any other option for this icon library.

Thanks!

3 Likes

Awesome stuff @nick.carroll and team!

Lot of really great suggestions above about how to improve this but I think this is still an excellent release as it is.

Small bit of feedback, and Iā€™m sure you guys have debated this length internally, but I think the button content layout settings should live in ā€˜Appearanceā€™ rather than ā€˜Layoutā€™.

image

I say this because for a full 2min I was wondering where the heck is the Icon Placement setting.

I see Layout as determining how the overall container should behave and Appearance as related to the content.

Repeating groups have their column settings etc in Appearance rather than Layout which is consistent with this.

9 Likes