ボタン

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

デザイン要素はフレームの下部に固定する必要があります。

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

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

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

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

使い方と配置

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

段階的表示を使用して、関連性の低いアクションを表示する。

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

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

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

1. 有効: デフォルトの状態 2. マウスオーバー 3. タップ

1. 有効: デフォルトの状態 2. マウスオーバー 3. タップ

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