ボタン

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

原則

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

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

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

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

使用状況とプレースメント

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

check_circle

すべきこと

プログレッシブ ディスクロージャーを使用して、関連性の低いアクションを表示します。

cancel

すべきでないこと

ボタンが多すぎてユーザーのビューが埋め尽くされている。

check_circle

すべきこと

ボタンを使用してアクションを促します。または、静的要素にタイトルチップを使用します。

cancel

すべきでないこと

ボタンを静的な装飾要素として使用する。

解剖学

デフォルト

1. 有効: デフォルトの状態です。2. Hover 3. タップ

大

1. 有効: デフォルトの状態です。2. Hover 3. タップ

カスタマイズ

ボタンには、デフォルトと大のバリエーションがあり、それぞれにデフォルト、フォーカス、押下状態があります。アイコンを使用すると、ボタンを強調したり、わかりやすくしたり、認識しやすくしたりできます。ボタンのサイズは重要性を強調するのに役立ちます。