タイルの同じ button と a はどのようにコンポーネントを設計すべきか？

ふと Twitter で見かけたので React のコンポーネントを設計する際に、スタイルの同じボタンやリンクをどのように設計するかについて考えてみます。 私は少し前まで動的にコンポーネントを出し分けしていましたが、スタイルだけ切り出すのに安定しています。

props で動的に出し分け

コンポーネントに props を渡して、それによってスタイルを変える方法です。しかし、フレームワークやライブラリによっては props が増えてしまうことがあります。(next/link など)

シンプルにコンポーネントを分ける

シンプルに同じデザインのコンポーネントを作り、それぞれのコンポーネントでスタイルを当てる方法です。 簡単な考えですが、コンポーネントが増えるたびにスタイルを当てるコンポーネントも増えていくので、管理が大変になります。

型アサーション

cva でスタイルだけを取り出す

これはshadcn/uiからインスピレーションを受けています。