Skip to main content

I have a button component that can be used with or without an icon. The problem is that the left padding changes based on whether the icon is shown or not. I’d like 16px left padding with icon, but 24px left padding without icon.


Button Padding No Icon


Any ideas on how to build this component so that it’ll work by just showing/hiding the icon?


My current workaround is to set the icon width to 0px, but you have to detach the instance to do this. I was wondering if there was a more elegant solution that doesn’t require detaching, preferably something not too hacky like using transparent spacers.

I’m assuming you’re already using autolayout, but are you not using variants?

If you get variants set up you could just make the padding 24px for the non-icon variant.

Ah yes, that could work.


We’re already using variants for button states and size, so I guess we could add icon/no icon to the mix. Though it’d double the number of variants and it’s already a bit crazy. 😳


I was just hoping there was another trick, but we may have to go that route. Thanks for the idea!

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Terms & ConditionsCookie settings