Set state of button to unclickable

[rowena1]

I’m fairly new to Bubble but have progress very well. I need help with the steps on creating a state that makes a button unclickable.

I will use this state to “deactivate” some buttons on my flow-steps. I couldn’t make states work. If someone can kindly show me a tutorial or direct me to a thread where there are instructions on how to do this specfically, I’d certainly appreciate it. Thank you.

[mikeloc]

Hi there, @rowena1… there is a ton of good content out there on custom states, so do some googling and check that stuff out because understanding custom states is an important part of building apps on Bubble.

The above being said, here is a simple example of what you described. I added a custom state (yes/no) called button deactivated to the index page (you can add the state to any page/element you want, of course).

You change the custom state using this workflow action (ignore that I am using the Page is loaded workflow… it’s just for the example).

The workflow action would look like this…

Finally, you would add a condition to the button that looks like the following, and that should produce the desired result of having the button become unclickable when the custom state is set to a certain value.

Hope this helps.

Best…
Mike

[rowena1]

Thanks @mikeloc ! Does it matter that you used the trigger “This button is hovered”? Essentially, I have 5 steps. So when the user is on the second step (ie button 2), I want button 1 to be deactivated entirely so he doesn’t go back to the sub-steps under Step 1. What I did is to make Button 1 unclickable when the group on Step 2 is visible but I think it’s more appropriate to use states. Here’s my app draft : https://scale-celery.bubbleapps.io/version-test/dashboard

[mikeloc]

I didn’t use This button is hovered… that’s a default condition on a button that changes the look of the button when a user hovers over it. The condition I created is below that one.

@rowena1

What I did is to make Button 1 unclickable when the group on Step 2 is visible

There is nothing wrong with doing it that way, by the way. Also, as you may or may not know, custom states get reset when the page is refreshed, so you may want to consider a more “permanent” solution that makes buttons unclickable even when the page is refreshed.

[bestbubbledev]

You could simply use Conditions for this. When “certain event happens” Then this button is not clickable.