Problem with interacitve behaviour in nested component

Question

Hey, I have a problem with interactive components. It seems like a bug, but maybe it is by design and I need to rethink this structure…

As you can see in the video i have an instance of my interactive button component that works just fine… in the design system I work on, the button is nested in other components, in this case in breadcrumb. Here you can see my problem: The hover and click behaviour of the button is weird. But as soon as I detatch the breadcrumb and the button is no longer “nested” it works just fine.

tank666 · Accepted Answer

Vector fill color (nested component) doesn't change back to the one specified in the default variant after interaction Interactive Components        Pay attention to the order of the layers. For the color override to work correctly, you need to adhere to the following structure: Union > Icon Instance > Vector. Union — to color override;Icon Instance — to swap icons.I edited your file and now it works as expected. You may notice that I used a structure like this: .base-icon > Union > Icon Instance > Vector. This is done to keep the icon at its original size. If you don’t use .base-icon, the icon will be resized due to Union. Design fil…

Anonymous · Answer

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Sign up

Login with SSO

Login to the community

Login with SSO

Scanning file for viruses.

This file cannot be downloaded