on components accepting className

[thien-do]

This is a valid usage, but can you guess what will be the background color of the Button:

<Button className="bg-success-4" type="danger" />

In general, inheriting class names, although common, is not a good practice. It allows consumers of Button to change Button's internal attributes (background, font size) while the author of Button would have no idea about this.

This is a burden, since the author may be limited in improving the Button, since they don't know what are all of the cases that may break.

In practice:

• If the styles are external (e.g. margin) then they should be set to a wrapper
• If the styles are internal (e.g. color) then they should be set by Button itself, customized via props