ボタン コンポーネントは、ユーザーがよく理解でき、テキストラベルが不要なアクションに使用します。ボタンは丸い形状でチップと区別されます。
構造
A. コンテンツ
ボタンには、アイコンまたはテキスト用に 1 つのスロットが用意されています。ボタンで実行するアクションに関連するアイコンを選択します。関連するアクションをアイコンで説明できない場合は、3 文字以下のテキストを使用できます。アイコンで操作を明確に説明できない場合は、チップ コンポーネントの使用を検討してください。
B. コンテナ
ボタンのコンテナは、単色の塗りつぶしに限定されます。
ボタンの種類
切り替えボタン
切り替えボタンを使用すると、2 つの状態を切り替えることができます。
コンパクト ボタン
コンパクト ボタンは、見た目は小さく、タップ可能な領域は大きくなります。デフォルトのタップ可能領域は 48x48 dp です。
階層
さまざまな色の塗りつぶしを使用してボタンの階層を示します。
高強調
高強調ボタンには、アプリのプライマリ アクションが含まれます。高強調ボタンには、コンテナにプライマリ カラーまたはセカンダリ カラーを使用し、コンテンツにはプライマリ カラーとセカンダリ カラーを使用します。詳しくは、Wear のマテリアル テーマ設定をご覧ください。
中強調中強調ボタンは、コントラストの低い塗りつぶしの色で区別されます。メイン アクションほど重要度の低いアクションが含まれます。コンテナに Surface の色を使用し、コンテンツに On Surface の色を使用します。
または、中強調ボタンにはカスタムの OutlinedButton コンポーネントを使用します。背景は透明で、プライマリ バリエーションの色のストロークは不透明度 60%、コンテンツはプライマリ カラーです。
低強調（アイコンのみ）低強調ボタンは、塗りつぶしがないことで区別されます。ウォッチフェイスの小さな領域で、コンパクトな配置が必要な場合に最適です。コンテンツにはサーフェスの色を使用します。
サイズ
サイズの異なるボタンを使用して、操作を強調したり目立たなくしたりします。
大
アイコン（30 x 30 dp）
コンテナ（60 x 60 dp）
デフォルト
アイコン（26 x 26 dp）
コンテナ（52 x 52 dp）
小
アイコン（24 x 24 dp）
コンテナ（48 x 48 dp）
XS
アイコン（24 x 24 dp）
コンテナ（32 x 32 dp）
このボタンの周囲にパディングを追加して、タップ ターゲットを 48 dp 以上確保することをおすすめします。ユーザー補助のためのタップ ターゲットの最小サイズです。
Usage
標準のボタンを使って、ユーザーが着信の応答や拒否、タイマーの開始などの単一の操作を実行できるようにします。
切り替えボタンを使って、曜日の選択や選択解除、タイマーの一時停止と再開といったオプションのオン / オフをユーザーが切り替えられるようにします。
アダプティブ レイアウト
レスポンシブ動作
1 ボタン
ボタンが引き伸ばされすぎないように、また相対的なサイズも維持するために、内部のパディングは同じままで、マージンはパーセンテージにする必要があります。
ボタン 2 個
ボタンが 2 つある場合は、相対的なサイズを維持しつつ、ボタンが引き伸ばされすぎないように、内部マージンをパーセンテージで追加します。
IME
1 つまたは 2 つのボタン
ボタンが 2 つまたは 1 つのロックアップの IME は、画面サイズに関係なく、常に横の余白まで引き伸ばされます。
ボタン 3 個
225 dp 未満の画面では、ボタンは円形のままとなり、引き伸ばされません。225 dp 以上の大画面では、ボタンが横の余白まで引き伸ばされます。