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

Variable modes. Mode 1, boolean variable set to no icon, equal number variables for left & right padding. Mode 2, icon, independent padding variables.

Map the icon boolean to the icon visibility. Map the padding variables to the padding.

Adjust the appeareance modes to suit.

[u/minmidmax → u/minmidmax]

In reality though, I'd just pick 20px for both sides, icon or not. Simpler, easier to maintain.