# Struggling with Hover States in Penpot Components. **URL:** \ **Category:** Ask the community\ **Tags:** design, component, maincomponent, prototype\ **Created:** [June 17, 2026, 12:42pm UTC](https://community.penpot.app/t/struggling-with-hover-states-in-penpot-components/10667 "2026-06-17T12:42:57Z")\ **Posts on this page:** 2\ **Page:** 1
**Author:** ![valkier](https://avatars.discourse-cdn.com/v4/letter/v/e9c0ed/32.png) [@valkier](https://community.penpot.app/u/valkier)\ **Post date:** [June 17, 2026, 12:42pm UTC](https://community.penpot.app/t/struggling-with-hover-states-in-penpot-components/10667/1 "2026-06-17T12:42:58Z")
I’d like to understand the workflow in Penpot to see if I should switch from Figma. I design a button. Then I create a component, followed by a variant. Now I have a `Button:default` and a `Button:hover`. In the Prototype tab, I can set up a connection using “Mouse Enter” and “Mouse Leave.” This button appears in the Assets panel. However, if I create a new page and drag the button from the Assets panel into my new design, the button doesn’t respond when I hover over it. Did I miss something, or do I have to add the `:hover` state to the design for every instance of the button and set up the connection again? ---
**Author:** ![LauraKalbag](https://dub1.discourse-cdn.com/flex017/user_avatar/community.penpot.app/laurakalbag/32/5014_2.png) [@LauraKalbag](https://community.penpot.app/u/LauraKalbag)\ **Post date:** [July 21, 2026, 9:37am UTC](https://community.penpot.app/t/struggling-with-hover-states-in-penpot-components/10667/2 "2026-07-21T09:37:39Z")
> [@valkier](#): > > Did I miss something, or do I have to add the `:hover` state to the design for every instance of the button and set up the connection again? Right now, you do have to set up the connections again. However, I know that linking variants to interactions like this is a really common request, and something that’s on the team’s radar for the future.