How do I simply change the text inside a button depending on its state, without having to create a text binding that uses the same condition that I already set for the state, for every language that button uses? Shouldn’t the text just match the state??
Hey Niels, CSS states are usually used for different styles on hover, focus, disabled, etc.
Can you give me an example of a button state where you’d want the text to be different?
I agree, this feels like something that should be built in. If the button already knows which state it’s in, being able to assign a label per state would make a lot more sense than recreating the same conditions in text bindings, especially once translations are involved. It gets repetitive pretty quickly.
Hi Joyce,
One example where I came across this was after pressing the button, the button goes into a “Loading” state so that we can show the user the workflow is running (going grey and showing a rotating spinner icon etc). I wanted to simply change the text from “Save” to “Saving…”.
This was not possible based on the state itself, you’d need to bind the text to an IF statement based on some “isLoading” variable (the same one that renders the button in the loading state). Having the text change based on the state would centralise and greatly simplify the automation. (Also actually including the show/hide left/right icon based on state would also be great for this).
Got it! Great example! I’ll share with the product team
Yes that was my usecase too (loading text, other icon, different mouse pointer, disabled). But I think UI wise for weweb, the biggest problem here is that there’s absolutely no way to visually see what settings are state-dependent and what isn’t. Basically you change the state, and can still change everything in the panels, and then you have to flip states to see what actually changes and what doesn’t. So I’d say first step is, when editing a state, everything that’s not state-conditional should be greyed out/disabled. This will remove the biggest user frustration. After that the team could start adding settings that are bound to a state.