ボタンは、ユーザーのアクションを示す主要な視覚的インジケーターです。
原則
行動を促す: ボタンは、アクションをトリガーすることを明確に伝える必要があります。
明確なフィードバック: ボタンの外観は、さまざまな操作状態（ホバー、押下、フォーカス）で明確に変化し、即座にフィードバックを提供する必要があります。
一貫性: すべてのボタンは、すぐに認識できるように、共通の視覚言語を共有する必要があります。
柔軟性: ボタン コンポーネントは、一貫性を損なうことなく、アイコンの追加やサイズの変更など、一般的なバリエーションに対応する必要があります。
使用状況とプレースメント
ボタンは、関連するコンテンツの近くに配置する必要があります。単独で配置することも、カードやリストなどの他のコンポーネントと一緒に配置することもできます。
すべきこと
プログレッシブ ディスクロージャーを使用して、関連性の低いアクションを表示します。
すべきでないこと
ボタンが多すぎてユーザーのビューが埋め尽くされる。
すべきこと
ボタンを使用してアクションを促します。または、静的要素にタイトルチップを使用します。
すべきでないこと
ボタンを静的な装飾要素として使用する。
解剖学
デフォルト
1. 有効: デフォルトの状態です。2. ホバー
3. タップ
大
1. 有効: デフォルトの状態。
2. Hover
3. タップ
カスタマイズ
ボタンには、デフォルトと大のバリエーションがあり、それぞれにデフォルト、フォーカス、押下状態があります。アイコンを使用すると、ボタンを強調したり、明確にしたり、認識しやすくしたりできます。ボタンのサイズは重要性を強調するのに役立ちます。
デフォルト
| プロパティ | カスタマイズ | デフォルト |
|---|---|---|
| シェイプ | ○ | 大、円 |
| パディング | ○ | 16 dp、8 dp |
| 枠線 | ○ | 2 dp、#606460 |
| テキスト | ○ | Body Small |
| 先頭のアイコン | ○ | 40 dp |
| 末尾のアイコン | ○ | 40 dp |
| サイズ | ○ | 最小高さ 56 dp |
| 奥行き | ○ | 0 |
大
| プロパティ | カスタマイズ | デフォルト |
|---|---|---|
| シェイプ | ○ | 大、円 |
| パディング | ○ | 20 dp、8 dp |
| 枠線 | ○ | 2 dp、#606460 |
| テキスト | ○ | Body Small |
| 先頭のアイコン | ○ | 56 dp |
| 末尾のアイコン | ○ | 56 dp |
| サイズ | ○ | 最小高さ 72 dp |
| 奥行き | ○ | 0 |
| Surface | × |