Button component for actions that are well understood by users and
don’t need a text label. Buttons are distinguished from chips by their circular
Buttons 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 can’t
clearly describe the action
Button containers are limited to a single solid color fill.
Toggle buttons enable users to toggle between two states.
Compact buttons appear smaller but have a larger tappable area. The
default tappable area is 48x48dp.
High emphasis buttons are distinguished by their fill. They 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.
Medium 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.
Low emphasis (icon only)
Low 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.
Use buttons of different sizes to emphasize or de-emphasize actions.
Icon (30 x 30dp)
Container (60 x 60dp)
Icon (26 x 26dp)
Container (52 x 52dp)
Icon (24 x 24dp)
Container (48 x 48dp)
Icon (24 x 24dp)
Container (32 x 32dp)
Only compact buttons can be extra small.
Use standard buttons to enable the user to take a single action such as
accepting or declining a call, or starting a timer.
Use 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.