ボタン

ユーザーによって詳細に理解されており、テキストラベルを必要としないアクションには、Button コンポーネントを使用します。ボタンは、その円形の形状によってチップと区別されます。

構造

A. コンテンツ

ボタンには、アイコンまたはテキスト用に 1 つのスロットが用意されています。ボタンで実行するアクションに関連するアイコンを選択します。アイコンで関連するアクションを説明できない場合は、最大 3 文字のテキストを使用できます。アイコンでアクションを明確に説明できない場合は、チップ コンポーネントの使用を検討してください

B. コンテナ

ボタンのコンテナは、単色の塗りつぶしに限定されます。

切り替えボタン

切り替えボタンを使用すると、ユーザーは 2 つの状態を切り替えることができます。

コンパクト ボタン

コンパクト ボタンは、小さく表示されますがタップ可能な領域は拡大されます。デフォルトのタップ可能な領域は 48x48 dp です。

階層

さまざまな色の塗りつぶしを使ってボタンの階層を表します。

高強調

高強調ボタンには、アプリの主要なアクションが含まれます。コンテナに Primary 色または Secondary 色を使用し、コンテンツには On Primary 色と On Secondary 色を使用します。詳細については、Wear のマテリアル テーマ設定をご覧ください。

中強調

中強調ボタンは、コントラストの低い色の塗りつぶしによって区別されます。プライマリ アクションよりも重要度の低いアクションが含まれます。コンテナには Surface 色を、コンテンツには On Surface 色を使用します。

または、中強調ボタンにはカスタムの OutlinedButton コンポーネントを使用します。この場合、背景は透明、ストロークは透明度 60% のプライマリ バリエーションの色、コンテンツはプライマリの色になります。

低強調（アイコンのみ）

低強調ボタンは、塗りつぶしがないことで区別されます。コンパクトな配置が必要とされる、ウォッチフェイスの小さな領域に最適です。コンテンツには On Surface 色を使用します。

サイズ

さまざまなサイズのボタンを使用して、アクションを強調したり、目立たなくしたりします。

大
アイコン（30 x 30 dp）
コンテナ（60 x 60 dp）

デフォルト
アイコン（26 x 26 dp）
コンテナ（52 x 52 dp）


小
アイコン（24 x 24 dp）
コンテナ（48 x 48 dp）

アイコン（24 x 24 dp）
コンテナ（32 x 32 dp）
微小サイズに設定できるのはコンパクト ボタンのみです。

使用方法

標準ボタンを使用して、呼び出しの承認や拒否、タイマーの開始などの単一のアクションをユーザーが行えるようにします。

切り替えボタンを使用して、曜日の選択や選択解除、タイマーの一時停止と再開などのオプションをユーザーが有効または無効にできるようにします。