ボタン

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 以上確保することをおすすめします。ユーザー補助のためのタップ ターゲットの最小サイズです。

1 ボタン

ボタンが引き伸ばされすぎないように、また相対的なサイズも維持するために、内部のパディングは同じままで、マージンはパーセンテージにする必要があります。

ボタン 2 個

ボタンが 2 つある場合は、相対的なサイズを維持しつつ、ボタンが引き伸ばされすぎないように、内部マージンをパーセンテージで追加します。