https://zenn.dev/funteractive/articles/button-width

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

よくあるSize定義

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

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

問題点

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

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

対応方法

widthをsizeから分離する

widthが固定サイズ

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

対応方法

width: fullを追加する