Skip to main content
Question

Button Variants best practice

  • January 28, 2021
  • 5 replies
  • 2079 views
h_v_b

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.

5 replies

Harun_Alikadic

Hi, I would think about how do you want it to be coded. Instance overrides are equivalent of HTML inline CSS in web dev. There are rare occasions in which a developer wants to use inline HTML (see under When to Use Inline Styles). Consider that, if it’s cumbersome to maintain over time for you, it will be also for your developer.
But, if L/C/R modifications are smaller rare occasional overrides, then these may take place inline or in your case as auto-layout overrides. As best practice, you should avoid these, and instead you may try to rethink you design decisions and simplify cases, reducing them to fewer states.

h_v_b
1 person likes this
  • h_v_b
    h_v_b
h_v_b
  • h_v_b
  • Author
  • 10 replies
  • January 28, 2021

Thank you for your input this makes a lot more sense now.

I’m porting a design to Figma and building its design system along the way. So trying to make do with what was there and making it more streamlined.

Stefan1
  • Stefan1
  • 2 replies
  • March 8, 2021

Hi @h_v_b ,
I have the same problem with the size of the button - hug content vs full bleed when working with master components.
Couldn’t solve it so far but don’t want to duplicate the number of buttons just for that purpose.
Have you found another way to solve the issue?

h_v_b
  • h_v_b
  • Author
  • 10 replies
  • March 8, 2021

I also ended up doubling the button components (hugged and full-bleed).

They are both children of the same master component (which holds all options), but with different auto-layout constraints applied or visibilities. It is a bit cumbersome to make, but very easy to use in designs in the end and to maintain.

Stefan1
  • Stefan1
  • 2 replies
  • March 8, 2021

Thanks for the quick reply! I guess there is no other way then 😦
You might be right in terms of low maintenance costs but just a pitty that working with master components isn’t a little bit more flexible.
thx st

Reply


Terms & ConditionsCookie settings

Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings