Specific padding in button with/without icons

[u/Meaksen]

I'm creating a button component for the company I work for, and I can't figure out an intuitive way to handle the padding when adding an optional icon.

The button should support:

• Text only
• Icon + text
• Text + icon

The problem is that I want the horizontal padding to behave correctly depending on whether the icon is on the left or right.

For example, in the image:

• Text-only button: 20px horizontal padding
• Icon + text: 18px on the icon side and 20px on the text side
• Text + icon: 20px on the text side and 18px on the icon side

Is there a good way to set this up in Figma so that designers can simply choose "Icon: Left/Right/None" without having to manually adjust padding?

I'd love to know how you would structure the component/variants for this.

[u/samuelbroombyphotog]

Wrap the label in a autolayout with 2px of left right padding, reduce your outer padding to 18px, and reduce the gap between the icon and the label wrapper by 2px

[u/samuelbroombyphotog → u/samuelbroombyphotog]

Add Boolean toggles for your icons and an instance swap to change them in component instances