按鈕
透過集合功能整理內容
你可以依據偏好儲存及分類內容。
請將 Button 元件用在使用者充分瞭解且不需要文字標籤的動作。按鈕為圓形設計，這是和方塊的區別。
圖解
A. 內容
按鈕會為圖示或文字保留一個版位。請選取與執行按鈕動作相關的圖示。如果圖示無法描述相關動作，您可以使用文字，但不能超過三個字元。如果圖示無法清楚描述動作，請考慮使用方塊元件
B. 容器
按鈕容器只能填入單色。
切換鈕
切換鈕可讓使用者在兩個狀態之間切換。
精簡按鈕
精簡按鈕看起來較小，但有較大的可輕觸區域。預設的可輕觸區域為 48x48 dp。
階層
使用不同的填滿色彩表示按鈕階層。
高強調
高強調按鈕包含應用程式的主要動作。針對這類按鈕，請為容器使用 Primary 或 Secondary 顏色，並將 On Primary 和 On Secondary 顏色用於內容。詳情請參閱「Wear Material 主題設定」。
中強調
中強調按鈕的塗色較不鮮明。比起主要動作，這些按鈕包含的動作比較不重要。請為容器使用 Surface 顏色，並將 On Surface 顏色用於內容。
或者，您也可以針對中強調按鈕，使用自訂 OutlinedButton 元件。這個元件含有透明背景、不透明度 60% 的 Primary Variant 色彩筆劃，以及 Primary 顏色的內容。
低強調 (僅限圖示)
低強調按鈕的特徵就是沒有塗色。這個選項最適合用於錶面上需要精簡規劃的較小區域。請為內容使用疊加表面色。
大小
使用不同大小的按鈕，來增加強調或減少強調動作。
大
圖示 (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 個按鈕，系統會加入百分比內部邊距，避免按鈕過度拉伸，並維持相對大小。
IME
1 或 2 個按鈕
無論螢幕大小為何，使用 2 個或單一按鈕鎖定功能的 IME 一律會一直延伸到側邊邊界。
3 個按鈕
在小於 225 dp 的螢幕上，按鈕會維持圓形，不會拉長。在 225 dp 以上的大螢幕上，按鈕會一直延伸到側邊邊界。
這個頁面中的內容和程式碼範例均受《內容授權》中的授權所規範。Java 與 OpenJDK 是 Oracle 和/或其關係企業的商標或註冊商標。
上次更新時間：2025-07-27 (世界標準時間)。
[[["容易理解","easyToUnderstand","thumb-up"],["確實解決了我的問題","solvedMyProblem","thumb-up"],["其他","otherUp","thumb-up"]],[["缺少我需要的資訊","missingTheInformationINeed","thumb-down"],["過於複雜/步驟過多","tooComplicatedTooManySteps","thumb-down"],["過時","outOfDate","thumb-down"],["翻譯問題","translationIssue","thumb-down"],["示例/程式碼問題","samplesCodeIssue","thumb-down"],["其他","otherDown","thumb-down"]],["上次更新時間：2025-07-27 (世界標準時間)。"],[],[],null,["# Buttons\n\nUse a [Button](/reference/kotlin/androidx/wear/compose/material/package-summary#Button(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for actions that are well understood by users and don't need a text label. Buttons are distinguished from chips by their circular shape.\n\nAnatomy\n-------\n\n\n**A. Content**\n\nButtons have a single slot reserved for an icon or text. Choose an icon that is relevant to the action the button performs. You can use text with a maximum of three characters if an icon is unable to describe the relevant action. Consider the use of a Chip component if an icon cannot clearly describe the action\n\n**B. Container**\n\nButton containers are limited to a single solid color fill.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nButton types\n------------\n\n\n**Toggle buttons**\n\n[Toggle buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#ToggleButton(kotlin.Boolean,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ToggleButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) enable users to toggle between two states. \n\n**Compact buttons**\n\n[Compact buttons](/reference/kotlin/androidx/wear/compose/material/package-summary#CompactButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.ui.unit.Dp,androidx.compose.foundation.interaction.MutableInteractionSource,kotlin.Function1)) appear smaller but have a larger tappable area. The default tappable area is 48x48 dp.\n\n\u003cbr /\u003e\n\nHierarchy\n---------\n\n\nUse different color fills to denote button hierarchy.\n\n**High emphasis**\n\nHigh emphasis buttons contain actions that are primary to the app. For high emphasis buttons use Primary or Secondary colors for the container and On Primary and On Secondary colors for the content. For more information see [Wear Material Theming](/training/wearables/design/theme).\n\n**Medium emphasis**\n\nMedium emphasis buttons are distinguished by a less contrasting color fill. They contain actions that are less important than the primary actions. Use the Surface color for the container and the On Surface color for the content.\n\nAlternatively, use the custom [OutlinedButton](/reference/kotlin/androidx/wear/compose/material/package-summary#OutlinedButton(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Boolean,androidx.wear.compose.material.ButtonColors,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material.ButtonBorder,kotlin.Function1)) component for a medium emphasis button. This has a transparent background, a primary variant colored stroke of 60% opacity, and primary colored content.\n**Low emphasis (icon only)**\n\n\u003cbr /\u003e\n\nLow emphasis buttons are distinguished by having no fill. They are best suited for smaller areas on the watch face where a compact arrangement is needed. Use the On Surface colour for the content.\n\n\u003cbr /\u003e\n\n\u003cbr /\u003e\n\nSizes\n-----\n\nUse buttons of different sizes to emphasize or de-emphasize actions.\n\n\n**Large**\n\nIcon (30 x 30 dp) \nContainer (60 x 60 dp) \n\n**Default**\n\nIcon (26 x 26 dp) \nContainer (52 x 52 dp)\n\n\u003cbr /\u003e\n\n\n**Small**\n\nIcon (24 x 24 dp) \nContainer (48 x 48 dp) \n\n**Extra Small**\n\nIcon (24 x 24 dp) \nContainer (32 x 32 dp)\n\n\nIt's recommended to add additional padding around this button to create a tap target of at least 48 dp. This is our minimum tap target size for accessibility.\n\n\u003cbr /\u003e\n\nUsage\n-----\n\nUse standard buttons to enable the user to take a single action such as accepting or declining a call, or starting a timer.\n\nUse toggle buttons to allow the user to turn an option on or off, such as selecting and deselecting days of the week or pausing and restarting a timer.\n\nAdaptive layouts\n----------------\n\n### **Responsive behavior**\n\n\n**1 button**\n\nThe internal padding will remain the same, and the margins should be percentages in order to stop the buttons from stretching too far, and keeping a relative size. \n\n**2 buttons**\n\nWhen there are 2 buttons, percentage internal margins are added in order to stop the buttons from stretching too far, and keeping a relative size.\n\n\u003cbr /\u003e\n\n### **IMEs**\n\n**1 or 2 Buttons**\n\nIMEs with 2 or a single button lockup always stretch all the way to the side margins regardless of screen size.\n\n**3 Buttons**\n\nOn screens smaller than 225 dp, the buttons remain circular and do not stretch. On larger screens, 225 dp or larger, the buttons stretch all the way to the side margins."]]
