Toggle Button Elevated

Compare202 variants of Toggle Button Elevated, against Design reference

1. Design referenceMaterial 3 Design KitMatch
2. ideal/cell-type-round-size-large-state-disabled-selected-false-58653-14791not scoreddiff →
3. ideal/cell-type-round-size-large-state-disabled-selected-false-58653-14791/darknot scored
4. ideal/cell-type-round-size-large-state-disabled-selected-true-58653-15271not scoreddiff →
5. ideal/cell-type-round-size-large-state-disabled-selected-true-58653-15271/darknot scored
6. ideal/cell-type-round-size-large-state-focused-selected-false-58653-14551not scoreddiff →
7. ideal/cell-type-round-size-large-state-focused-selected-false-58653-14551/darknot scored
8. ideal/cell-type-round-size-large-state-focused-selected-true-58653-15031not scoreddiff →
9. ideal/cell-type-round-size-large-state-focused-selected-true-58653-15031/darknot scored
10. ideal/cell-type-round-size-large-state-hovered-selected-false-58653-14431not scoreddiff →
11. ideal/cell-type-round-size-large-state-hovered-selected-false-58653-14431/darknot scored
12. ideal/cell-type-round-size-large-state-hovered-selected-true-58653-14911not scoreddiff →
13. ideal/cell-type-round-size-large-state-hovered-selected-true-58653-14911/darknot scored
14. ideal/cell-type-round-size-large-state-pressed-selected-false-58653-14671not scoreddiff →
15. ideal/cell-type-round-size-large-state-pressed-selected-false-58653-14671/darknot scored
16. ideal/cell-type-round-size-large-state-pressed-selected-true-58653-15151not scoreddiff →
17. ideal/cell-type-round-size-large-state-pressed-selected-true-58653-15151/darknot scored
18. ideal/cell-type-round-size-medium-state-disabled-selected-false-58653-14793not scoreddiff →
19. ideal/cell-type-round-size-medium-state-disabled-selected-false-58653-14793/darknot scored
20. ideal/cell-type-round-size-medium-state-disabled-selected-true-58653-15273not scoreddiff →
21. ideal/cell-type-round-size-medium-state-disabled-selected-true-58653-15273/darknot scored
22. ideal/cell-type-round-size-medium-state-focused-selected-false-58653-14553not scoreddiff →
23. ideal/cell-type-round-size-medium-state-focused-selected-false-58653-14553/darknot scored
24. ideal/cell-type-round-size-medium-state-focused-selected-true-58653-15033not scoreddiff →
25. ideal/cell-type-round-size-medium-state-focused-selected-true-58653-15033/darknot scored
26. ideal/cell-type-round-size-medium-state-hovered-selected-false-58653-14433not scoreddiff →
27. ideal/cell-type-round-size-medium-state-hovered-selected-false-58653-14433/darknot scored
28. ideal/cell-type-round-size-medium-state-hovered-selected-true-58653-14913not scoreddiff →
29. ideal/cell-type-round-size-medium-state-hovered-selected-true-58653-14913/darknot scored
30. ideal/cell-type-round-size-medium-state-pressed-selected-false-58653-14673not scoreddiff →
31. ideal/cell-type-round-size-medium-state-pressed-selected-false-58653-14673/darknot scored
32. ideal/cell-type-round-size-medium-state-pressed-selected-true-58653-15153not scoreddiff →
33. ideal/cell-type-round-size-medium-state-pressed-selected-true-58653-15153/darknot scored
34. ideal/cell-type-round-size-small-state-disabled-selected-true-58653-15275not scoreddiff →
35. ideal/cell-type-round-size-small-state-disabled-selected-true-58653-15275/darknot scored
36. ideal/cell-type-round-size-small-state-focused-selected-true-58653-15035not scoreddiff →
37. ideal/cell-type-round-size-small-state-focused-selected-true-58653-15035/darknot scored
38. ideal/cell-type-round-size-small-state-hovered-selected-true-58653-14915not scoreddiff →
39. ideal/cell-type-round-size-small-state-hovered-selected-true-58653-14915/darknot scored
40. ideal/cell-type-round-size-small-state-pressed-selected-true-58653-15155not scoreddiff →
41. ideal/cell-type-round-size-small-state-pressed-selected-true-58653-15155/darknot scored
42. ideal/cell-type-round-size-xlarge-state-disabled-selected-false-58653-14789not scoreddiff →
43. ideal/cell-type-round-size-xlarge-state-disabled-selected-false-58653-14789/darknot scored
44. ideal/cell-type-round-size-xlarge-state-disabled-selected-true-58653-15269not scoreddiff →
45. ideal/cell-type-round-size-xlarge-state-disabled-selected-true-58653-15269/darknot scored
46. ideal/cell-type-round-size-xlarge-state-focused-selected-false-58653-14549not scoreddiff →
47. ideal/cell-type-round-size-xlarge-state-focused-selected-false-58653-14549/darknot scored
48. ideal/cell-type-round-size-xlarge-state-focused-selected-true-58653-15029not scoreddiff →
49. ideal/cell-type-round-size-xlarge-state-focused-selected-true-58653-15029/darknot scored
50. ideal/cell-type-round-size-xlarge-state-hovered-selected-false-58653-14429not scoreddiff →
51. ideal/cell-type-round-size-xlarge-state-hovered-selected-false-58653-14429/darknot scored
52. ideal/cell-type-round-size-xlarge-state-hovered-selected-true-58653-14909not scoreddiff →
53. ideal/cell-type-round-size-xlarge-state-hovered-selected-true-58653-14909/darknot scored
54. ideal/cell-type-round-size-xlarge-state-pressed-selected-false-58653-14669not scoreddiff →
55. ideal/cell-type-round-size-xlarge-state-pressed-selected-false-58653-14669/darknot scored
56. ideal/cell-type-round-size-xlarge-state-pressed-selected-true-58653-15149not scoreddiff →
57. ideal/cell-type-round-size-xlarge-state-pressed-selected-true-58653-15149/darknot scored
58. ideal/cell-type-round-size-xsmall-state-disabled-selected-false-58653-14797not scoreddiff →
59. ideal/cell-type-round-size-xsmall-state-disabled-selected-false-58653-14797/darknot scored
60. ideal/cell-type-round-size-xsmall-state-disabled-selected-true-58653-15277not scoreddiff →
61. ideal/cell-type-round-size-xsmall-state-disabled-selected-true-58653-15277/darknot scored
62. ideal/cell-type-round-size-xsmall-state-focused-selected-false-58653-14557not scoreddiff →
63. ideal/cell-type-round-size-xsmall-state-focused-selected-false-58653-14557/darknot scored
64. ideal/cell-type-round-size-xsmall-state-focused-selected-true-58653-15037not scoreddiff →
65. ideal/cell-type-round-size-xsmall-state-focused-selected-true-58653-15037/darknot scored
66. ideal/cell-type-round-size-xsmall-state-hovered-selected-false-58653-14437not scoreddiff →
67. ideal/cell-type-round-size-xsmall-state-hovered-selected-false-58653-14437/darknot scored
68. ideal/cell-type-round-size-xsmall-state-hovered-selected-true-58653-14917not scoreddiff →
69. ideal/cell-type-round-size-xsmall-state-hovered-selected-true-58653-14917/darknot scored
70. ideal/cell-type-round-size-xsmall-state-pressed-selected-false-58653-14677not scoreddiff →
71. ideal/cell-type-round-size-xsmall-state-pressed-selected-false-58653-14677/darknot scored
72. ideal/cell-type-round-size-xsmall-state-pressed-selected-true-58653-15157not scoreddiff →
73. ideal/cell-type-round-size-xsmall-state-pressed-selected-true-58653-15157/darknot scored
74. ideal/cell-type-square-size-large-state-disabled-selected-false-58653-14781not scoreddiff →
75. ideal/cell-type-square-size-large-state-disabled-selected-false-58653-14781/darknot scored
76. ideal/cell-type-square-size-large-state-disabled-selected-true-58653-15261not scoreddiff →
77. ideal/cell-type-square-size-large-state-disabled-selected-true-58653-15261/darknot scored
78. ideal/cell-type-square-size-large-state-focused-selected-false-58653-14541not scoreddiff →
79. ideal/cell-type-square-size-large-state-focused-selected-false-58653-14541/darknot scored
80. ideal/cell-type-square-size-large-state-focused-selected-true-58653-15021not scoreddiff →
81. ideal/cell-type-square-size-large-state-focused-selected-true-58653-15021/darknot scored
82. ideal/cell-type-square-size-large-state-hovered-selected-false-58653-14421not scoreddiff →
83. ideal/cell-type-square-size-large-state-hovered-selected-false-58653-14421/darknot scored
84. ideal/cell-type-square-size-large-state-hovered-selected-true-58653-14901not scoreddiff →
85. ideal/cell-type-square-size-large-state-hovered-selected-true-58653-14901/darknot scored
86. ideal/cell-type-square-size-large-state-pressed-selected-false-58653-14661not scoreddiff →
87. ideal/cell-type-square-size-large-state-pressed-selected-false-58653-14661/darknot scored
88. ideal/cell-type-square-size-large-state-pressed-selected-true-58653-15141not scoreddiff →
89. ideal/cell-type-square-size-large-state-pressed-selected-true-58653-15141/darknot scored
90. ideal/cell-type-square-size-medium-state-disabled-selected-false-58653-14783not scoreddiff →
91. ideal/cell-type-square-size-medium-state-disabled-selected-false-58653-14783/darknot scored
92. ideal/cell-type-square-size-medium-state-disabled-selected-true-58653-15263not scoreddiff →
93. ideal/cell-type-square-size-medium-state-disabled-selected-true-58653-15263/darknot scored
94. ideal/cell-type-square-size-medium-state-focused-selected-false-58653-14543not scoreddiff →
95. ideal/cell-type-square-size-medium-state-focused-selected-false-58653-14543/darknot scored
96. ideal/cell-type-square-size-medium-state-focused-selected-true-58653-15023not scoreddiff →
97. ideal/cell-type-square-size-medium-state-focused-selected-true-58653-15023/darknot scored
98. ideal/cell-type-square-size-medium-state-hovered-selected-false-58653-14423not scoreddiff →
99. ideal/cell-type-square-size-medium-state-hovered-selected-false-58653-14423/darknot scored
100. ideal/cell-type-square-size-medium-state-hovered-selected-true-58653-14903not scoreddiff →
101. ideal/cell-type-square-size-medium-state-hovered-selected-true-58653-14903/darknot scored
102. ideal/cell-type-square-size-medium-state-pressed-selected-false-58653-14663not scoreddiff →
103. ideal/cell-type-square-size-medium-state-pressed-selected-false-58653-14663/darknot scored
104. ideal/cell-type-square-size-medium-state-pressed-selected-true-58653-15143not scoreddiff →
105. ideal/cell-type-square-size-medium-state-pressed-selected-true-58653-15143/darknot scored
106. ideal/cell-type-square-size-small-state-disabled-selected-false-58653-14785not scoreddiff →
107. ideal/cell-type-square-size-small-state-disabled-selected-false-58653-14785/darknot scored
108. ideal/cell-type-square-size-small-state-disabled-selected-true-58653-15265not scoreddiff →
109. ideal/cell-type-square-size-small-state-disabled-selected-true-58653-15265/darknot scored
110. ideal/cell-type-square-size-small-state-focused-selected-false-58653-14545not scoreddiff →
111. ideal/cell-type-square-size-small-state-focused-selected-false-58653-14545/darknot scored
112. ideal/cell-type-square-size-small-state-focused-selected-true-58653-15025not scoreddiff →
113. ideal/cell-type-square-size-small-state-focused-selected-true-58653-15025/darknot scored
114. ideal/cell-type-square-size-small-state-hovered-selected-false-58653-14425not scoreddiff →
115. ideal/cell-type-square-size-small-state-hovered-selected-false-58653-14425/darknot scored
116. ideal/cell-type-square-size-small-state-hovered-selected-true-58653-14905not scoreddiff →
117. ideal/cell-type-square-size-small-state-hovered-selected-true-58653-14905/darknot scored
118. ideal/cell-type-square-size-small-state-pressed-selected-false-58653-14665not scoreddiff →
119. ideal/cell-type-square-size-small-state-pressed-selected-false-58653-14665/darknot scored
120. ideal/cell-type-square-size-small-state-pressed-selected-true-58653-15145not scoreddiff →
121. ideal/cell-type-square-size-small-state-pressed-selected-true-58653-15145/darknot scored
122. ideal/cell-type-square-size-xlarge-state-disabled-selected-false-58653-14779not scoreddiff →
123. ideal/cell-type-square-size-xlarge-state-disabled-selected-false-58653-14779/darknot scored
124. ideal/cell-type-square-size-xlarge-state-disabled-selected-true-58653-15259not scoreddiff →
125. ideal/cell-type-square-size-xlarge-state-disabled-selected-true-58653-15259/darknot scored
126. ideal/cell-type-square-size-xlarge-state-focused-selected-false-58653-14539not scoreddiff →
127. ideal/cell-type-square-size-xlarge-state-focused-selected-false-58653-14539/darknot scored
128. ideal/cell-type-square-size-xlarge-state-focused-selected-true-58653-15019not scoreddiff →
129. ideal/cell-type-square-size-xlarge-state-focused-selected-true-58653-15019/darknot scored
130. ideal/cell-type-square-size-xlarge-state-hovered-selected-false-58653-14419not scoreddiff →
131. ideal/cell-type-square-size-xlarge-state-hovered-selected-false-58653-14419/darknot scored
132. ideal/cell-type-square-size-xlarge-state-hovered-selected-true-58653-14899not scoreddiff →
133. ideal/cell-type-square-size-xlarge-state-hovered-selected-true-58653-14899/darknot scored
134. ideal/cell-type-square-size-xlarge-state-pressed-selected-false-58653-14659not scoreddiff →
135. ideal/cell-type-square-size-xlarge-state-pressed-selected-false-58653-14659/darknot scored
136. ideal/cell-type-square-size-xlarge-state-pressed-selected-true-58653-15139not scoreddiff →
137. ideal/cell-type-square-size-xlarge-state-pressed-selected-true-58653-15139/darknot scored
138. ideal/cell-type-square-size-xsmall-state-disabled-selected-false-58653-14787not scoreddiff →
139. ideal/cell-type-square-size-xsmall-state-disabled-selected-false-58653-14787/darknot scored
140. ideal/cell-type-square-size-xsmall-state-disabled-selected-true-58653-15267not scoreddiff →
141. ideal/cell-type-square-size-xsmall-state-disabled-selected-true-58653-15267/darknot scored
142. ideal/cell-type-square-size-xsmall-state-focused-selected-false-58653-14547not scoreddiff →
143. ideal/cell-type-square-size-xsmall-state-focused-selected-false-58653-14547/darknot scored
144. ideal/cell-type-square-size-xsmall-state-focused-selected-true-58653-15027not scoreddiff →
145. ideal/cell-type-square-size-xsmall-state-focused-selected-true-58653-15027/darknot scored
146. ideal/cell-type-square-size-xsmall-state-hovered-selected-false-58653-14427not scoreddiff →
147. ideal/cell-type-square-size-xsmall-state-hovered-selected-false-58653-14427/darknot scored
148. ideal/cell-type-square-size-xsmall-state-hovered-selected-true-58653-14907not scoreddiff →
149. ideal/cell-type-square-size-xsmall-state-hovered-selected-true-58653-14907/darknot scored
150. ideal/cell-type-square-size-xsmall-state-pressed-selected-false-58653-14667not scoreddiff →
151. ideal/cell-type-square-size-xsmall-state-pressed-selected-false-58653-14667/darknot scored
152. ideal/cell-type-square-size-xsmall-state-pressed-selected-true-58653-15147not scoreddiff →
153. ideal/cell-type-square-size-xsmall-state-pressed-selected-true-58653-15147/darknot scored
154. ideal/default/darknot scored
155. ideal/default/lightnot scoreddiff →
156. ideal/disablednot scoreddiff →
157. ideal/disabled/darknot scored
158. ideal/focus-ringnot scored
159. ideal/focus-ring/darknot scored
160. ideal/focusednot scoreddiff →
161. ideal/focused/darknot scored
162. ideal/hoverednot scoreddiff →
163. ideal/hovered/darknot scored
164. ideal/lnot scoreddiff →
165. ideal/l-onnot scoreddiff →
166. ideal/l-on/darknot scored
167. ideal/l-squarenot scoreddiff →
168. ideal/l-square-onnot scoreddiff →
169. ideal/l-square-on/darknot scored
170. ideal/l-square/darknot scored
171. ideal/l/darknot scored
172. ideal/mnot scoreddiff →
173. ideal/m-onnot scoreddiff →
174. ideal/m-on/darknot scored
175. ideal/m-squarenot scoreddiff →
176. ideal/m-square-onnot scoreddiff →
177. ideal/m-square-on/darknot scored
178. ideal/m-square/darknot scored
179. ideal/m/darknot scored
180. ideal/pressednot scoreddiff →
181. ideal/pressed/darknot scored
182. ideal/s-onnot scoreddiff →
183. ideal/s-on/darknot scored
184. ideal/s-squarenot scoreddiff →
185. ideal/s-square-onnot scoreddiff →
186. ideal/s-square-on/darknot scored
187. ideal/s-square/darknot scored
188. ideal/xlnot scoreddiff →
189. ideal/xl-onnot scoreddiff →
190. ideal/xl-on/darknot scored
191. ideal/xl-squarenot scoreddiff →
192. ideal/xl-square-onnot scoreddiff →
193. ideal/xl-square-on/darknot scored
194. ideal/xl-square/darknot scored
195. ideal/xl/darknot scored
196. ideal/xsnot scoreddiff →
197. ideal/xs-onnot scoreddiff →
198. ideal/xs-on/darknot scored
199. ideal/xs-squarenot scoreddiff →
200. ideal/xs-square-onnot scoreddiff →
201. ideal/xs-square-on/darknot scored
202. ideal/xs-square/darkon the stagenot scored
203. ideal/xs/darknot scored

every component →