Colored tags/chips - how to

Hi - my first post.

I come from tadabase and some things are really easy on this platform. Like using tags.
Can you do something like this?

So not like shown in this video:, because they have all the same color. What I want is have a particular color based on the chosen tag (from an option group)


Hi Peter,

Did you happen to get the tagging figured out? Any recommendations to solve this?


I’m also having this problem.

Did either of you figure out a solution?

is this a design question or technical one? Both ways tags are very easy to do…

There are quite a few threads like this, using HTML and/or CSS styles and JavaScript handlers to create tags like that much-loved but now somewhat obsolete video recommends. They work, but you lose much of the power of Bubble to organise and understand your app if you do it that way.

It sounds like what you need to do is to create an Option Set or database Thing with your tags in it. Put the HTML #XXXXXX colour as an attribute (Option Set) or field (Thing) of each tag, and then use a conditional format on a Group element which renders the tag - the conditional format always evaluates to true (I use Thing’s Colour is not empty) and then sets the Background color to a dynamic value which is again the Thing’s Colour.

I sometimes also have a Foreground colour attribute/field too, to set the colour of the text.

If you need to show a list of tags, I’ve just created an incredibly simple plugin that makes any Repeating Group you choose flow from one row to the next, rather than being a fixed grid. It makes it simple to create HTML chips in pure Bubble, gives you complete design and interaction freedom, and doesn’t require any knowledge of HTML, JavaScript or CSS.

1 Like