Two different button types nested inside another component, button label overides are not carrying across variants, how can I make this work?

Question

I have a “Contextual menu” component which has three variants. Each use a button type and a menu (list). One uses a primary-button (set to secondary), one uses a “ghost-button” the other an “icon-button”. My issue is if a designer adds their text label when the menu is set to default (primary-button) then switches to  “ghost” the label is back to ghost-button’s default label.

The buttons are separate components but they on their own will carry label overrides between them but they don’t seem to be able to do it now that they are nested inside this new component. Is there a way to allow overrides to also be share here?
Below is the components and variant states and the button structure of the nested buttons insode the contextual menu.

tank666 · Accepted Answer

Your screenshot doesn’t show the component structure (layers), but it looks like there are layer mismatches somewhere. Try renaming the button instance.

But so that you can get an accurate answer, I suggest you share the link to the test file so that anyone in the community can check it.

Toby_Magrath1 · Answer

Yes! that was the issue, stupid me didn’t remane the nested button layer to carry across all variants &#129318;&#8205;&#9794;&#65039;. Was staring me right in the face. Thank you!!

Sign up

Login with SSO

Login to the community

Login with SSO