I’m working on a project with many different types of buttons.
I’ve decided to build the many variants by basing them on a Main/Master component.
The Main/Master component has variants itself and holds all the information regarding shape, size and icon placement.
The Child Variants hold the different states, colors overrides for primary and secondary, wether there’s an icon or not, etc.
In the design, those buttons sometimes need to hug their content sometimes be full-bleed and fill their parent container. For the same button, sometimes the label should be centered and sometimes aligned left/right.
Is it best to create variants for hug content and fill container plus the L/C/R alignements? or is it best to set all buttons in the variants to hug content and apply auto-layout overrides in the design?
I’m afraid that creating all options will become very cumbersome to maintain over time and would like to know what’s the best practice for such use-cases.