Figma Support Forum

Nested Interactive Components Disregard Overrides

I have two components - a button, with three inner frames (icon-left, center text, icon-right). The default button component has the icon-left and icon-right inner frames shown by default. When I nest this interactive button component (with rest, hover, press, and focus states) inside another component and hide the icon-left and icon-right inner frames, the overrides are ignored.

For the parent component, I have a text field with the same interactive button component inside the field. Since the interactive text field component has its own states (rest, hover, press, and focus), the interactive button component loses its overrides as the text field interactive component goes through its various states. Basically the two frames inside the button component I set to hidden appear when the interactive text field component animates from its rest state to its hover state.

Proposed fix: make interactive components carry overrides through to their nested components.