I’ve been playing around with using re-useable elements as customiseable UI components (think buttons, loaders etc rather than larger stuff like dashboards/menus).
This has a couple of benefits:
- No need for loads of styles per element - define the settings using dynamic properties
- Get more flexibility e.g for buttons, it’s dead easy to add icons/loading states with no fiddling of groups
It behaves much more like libraries like NextUI with configurable variants/themes rather than just being limited to element styles.
Behind the scenes, all of these settings are set using reuseable element properties (so we’re essentially moving the default Bubble settings like isClickable to properties):
Inside the reuseable element:
So, how do we trigger an action from the button? On the parent page, we just set the isPressed state back to ‘no’ and do whatever we want.
So, once the re-useable element is built for the first time, the amount of time to place and configure a button is basically the same - the only difference is instead of ‘when button is clicked’ you do ‘Do when button is pressed’, and then need a step at the start of your workflow that sets that back to no.
Colours are defined via Option Sets. That makes it possible to have more than 24 colour variables (which is a stupid arbitrary limit from Bubble).
Previously, this was perfectly possible but just fiddly because you had to use states rather than properties. Now it’s much easier (I think 
)