Skip to main content
Question

Slots in nested component instances preserve wrong content across variant changes

  • June 25, 2026
  • 3 replies
  • 30 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?

3 replies

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

Kalyani A
  • Kalyani A
  • Author
  • New Member
  • July 20, 2026

Hello. Thank you for your reply. Yes, it does indeed show a modified badge on the right hand panel.

 

Jaycee Lewis
Figmate

Hey hey ​@Kalyani A 👋 Thank you for taking the time to come back. 

The [Modified] badge explains the behavior you're seeing.

Once you edit content inside a slot on an instance, that slot picks up a [Modified] tag and holds onto your custom content so your edits aren't wiped out — which also means a variant switch can no longer reach in to swap it. So the Keyboard icon persisting after the switch is the slot preserving your override by design. A classic case of working-as-designed but not-as-you-expect 🙃

A couple of options depending on what you're after:

  • If you want the icon to reset to the slot's default content, select the slot layer and choose More actions → Reset slot (or, on the instance: More actions → Reset specific changes → Reset [slot name] property)
  • If you want the icon to change automatically when the variant changes, the recommended approach is to drive it with variables and modes rather than swapping variants — binding variables to variants lets you get that effect without the slot override getting in the way

Both are covered here, under Work with slots in instances and Considerations 

Happy to help more if needed — Jaycee

Terms & ConditionsAccessibility statement