Skip to main content

Hello friends,


I’m sure the answer is obvious, I haven’t had luck search previous topics as I’m not really sure what to search for; so apologies if this is a repeat.


My issue is:



  • I have a Button component, the top level’s width is set to Fill and contains an auto layout container

  • I make an instance of that component

  • I set the text to something longer than the original component

  • The top level of the instance does not expand to fit its contents



I’ve seen a bunch of posts about conflicting width sizes, a fixed bug from earlier in the year about component resizing options not being reflected in instances; but I’m not sure if this is related to those or just me not understanding nested resizing methods.


Any help would be really appreciated!

Instead of “Fill container” set “Hug content”.


So you want a component that fills the container but also hugs the content?

You can have the autolayout in the top level of the component, set default to hug but the alignment options to center, When you need the button to fill its container, only set the component to fill. Hope that helps


I figured it out: for whatever reason, I had the structure as:



  • Component

    – Auto layout

    — Text

    — Icon


when it should’ve just been:



  • Component (with auto layout enabled)

    – Text

    – Icon



Thanks for your help, friends!


Perfect solution! Thanks for commenting!