Nested components and swaps

A component can contain instances of other components: an icon inside a button, a button inside a card. A swap prop lets each outer instance choose which component a nested slot shows, like instance swap in Figma, and a pass-through prop lets each outer instance set a prop of the nested one.

Swap a nested component#

1. Open the outer component (double-click an instance) and place an instance of another component inside it (click it in the library).
2. Select that nested instance and click ◇ next to Instance in Expose as prop.
3. On each outer instance, pick the component for the slot from the menu in Props.

Variants can swap nested components too, for example a filled icon in the selected variant.

Pass props through#

A card contains a button with a label prop. To set that label per card, pass it through: the card gets a label prop of its own that forwards to the button.

1. Open the outer component (the card) and select the nested instance (the button).
2. In Expose as prop, under Pass through from the nested instance, click ◇ next to the prop (label).
3. It turns into ◆ with the outer prop's name. A notice says “label passes through — set it per instance in the inspector”.
4. Select a card instance: Props has a typed control for the label. Each card sets its own button text.

• The control on the outer instance has the nested prop's kind: text, color, image, number, visibility or swap.
• Click ◆ again to remove the outer prop.
• Values are checked like any prop, and a pass-through that would loop back into itself is refused.
• React and SwiftUI component exports forward the prop, too.

Related articles#

• Open components inside components
• Props