Colored tags/chips - how to

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