アトミックデザインで粒度を分けている際に、アイコン付きのボタン(通常のボタンにアイコンだけつけたもの)をどう処理するのか少し悩んだので、個人的な考えをまとめておこうと思います。
結論
- 単一要素のボタンをButtonコンポーネントとして作成する
- 色やラベル、形といった要素はButtonコンポーネント内の要素に含める(自由)
- 複数要素のボタンをIconButtonコンポーネントとして作成する
単一要素のボタンと複数要素のボタンでコンポーネントを分けることでボタンの粒度の問題を解消しました。アトミックデザインなので複数要素を持つコンポーネントをアトムとして設置するのは扱いづらくなってしまうと思っていて、これで良いのではないかと。
この記事にコメントする
このサイトはreCAPTCHAとGoogleによって保護されています。プライバシーポリシーと利用規約が適用されます。