Figma Support Forum

While-hovering + On-click interactions don't work well together

This isn’t necessarily a bug, but definitely unexpected behavior.

So I have a simple button component, which changes to a hover state component while hovering - cool. Works perfectly.

The problem arrises when I want to use that button in my prototypes. If I add an on-click interaction to navigate to a different frame, for example, the click interaction doesn’t work. As soon as my mouse hovers over the component, it technically changes to the hover state one, which doesn’t have the click component on it. The on-click interaction would need to be added to the hover state component, which I can’t do because that isn’t being used in the actual design (it’s only accessed via the change-to while-hovering interaction).

Expected behavior: either (A) all interactions that I add to my component should remain, even after it “changes” to a different component, or (B) visually change a component to a different one, but don’t actually change it, so I can still add other interactions to it.

Or maybe there is a third, better option. Basically, my goal is to replicate normal button behavior: have a hovered state, and a click interaction, in the same component.

Hope this makes sense!

I’ve ran into the same problem and agree that this workflow needs some more attention.

I found a somewhat hacky workaround which might be helpful for you in the meantime.

I added a third button state, active, and styled this the same as hover. The default is wired to hover state as in your example. I then added a click interaction from the hover to active state, and a change after delay from active back to default.

If you now add an on-click interaction on top of the variant defaults in your prototypes, the navigation will work as expected on hover.

This workaround falls apart if you need a genuine active state styled separately to hover, as once you add the navigation this will take priority and not display the active state.

Hope this helps!

Isn’t normal button behaviour exactly that? You hover on a button, it changes to its hover state, then you click from that state to then navigate to another frame. Which you can achieve with Interactive components.

Maybe i’m not understanding that you can’t access the hover state in your design?

I think I understand your point but tested this really quick and it works. even if I have the button component on a separate page with the on-hover behavior, I can still add the on-click to take me to another page. So it should work.

If not, one thing you can do is to swap the state of the button to hover, and from there to create the link to where you need it, but it should work by default, because the button is under a variance component type, so I don’t think that the on-hover state should have the link, because the button appears as one in the asset tab, even there are multiple variances.