Skip to main content
Question

Can't use different icon variants in button states due to shared nested instance


Robin van Dienst

Hi everyone,

I’m running into a little issue with nested components and was hoping someone here might have a solution or workaround.

I’ve made an Icon component with two variants:

  • filled: no (outlined)
  • filled: yes (filled)

This icon is used inside a Button component, which has multiple variants for interaction states like default, hover, and active.

Here’s what I’m trying to do:

  • Show the outlined icon in the default state
  • Show the filled icon in the hover state
  • Show the filled icon in the active state

The problem is:
When I change the icon variant in one button state, it changes across all the button states. It seems like Figma is treating the nested icon as the same instance in all button variants, so I can’t set a different icon for each state.

I’d love to keep everything component-based and avoid detaching or duplicating the icon for each variant, but right now that feels like the only option.

I made a figma file for clarification

Has anyone dealt with this before or found a clean workaround?

Thanks so much in advance! 😊

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings