ボタン

ボタンは、ユーザーのアクションを示す主要な視覚的インジケーターです。

原則

行動を促す: ボタンは、アクションをトリガーすることを明確に伝える必要があります。

明確なフィードバック: ボタンの外観は、さまざまな操作状態（マウスオーバー、押下、フォーカス）で明確に変化し、即座にフィードバックを提供する必要があります。

一貫性: すべてのボタンは、すぐに認識できるように、コアとなるビジュアル言語を共有する必要があります。

柔軟性: ボタン コンポーネントは、一貫性を損なうことなく、アイコンの追加やサイズの変更など、一般的なバリエーションに対応する必要があります。

使い方と配置

ボタンは、関連するコンテンツの近くに配置する必要があります。単独で配置することも、カードやリストなどの他のコンポーネントとともに配置することもできます。

アイコンボタン

アイコンボタンを使用して、コンテンツの密度を下げることができます。アイコンがアクションを明確に表している場合はアイコンボタンを使用し、そうでない場合はボタンラベルを含めます。

切り替え可能

お気に入りなどのブール値の状態を持つアクションの場合、各ボタンタイプで切り替えバリエーションを使用できます。切り替え状態の間にアイコンを入れ替えることで、一目でわかるレスポンシブな操作を実現できます。

解剖学

ボタンは、ラベルと、先頭または末尾のアイコン（省略可）で構成されます。

アイコンボタンは、認識可能なアイコンのみで構成されます。

どちらにも切り替え可能なバリエーションがあります。

カスタマイズ

ボタンには、デフォルト スタイルとラージ スタイルがあります。大きなサイズは重要性を強調するのに役立ちます。

アイコンを使用すると、末尾または先頭のボタンを強調したり、明確にしたり、認識しやすくしたりできます。