compose-preview M3 Wear OS Apps Design Kit

Edge-Hugging Buttons

9 of 64 components implemented · Open in Figma

Our renders Design spec Diff %

Outline every component Only what we don't implement Double-click a section to zoom · ⌘/Ctrl-scroll · drag to pan · + / − / 0 by keyboard · Esc resets

9 of 64 components implemented

Style=Filled, Type=Text, Size=Small, Disabled=Nocatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Filled, Type=Text, Size=Default, Disabled=Nocatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Filled, Type=Text, Size=Large, Disabled=Nocatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Filled, Type=Text, Size=Extra-Large, Disabled=Nocatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Filled, Type=Icon, Size=Small, Disabled=Nono code behind this Style=Filled, Type=Icon, Size=Default, Disabled=Nocatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Filled, Type=Icon, Size=Large, Disabled=Nono code behind this Style=Filled, Type=Icon, Size=Extra-Large, Disabled=Nono code behind this Style=Filled Variant, Type=Text, Size=Small, Disabled=Nono code behind this Style=Filled Variant, Type=Text, Size=Default, Disabled=Nocatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Filled Variant, Type=Text, Size=Large, Disabled=Nono code behind this Style=Filled Variant, Type=Text, Size=Extra-Large, Disabled=Nono code behind this Style=Filled Variant, Type=Icon, Size=Small, Disabled=Nono code behind this Style=Filled Variant, Type=Icon, Size=Default, Disabled=Nono code behind this Style=Filled Variant, Type=Icon, Size=Large, Disabled=Nono code behind this Style=Filled Variant, Type=Icon, Size=Extra-Large, Disabled=Nono code behind this Style=Tonal, Type=Text, Size=Small, Disabled=Nono code behind this Style=Outline, Type=Text, Size=Small, Disabled=Nono code behind this Style=Tonal, Type=Text, Size=Default, Disabled=Nocatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Outline, Type=Text, Size=Default, Disabled=Nocatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Tonal, Type=Text, Size=Large, Disabled=Nono code behind this Style=Outline, Type=Text, Size=Large, Disabled=Nono code behind this Style=Tonal, Type=Text, Size=Extra-Large, Disabled=Nono code behind this Style=Outline, Type=Text, Size=Extra-Large, Disabled=Nono code behind this Style=Tonal, Type=Icon, Size=Small, Disabled=Nono code behind this Style=Outline, Type=Icon, Size=Small, Disabled=Nono code behind this Style=Tonal, Type=Icon, Size=Default, Disabled=Nono code behind this Style=Outline, Type=Icon, Size=Default, Disabled=Nono code behind this Style=Tonal, Type=Icon, Size=Large, Disabled=Nono code behind this Style=Outline, Type=Icon, Size=Large, Disabled=Nono code behind this Style=Tonal, Type=Icon, Size=Extra-Large, Disabled=Nono code behind this Style=Outline, Type=Icon, Size=Extra-Large, Disabled=Nono code behind this Style=Filled, Type=Text, Size=Small, Disabled=Yesno code behind this Style=Filled, Type=Text, Size=Default, Disabled=Yescatalog/src/main/kotlin/ee/schimke/wearm3catalog/sections/EdgeButtons.kt#ScreenEdgeButton Style=Filled, Type=Text, Size=Large, Disabled=Yesno code behind this Style=Filled, Type=Text, Size=Extra-Large, Disabled=Yesno code behind this Style=Filled, Type=Icon, Size=Small, Disabled=Yesno code behind this Style=Filled, Type=Icon, Size=Default, Disabled=Yesno code behind this Style=Filled, Type=Icon, Size=Large, Disabled=Yesno code behind this Style=Filled, Type=Icon, Size=Extra-Large, Disabled=Yesno code behind this Style=Filled Variant, Type=Text, Size=Small, Disabled=Yesno code behind this Style=Filled Variant, Type=Text, Size=Default, Disabled=Yesno code behind this Style=Filled Variant, Type=Text, Size=Large, Disabled=Yesno code behind this Style=Filled Variant, Type=Text, Size=Extra-Large, Disabled=Yesno code behind this Style=Filled Variant, Type=Icon, Size=Small, Disabled=Yesno code behind this Style=Filled Variant, Type=Icon, Size=Default, Disabled=Yesno code behind this Style=Filled Variant, Type=Icon, Size=Large, Disabled=Yesno code behind this Style=Filled Variant, Type=Icon, Size=Extra-Large, Disabled=Yesno code behind this Style=Tonal, Type=Text, Size=Small, Disabled=Yesno code behind this Style=Outline, Type=Text, Size=Small, Disabled=Yesno code behind this Style=Tonal, Type=Text, Size=Default, Disabled=Yesno code behind this Style=Outline, Type=Text, Size=Default, Disabled=Yesno code behind this Style=Tonal, Type=Text, Size=Large, Disabled=Yesno code behind this Style=Outline, Type=Text, Size=Large, Disabled=Yesno code behind this Style=Tonal, Type=Text, Size=Extra-Large, Disabled=Yesno code behind this Style=Outline, Type=Text, Size=Extra-Large, Disabled=Yesno code behind this Style=Tonal, Type=Icon, Size=Small, Disabled=Yesno code behind this Style=Outline, Type=Icon, Size=Small, Disabled=Yesno code behind this Style=Tonal, Type=Icon, Size=Default, Disabled=Yesno code behind this Style=Outline, Type=Icon, Size=Default, Disabled=Yesno code behind this Style=Tonal, Type=Icon, Size=Large, Disabled=Yesno code behind this Style=Outline, Type=Icon, Size=Large, Disabled=Yesno code behind this Style=Tonal, Type=Icon, Size=Extra-Large, Disabled=Yesno code behind this Style=Outline, Type=Icon, Size=Extra-Large, Disabled=Yesno code behind this