Button (ボタン)

Button コンポーネントシンボルは、シンプルなユーザー操作のためのトリガーを表します。Buttons は、カード、ダイアログ、フォーム、その他コンポーネントやパターンに使用します。Button は、Ignite UI for Angular Button コンポーネントと視覚的に同じものです。

Button のデモ

タイプ

5 つの Button タイプがあります。

塗りつぶしや影付きの Contained Button は、操作を強調します。
アウトライン付きの Outlined Button は、ほとんどのアクションに適しています。
Flat Button は、通常あまり重要でない操作に使用します。
Icon Button は、操作をアイコンでのみ表されます。
Floating Action Button (Fab) の塗りつぶしと影は、画面ごとに 1 回使用してメインの操作を強調します。

操作状態

これらのボタンはすべて、有効なバリアントと無効なバリアントの両方をサポートしているため、無効な状態で挿入することもできます。Figma では、プロパティパネルからブール演算を使用して切り替えることができます。Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

状態

有効なボタンは、Idle (アイドル) と Hover (ホバー) 状態をサポートします。Figma では、State プロパティを変更することで切り替えることができる Focused (フォーカス済み) Focused & Hover (フォーカス済みおよびホバー) 状態を追加しました。Sketch ではこれを Symbol Overrides で実現していますが、Adobe XD では Component States パラダイムを使用して簡単に状態を切り替えることができます。

レイアウトテンプレート

Contained、Outlined、Flat、および Floating Action ボタンは、柔軟なアイコンおよびラベルのテンプレートをサポートします。Figma では、アイコンを表示または非表示にするには、Left Icon および Right Icon ブール値プロパティを使用できます。アイコンボタンが必要な場合は、Content プロパティを Icon に設定できます。Sketch では、スマートレイアウトルールが適用されるため、非表示にする要素を ~No Symbol に設定すると、レイアウトを調整できます。Adobe XD では、代わりに未使用レイヤーを削除します。ただし、デザイン時にラベルとアイコンの位置のみを変更する場合は、一方を他方の側にドラッグできます。

スタイル設定

Button は、さまざまなオプションを通じて背景色、ラベル、アイコンの色を柔軟にスタイル設定できます。

使用方法

Button のコンテンツにラベルを含む場合、大文字を太文字 (Medium または Semibold) を使用してください。Button がレイアウトで 1 つ以上必要な場合、同じ高さで揃え、互いに十分なスペースを保ちながら同じ水平面に配置することによりタップやクリックで発生する可能性のあるエラーを防止できます。このようなレイアウトの場合は、ボタンタイプは組み合わせないようにします。UI の特定のセクションにあるすべての操作に同じタイプを使用して統一感を持たせます。

良い例	悪い例