Button hover state not applied

I want to enable a button once inputs have been entered.

If I have a conditional to set the button to not clickable when the input is empty, the button is initially displayed as clickable on page load and then is set unclickable.

If I define the button as unclickable to start with, and have a conditional to set the button to clickabe when the input has a value, the button displays correctly as unclickable on page load, and is set to clickable correctly when the input has a value, but the hover state doesn’t work.

1 Like

The order of the conditions matters.

Conditions in the bottom of the tab have priority.

Try to move the “hover condition” down in your tab

To Rafael’s point, there must be something else going on because I just took a quick look at an unclickable button, and the hover state works as expected.

I don’t want a hover state when the button is not clickable. I kind of thought that “not clickable” would add the “disabled” attribute to the button.

When the condition I have added is satisfied, i.e. the inputs have been entered and the button is made clickable, then the hover effects defined in the Primary Button should be applied.

This is the conditional, with the button appearance initially set to “isn’t clickable”

To fix this, you can go to your STYLE tab.
Find this button’s style and change the “hover” condition to:

When this Button is hovered AND this Button is clickable

Doing this, the hover changes will only happens when your button is also clickable.

I don’t have that as an option. I only have “isn’t clickable”

Select isn’t clickable and then select is no.

1 Like

Select isn’t clickable and then select is no.

:sweat_smile:

1 Like

Yeah, that one breaks my brain, too!

Oh right. That isn’t immediately obvious!

I still have to override and add the conditional rather than it just working from the default styles, which is annoying.

1 Like