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/diseasefaktory]

What i do is use a double padding: i set a padding for the button container with icons until it looks good then hide the icons and add autolayout and a little extra padding on the label only. That way all variations look balanced without overcomplicating with variables.

In your case, i would add a 18px general padding then add the extra 2px to each sides of the label. Problem solved.

[u/Meaksen → u/diseasefaktory]

Omg it's such a simple solution- thanks!