ボタンコンポーネントのpropにwidthはいらない

ファンタラクティブのエンジニアの 太田 です。
Buttonコンポーネントのwidthの考え方について書きます。

よくあるSize定義

Buttonコンポーネントのサイズの定義でこのような定義がされているのを時々目にします。
UIライブラリでも同じような定義が使われていた気がしますが、最近はあまり見かけなくなったように感じています。

この定義方法はやめた方がいいのではと思っています。

問題点

• width、height、テキストのサイズなどが同一のpropで制御されている
• widthが固定サイズ

width、height、テキストのサイズなどが同一のpropで制御されている

高さやテキストのサイズはsmがいいけど、widthだけ変えたい場合に対応できません

対応方法

widthをsizeから分離する

widthが固定サイズ

デバイスサイズによって見え方が違う
どのデバイスで見たときもデバイスの横幅いっぱいの大きさにしたいと思っても固定サイズではできません。

対応方法

width: fullを追加する

スマホはwidth: fullだけどPCでは固定サイズにしたくなった

対応方法

<div class="tw-w-full lg:tw-w-[400px]">
  <Button width="full">ボタン</Button>
</div>

結局親でサイズを決めているのでButtonコンポーネントにwidthを持っている意味はない

結論

ボタンコンポーネントのwidthは常に100%でいい

補足

中身に応じてサイズを決めることもあるので、width: autoが必要なこともあると思います。

あとがき

ボタンコンポーネントに限らずほとんどのコンポーネントのwidthは100%でいいと思っています。