Przyciski
Zadbaj o dobrą organizację dzięki kolekcji
Zapisuj i kategoryzuj treści zgodnie ze swoimi preferencjami.
Używaj komponentu Przycisk do działań, które są dobrze rozumiane przez użytkowników i nie wymagają etykiety tekstowej. Przyciski różnią się od elementów okrągłym kształtem.
Anatomia
A. Treści
Przyciski mają 1 miejsce zarezerwowane na ikonę lub tekst. Wybierz ikonę pasującą do działania wykonywanego przez przycisk. Jeśli ikona nie pozwala opisać danego działania, możesz użyć tekstu zawierającego maksymalnie 3 znaki. Jeśli ikona nie pozwala wyraźnie opisać działania, rozważ użycie elementu działania.
B. Kontener
Kontenery przycisków są ograniczone do jednego jednolitego koloru wypełnienia.
Przyciski kompaktowe
Przyciski kompaktowe są mniejsze, ale mają większy obszar dotykowy. Domyślna dotykowa powierzchnia to 48 x 48 dp.
Hierarchia
Używaj różnych kolorów wypełnienia, aby oznaczać hierarchię przycisków.
Wysoki poziom natężenia
Przyciski o wysokim stopniu podkreślenia zawierają działania, które są najważniejsze w aplikacji. W przypadku przycisków o wysokim stopniu podkreślenia użyj kolorów Główny lub Dodatkowy dla kontenera oraz kolorów Główny na tle Głównego i Dodatkowego na tle Dodatkowego. Więcej informacji znajdziesz w artykule Motywowanie Wear Material.
Umiarkowane podkreślenie
Przyciski o średnim stopniu podkreślenia różnią się od innych wypełnieniem o mniej kontrastowym kolorze. Zawierają działania mniej istotne niż działania główne. Użyj koloru powierzchni dla kontenera, a koloru na powierzchni dla treści.
Możesz też użyć niestandardowego komponentu OutlinedButton, aby utworzyć przycisk o średnim stopniu podkreślenia. Ma przezroczyste tło, obrys w kolorze wariantu podstawowego o przezroczystości 60% oraz elementy w kolorze podstawowego.
Niski poziom natężenia (tylko ikona)
Przyciski o niskim stopniu podkreślenia są wyróżnione brakiem wypełnienia. Najlepiej sprawdzają się na mniejszych obszarach tarczy zegarka, gdzie potrzebne jest kompaktowe rozmieszczenie. Użyj koloru Na powierzchni dla treści.
Rozmiary
Używaj przycisków o różnych rozmiarach, aby wyróżniać lub nie wyróżniać działań.
Duży
Ikona (30 x 30 dp)
Kontener (60 x 60 dp)
Domyślna
Ikona (26 x 26 dp)
Kontener (52 x 52 dp)
Mały
Ikona (24 x 24 dp)
Kontener (48 x 48 dp)
Bardzo mały
Ikona (24 x 24 dp)
Kontener (32 x 32 dp)
Zalecamy dodanie dodatkowego marginesu wokół tego przycisku, aby utworzyć element dotykowy o szerokości co najmniej 48 dp. Jest to minimalny rozmiar docelowego elementu dotykowego z uwagi na ułatwienia dostępu.
Wykorzystanie
Używaj standardowych przycisków, aby umożliwić użytkownikowi wykonanie pojedynczego działania, np. przyjęcie lub odrzucenie połączenia albo uruchomienie minutnika.
Użyj przycisków przełączania, aby umożliwić użytkownikowi włączenie lub wyłączenie opcji, np. wybranie lub odznaczenie dni tygodnia albo wstrzymanie i ponowne uruchomienie minutnika.
Układy adaptacyjne
Elastyczne działanie
1 przycisk
Wewnętrzne wypełnienie pozostanie takie samo, a marginesy należy użyć w postaci wartości procentowych, aby nie dopuścić do zbytniego rozciągania się przycisków i utrzymać ich względną wielkość.
2 przyciski
Jeśli są 2 przyciski, dodawane są procentowe marginesy wewnętrzne, aby nie rozciągały się zbytnio i zachowywały względną wielkość.
IME
1 lub 2 przyciski
Interfejsy IME z 2 przyciskami lub przyciskiem blokującym zawsze rozciągają się do krawędzi ekranu niezależnie od jego rozmiaru.
3 przyciski
Na ekranach mniejszych niż 225 dp przyciski pozostają okrągłe i nie rozciągają się. Na większych ekranach (225 dp lub większych) przyciski rozciągają się do krawędzi.
Treść strony i umieszczone na niej fragmenty kodu podlegają licencjom opisanym w Licencji na treści. Java i OpenJDK są znakami towarowymi lub zastrzeżonymi znakami towarowymi należącymi do firmy Oracle lub jej podmiotów stowarzyszonych.
Ostatnia aktualizacja: 2025-07-27 UTC.
[null,null,["Ostatnia aktualizacja: 2025-07-27 UTC."],[],[],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."]]
