Dzhavat Ushev

Twitter GitHub RSS

Consistency vs flexibility when building components

A few days ago I asked Twitter how would one solve the task of implementing a button component that can also display an icon. Is it by adding an icon property to the button component or by having a separate icon component nested inside the button? I also asked why would one choose one approach over the other.

Tweet: Two solutions for displaying an icon in a button

Quite a few people replied with their pros and cons for both options. In this post I’m going to try and summarize the points mentioned there. I think that’s quite valuable to have as a reference in the future.

Option A - icon property on a button component

Pros

Cons

Option B - Separate icon component nested inside the button component

Pros

Cons

Which one to choose?

As you can see, there are pros and cons with both solutions. Which one to choose will depend on factors like requirements, app size, team size, etc. Nevertheless, there are some signs that can point you in a specific direction.

As a side note, I’m not saying that it’s impossible to keep the style consistent with Option B. But it’s harder when all the possibilities are available. Counter that with documentation, good examples, PR reviews and guidance.

Do you have other points that are not mentioned above? Share them on the Twitter thread.

Thanks to everyone who responded to my question and inspired this post ❤️

Share on Twitter