Skip to main content
Question

Slots in nested component instances preserve wrong content across variant changes

  • June 25, 2026
  • 1 reply
  • 13 views

Kalyani A
Expected behaviour

I have an Icon Button component that uses a Slot for its icon, with variants for press state and such. I made a new component set for a Chat Input, with different variants that change on interacting with the Icon Button (such as type, voice etc), so its a nested component in the Chat Input component set. So when I click an icon button with the icon keyboard, the variant in chat input should change to the typing version of the input box. So in this input box, there is an icon button with mic icon, which is there incase the user wants to switch back to voice mode.

Instead of displaying the mic icon defined in the target variant, the slotted icon (keyboard) from the previous state persists and overrides it. To be clear, a Mic button incorrectly displays a Keyboard icon, and replacing the Keyboard icon with a different icon causes that new icon to appear across variants as well. Please refer the screenshot to see what behaviour I expected and the screen recording to see how it is actually behaving. In some cases, other button instances unexpectedly inherit the same icon.

I've reproduced this in a minimal test file. Recreating the icons and button components doesn't help, but detaching the button instance immediately fixes the issue. The behavior also changes depending on the button's position in the layer hierarchy.

Has anyone else encountered this? Is this expected behavior for Slots in nested components, or a bug in how slot content is preserved during variant transitions?

1 reply

Jaycee Lewis
Figmate

Hey ​@Kalyani A 👋 Thanks for the detailed write-up and the minimal repro, that's super helpful. Slot behavior across nested variants can get genuinely tricky.

One thing worth checking: when the wrong icon (Keyboard) persists after the variant switch, does that nested Icon Button show a "Modified" / overridden badge on its slot before you switch variants? In other words — was the icon set per-variant on the main Chat Input component, or was it pushed in as an override on the instance?

If you can grab a quick not zoomed-in screenshot of the right-hand panel for that button instance showing whether the slot reads as modified, that'll tell us a lot. Thanks!

— Jaycee