Nested component lose variable value

Hi, I created a component that is linked to Variables and change the value and the variant whenever I change the Mode.

But once this is nested into another component the Variables is disconnected and only change the copy label but ignore the variant change. I moved out from the component and outside the component works normally.

I cannot show the screens because is a sensitive project with NDA but I can show to someone on Figma the bug.

5 Likes

Have the same issue. A component which Variant depends on interactively set Variable stops working, when it is nested in a Variant of another component.

Example: a Status compoent has Variants: in progress, complete. It is set with onClick action on some buttons that set variable status, which is assigned on component instance, as a value of a Variant.
Now this status component is used within a larger context (inside another component). Variable is no longer assigned as a value to Variant of this component.

IMO it should persist.

2 Likes

I am working on a similar component where individual item components that carry state variants (ie default, hover, focused, pressed, disabled), are then nested in a larger component instance. An example is how I have navigation item components nested in a larger main navigation or footer component.

Are preserving variable functionality on nested components coming soon? This would be such a great feature.

Also have somewhat similar issue.

I have an individual component without any variants in my design system. When I use it in other files, the nested components is detached.

But if I add an exact same variant, the nested component retains.

Need help!