Component's variant within a component variant doesn't follow siut

Hi! I have an icon component with 3 color variants. I put it inside a button component. The button component has 3 variants and I’d like to use for one of them a color variant of the icon. Currently it wouldn’t allow it unless I detach the icon property, but if I do that and change the icon it doesn’t make the change in all color variants of the button. Any ideas how to solve or walk around that?

Hi there,

Thanks for reaching out. Would you like to use the icon component inside a button component so the icon in the button component can match the changes in the icon component? If I understand correctly, how about using an instance of the icon for the button component? If you change the icon component, the instances should align with the main component.

The help center article could help you understand more: https://help.figma.com/hc/en-us/articles/360038662654-Guide-to-components-in-Figma

Am I understanding the issue you are describing correctly? Please let me know if I’m missing any additional points. I want to make sure I am fully addressing your questions.

Thanks,
Toku