ボタン

ボタンは、ユーザーの操作を示す主要な視覚的インジケーターです。

原則

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

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

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

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

使い方と配置

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

check_circle

すべきこと

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

cancel

すべきでないこと

ボタンが多すぎて、ユーザーの視界を圧迫しないようにしてください。

check_circle

すべきこと

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

cancel

すべきでないこと

ボタンを静的な装飾要素として使用しないでください。

構造

カスタマイズ

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