@milestone-sys/web-design-system 3.6.2 → 3.6.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (1102) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +7 -7
  3. package/assets.html +13 -0
  4. package/colors.list.js +65 -65
  5. package/components/detail/accordion-checkbox-large.html +1051 -0
  6. package/components/detail/accordion-checkbox-medium-dark.html +1051 -0
  7. package/components/detail/accordion-checkbox-medium-disabled.html +1051 -0
  8. package/components/detail/accordion-checkbox-medium-filtered-list-items.html +1055 -0
  9. package/components/detail/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +1077 -0
  10. package/components/detail/accordion-checkbox-medium-icon-left-floating.html +1077 -0
  11. package/components/detail/accordion-checkbox-medium-icon-left.html +1065 -0
  12. package/components/detail/accordion-checkbox-medium.html +1060 -0
  13. package/components/detail/accordion-checkbox-overview.html +1051 -0
  14. package/components/detail/accordion-input.html +949 -0
  15. package/components/detail/accordion-label.html +949 -0
  16. package/components/detail/accordion-modifier-icon-floating.html +949 -0
  17. package/components/detail/accordion-modifier-icon-left.html +949 -0
  18. package/components/detail/accordion-radio.html +1053 -0
  19. package/components/detail/alert-dark-theme-default.html +1009 -0
  20. package/components/detail/alert-dark-theme-solution.html +1009 -0
  21. package/components/detail/alert-default-extra-attention.html +1007 -0
  22. package/components/detail/alert-default-generic.html +1006 -0
  23. package/components/detail/alert-default-solution-with-badge-and-ready-state.html +1018 -0
  24. package/components/detail/alert-default-solution.html +1010 -0
  25. package/components/detail/alert-default-without-image.html +1004 -0
  26. package/components/detail/alert-default.html +1006 -0
  27. package/components/detail/alert-hidden-after-refresh-checkbox.html +1016 -0
  28. package/components/detail/alert-hidden-after-refresh.html +1005 -0
  29. package/components/detail/alert-layouts.html +1560 -0
  30. package/components/detail/alert-visible-after-refresh.html +1005 -0
  31. package/components/detail/background-colors.html +1287 -0
  32. package/components/detail/basic-card-default-dark.html +1014 -0
  33. package/components/detail/basic-card-default-without-caption-with-header-icon.html +1005 -0
  34. package/components/detail/basic-card-default-without-caption-with-header-image.html +1001 -0
  35. package/components/detail/basic-card-default-without-caption.html +997 -0
  36. package/components/detail/basic-card-default.html +1014 -0
  37. package/components/detail/basic-card-grouping-center.html +1014 -0
  38. package/components/detail/basic-card-grouping-left-with-flat-icon.html +1024 -0
  39. package/components/detail/basic-card-grouping-left.html +1014 -0
  40. package/components/detail/basic-card-grouping.html +1122 -0
  41. package/components/detail/basic-card-layouts.html +1886 -0
  42. package/components/detail/button-danger-dark-icon.html +999 -0
  43. package/components/detail/button-danger-dark.html +975 -0
  44. package/components/detail/button-danger-default.html +975 -0
  45. package/components/detail/button-danger-icon.html +999 -0
  46. package/components/detail/button-disabled-dark-icon.html +999 -0
  47. package/components/detail/button-disabled-dark.html +975 -0
  48. package/components/detail/button-floating-aligned-column.html +1005 -0
  49. package/components/detail/button-floating-aligned-right.html +1005 -0
  50. package/components/detail/button-floating-dark-aligned-column.html +1005 -0
  51. package/components/detail/button-floating-dark-aligned-right.html +1005 -0
  52. package/components/detail/button-floating-dark-default.html +1005 -0
  53. package/components/detail/button-floating-dark-disabled.html +1005 -0
  54. package/components/detail/button-floating-dark-secondary-aligned-column.html +1005 -0
  55. package/components/detail/button-floating-dark-secondary-aligned-right.html +1005 -0
  56. package/components/detail/button-floating-dark-secondary.html +1005 -0
  57. package/components/detail/button-floating-default.html +1005 -0
  58. package/components/detail/button-floating-disabled.html +1005 -0
  59. package/components/detail/button-floating-overview.html +969 -0
  60. package/components/detail/button-floating-positioning.html +1007 -0
  61. package/components/detail/button-floating-secondary-aligned-column.html +1005 -0
  62. package/components/detail/button-floating-secondary-aligned-right.html +1005 -0
  63. package/components/detail/button-floating-secondary.html +1005 -0
  64. package/components/detail/button-floating-states.html +987 -0
  65. package/components/detail/button-gray-default.html +975 -0
  66. package/components/detail/button-gray-icon.html +999 -0
  67. package/components/detail/button-group-center-alignment.html +965 -0
  68. package/components/detail/button-group-left-alignment.html +965 -0
  69. package/components/detail/button-group-right-alignment.html +965 -0
  70. package/components/detail/button-overview-direction.html +983 -0
  71. package/components/detail/button-overview-global-definition.html +975 -0
  72. package/components/detail/button-overview-sizes.html +987 -0
  73. package/components/detail/button-overview-states.html +1019 -0
  74. package/components/detail/button-primary-dark-icon.html +999 -0
  75. package/components/detail/button-primary-dark.html +975 -0
  76. package/components/detail/button-primary-default.html +975 -0
  77. package/components/detail/button-primary-icon.html +999 -0
  78. package/components/detail/button-secondary-dark-icon.html +999 -0
  79. package/components/detail/button-secondary-dark.html +975 -0
  80. package/components/detail/button-secondary-default.html +975 -0
  81. package/components/detail/button-secondary-icon.html +999 -0
  82. package/components/detail/button-tertiary-default.html +975 -0
  83. package/components/detail/button-tertiary-icon.html +999 -0
  84. package/components/detail/buttons-overview.html +2069 -0
  85. package/components/detail/category-dark.html +1022 -0
  86. package/components/detail/category-disabled-dark.html +1014 -0
  87. package/components/detail/category-disabled.html +1014 -0
  88. package/components/detail/category-full-row.html +1178 -0
  89. package/components/detail/category-overview-dark-states.html +1058 -0
  90. package/components/detail/category-overview-dark.html +1022 -0
  91. package/components/detail/category-overview-sizes.html +1030 -0
  92. package/components/detail/category-overview-states.html +1058 -0
  93. package/components/detail/category-small-dark.html +1022 -0
  94. package/components/detail/category-small-disabled-dark.html +1014 -0
  95. package/components/detail/category-small-disabled.html +1014 -0
  96. package/components/detail/category-small-full-row.html +1250 -0
  97. package/components/detail/category-small.html +1022 -0
  98. package/components/detail/category.html +1022 -0
  99. package/components/detail/checkbox-checked.html +968 -0
  100. package/components/detail/checkbox-disabled.html +968 -0
  101. package/components/detail/checkbox-focus.html +968 -0
  102. package/components/detail/checkbox-global-definition.html +968 -0
  103. package/components/detail/checkbox-hover.html +968 -0
  104. package/components/detail/checkbox-inline.html +974 -0
  105. package/components/detail/checkbox-readonly.html +969 -0
  106. package/components/detail/colors-and-shadows.html +1403 -0
  107. package/components/detail/contact-cards.html +2151 -0
  108. package/components/detail/contact-content.html +1017 -0
  109. package/components/detail/contact-overview.html +1147 -0
  110. package/components/detail/contact-sizes.html +1108 -0
  111. package/components/detail/contact-small.html +1038 -0
  112. package/components/detail/contact-without-image-small.html +1028 -0
  113. package/components/detail/contact-without-image.html +1028 -0
  114. package/components/detail/contact.html +1038 -0
  115. package/components/detail/divider-dark-blue.html +949 -0
  116. package/components/detail/divider-default.html +949 -0
  117. package/components/detail/divider-gray-5.html +949 -0
  118. package/components/detail/divider-white-50.html +949 -0
  119. package/components/detail/divider-white.html +949 -0
  120. package/components/detail/divider-yellow.html +949 -0
  121. package/components/detail/generic-card-aspect-16by9.html +1001 -0
  122. package/components/detail/generic-card-aspect-2by1-small.html +1116 -0
  123. package/components/detail/generic-card-aspect-2by1.html +1110 -0
  124. package/components/detail/generic-card-aspect.html +1050 -0
  125. package/components/detail/generic-card-default-small-dark-theme.html +1000 -0
  126. package/components/detail/generic-card-default-small-svg.html +1000 -0
  127. package/components/detail/generic-card-default-small.html +999 -0
  128. package/components/detail/generic-card-default-svg-dark.html +999 -0
  129. package/components/detail/generic-card-default-svg.html +998 -0
  130. package/components/detail/generic-card-default.html +999 -0
  131. package/components/detail/generic-card-media-dark-theme.html +1031 -0
  132. package/components/detail/generic-card-media-floating-icon.html +1042 -0
  133. package/components/detail/generic-card-media-small.html +1027 -0
  134. package/components/detail/generic-card-media.html +1027 -0
  135. package/components/detail/generic-card-overview.html +1062 -0
  136. package/components/detail/generic-flat-icons.html +951 -0
  137. package/components/detail/generic-rich-icons.html +951 -0
  138. package/components/detail/global-colors-alternative.html +1301 -0
  139. package/components/detail/global-colors-gradients.html +1305 -0
  140. package/components/detail/global-colors-gray-white-black.html +1304 -0
  141. package/components/detail/global-colors-primary.html +1295 -0
  142. package/components/detail/global-colors-shadows.html +1295 -0
  143. package/components/detail/global-colors-transparency.html +1306 -0
  144. package/components/detail/global-margins.html +995 -0
  145. package/components/detail/global-paddings.html +951 -0
  146. package/components/detail/gradient-background-colors.html +1517 -0
  147. package/components/detail/input-disabled.html +1003 -0
  148. package/components/detail/input-field.html +1226 -0
  149. package/components/detail/input-focus.html +1003 -0
  150. package/components/detail/input-hover.html +1003 -0
  151. package/components/detail/input-readonly.html +1003 -0
  152. package/components/detail/input-sizes.html +1007 -0
  153. package/components/detail/input-state-error.html +1003 -0
  154. package/components/detail/input-state-success.html +1003 -0
  155. package/components/detail/input.html +981 -0
  156. package/components/detail/large-section-spacing-definitions.html +1011 -0
  157. package/components/detail/large-section-spacing.html +977 -0
  158. package/components/detail/links.html +977 -0
  159. package/components/detail/lists.html +973 -0
  160. package/components/detail/marketplace-flat-icons.html +951 -0
  161. package/components/detail/marketplace-rich-icons.html +951 -0
  162. package/components/detail/matching-content-height-card.html +1599 -0
  163. package/components/detail/medium-section-spacing-definitions.html +1011 -0
  164. package/components/detail/medium-section-spacing.html +977 -0
  165. package/components/detail/modal-on-click.html +1017 -0
  166. package/components/detail/modal-on-load-demo.html +1012 -0
  167. package/components/detail/modal-on-load.html +1012 -0
  168. package/components/detail/msds-text-alt-blue-1.html +1287 -0
  169. package/components/detail/msds-text-alt-blue-2.html +1287 -0
  170. package/components/detail/msds-text-alt-blue-3.html +1287 -0
  171. package/components/detail/msds-text-alt-yellow-1.html +1287 -0
  172. package/components/detail/msds-text-alt-yellow-2.html +1287 -0
  173. package/components/detail/msds-text-black.html +1287 -0
  174. package/components/detail/msds-text-clear-blue.html +1287 -0
  175. package/components/detail/msds-text-confirm-green.html +1287 -0
  176. package/components/detail/msds-text-danger-red-1.html +1287 -0
  177. package/components/detail/msds-text-danger-red-2.html +1287 -0
  178. package/components/detail/msds-text-dark-blue.html +1287 -0
  179. package/components/detail/msds-text-gray-1.html +1287 -0
  180. package/components/detail/msds-text-gray-10.html +1287 -0
  181. package/components/detail/msds-text-gray-2.html +1287 -0
  182. package/components/detail/msds-text-gray-3.html +1287 -0
  183. package/components/detail/msds-text-gray-4.html +1287 -0
  184. package/components/detail/msds-text-gray-5.html +1287 -0
  185. package/components/detail/msds-text-gray-6.html +1287 -0
  186. package/components/detail/msds-text-gray-7.html +1287 -0
  187. package/components/detail/msds-text-gray-8.html +1287 -0
  188. package/components/detail/msds-text-gray-9.html +1287 -0
  189. package/components/detail/msds-text-sand.html +1287 -0
  190. package/components/detail/msds-text-white.html +1287 -0
  191. package/components/detail/msds-text-yellow.html +1287 -0
  192. package/components/detail/popover-bottom.html +1018 -0
  193. package/components/detail/popover-global-definition.html +1018 -0
  194. package/components/detail/popover-left.html +1018 -0
  195. package/components/detail/popover-top.html +1018 -0
  196. package/components/detail/preview-dark.html +1014 -0
  197. package/components/detail/preview.html +1001 -0
  198. package/components/detail/progress-bar-dark-theme.html +997 -0
  199. package/components/detail/progress-bar-features.html +1023 -0
  200. package/components/detail/progress-bar-global-definition.html +973 -0
  201. package/components/detail/progress-bar-light-theme.html +997 -0
  202. package/components/detail/progress-bar-sizes.html +999 -0
  203. package/components/detail/radio-button-disabled.html +963 -0
  204. package/components/detail/radio-button-focus.html +963 -0
  205. package/components/detail/radio-button-global-definition.html +975 -0
  206. package/components/detail/radio-button-hover.html +963 -0
  207. package/components/detail/radio-button-readonly.html +964 -0
  208. package/components/detail/radio-button-selected.html +963 -0
  209. package/components/detail/section-checkbox-dark.html +1019 -0
  210. package/components/detail/section-checkbox-nested-accordion.html +1124 -0
  211. package/components/detail/section-checkbox.html +1083 -0
  212. package/components/detail/section-radio-dark.html +1083 -0
  213. package/components/detail/section-radio-nested-accordion.html +1135 -0
  214. package/components/detail/section-radio.html +1081 -0
  215. package/components/detail/select-input-default.html +973 -0
  216. package/components/detail/select-input-error.html +971 -0
  217. package/components/detail/select-input-global-definition.html +983 -0
  218. package/components/detail/select-input-not-required.html +973 -0
  219. package/components/detail/select-input-required.html +973 -0
  220. package/components/detail/select-input-small.html +969 -0
  221. package/components/detail/small-section-spacing-definitions.html +1017 -0
  222. package/components/detail/small-section-spacing.html +977 -0
  223. package/components/detail/solid-background-colors.html +1457 -0
  224. package/components/detail/solution-card-default-layout.html +1210 -0
  225. package/components/detail/solution-card-default.html +1040 -0
  226. package/components/detail/solution-card-layouts.html +2085 -0
  227. package/components/detail/solution-card-optional-certification-badges.html +1054 -0
  228. package/components/detail/solution-card-optional-solution-badges.html +1054 -0
  229. package/components/detail/solution-card-sizes.html +1125 -0
  230. package/components/detail/solution-card-small.html +1040 -0
  231. package/components/detail/switch-checked.html +973 -0
  232. package/components/detail/switch-default.html +973 -0
  233. package/components/detail/switch-disabled-readonly.html +973 -0
  234. package/components/detail/switch-disabled.html +973 -0
  235. package/components/detail/switch-global.html +983 -0
  236. package/components/detail/tab-tile.html +2409 -0
  237. package/components/detail/table-dark-theme-default-expandable-rows.html +1204 -0
  238. package/components/detail/table-dark-theme-default.html +1228 -0
  239. package/components/detail/table-default-dark.html +1179 -0
  240. package/components/detail/table-default-expandable-rows.html +1203 -0
  241. package/components/detail/table-default-medium.html +1179 -0
  242. package/components/detail/table-default-small.html +1179 -0
  243. package/components/detail/table-default.html +1227 -0
  244. package/components/detail/text-area-disabled.html +1011 -0
  245. package/components/detail/text-area-error.html +1011 -0
  246. package/components/detail/text-area-field.html +985 -0
  247. package/components/detail/text-area-focus.html +1011 -0
  248. package/components/detail/text-area-hover.html +1011 -0
  249. package/components/detail/text-area-readonly.html +1011 -0
  250. package/components/detail/text-area-sizes.html +1011 -0
  251. package/components/detail/text-area-success.html +1011 -0
  252. package/components/detail/text-area.html +1167 -0
  253. package/components/detail/text-colors.html +1287 -0
  254. package/components/detail/text.html +1037 -0
  255. package/components/detail/typography-body-texts.html +993 -0
  256. package/components/detail/typography-displays.html +959 -0
  257. package/components/detail/typography-headers.html +965 -0
  258. package/components/detail/typography-leads.html +951 -0
  259. package/components/detail/typography-links-dark-theme.html +1159 -0
  260. package/components/detail/typography-links-light-theme.html +1123 -0
  261. package/components/detail/typography-links-secondary.html +1011 -0
  262. package/components/detail/typography-unordered-lists.html +973 -0
  263. package/components/preview/accordion-checkbox-large.html +81 -0
  264. package/components/preview/accordion-checkbox-medium-dark.html +81 -0
  265. package/components/preview/accordion-checkbox-medium-disabled.html +82 -0
  266. package/components/preview/accordion-checkbox-medium-filtered-list-items.html +84 -0
  267. package/components/preview/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +95 -0
  268. package/components/preview/accordion-checkbox-medium-icon-left-floating.html +95 -0
  269. package/components/preview/accordion-checkbox-medium-icon-left.html +90 -0
  270. package/components/preview/accordion-checkbox-medium.html +81 -0
  271. package/components/preview/accordion-checkbox-overview.html +83 -0
  272. package/components/preview/accordion-input.html +30 -0
  273. package/components/preview/accordion-label.html +30 -0
  274. package/components/preview/accordion-modifier-icon-floating.html +30 -0
  275. package/components/preview/accordion-modifier-icon-left.html +31 -0
  276. package/components/preview/accordion-radio.html +83 -0
  277. package/components/preview/alert-dark-theme-default.html +59 -0
  278. package/components/preview/alert-dark-theme-solution.html +59 -0
  279. package/components/preview/alert-default-extra-attention.html +58 -0
  280. package/components/preview/alert-default-generic.html +58 -0
  281. package/components/preview/alert-default-solution-with-badge-and-ready-state.html +64 -0
  282. package/components/preview/alert-default-solution.html +60 -0
  283. package/components/preview/alert-default-without-image.html +57 -0
  284. package/components/preview/alert-default.html +58 -0
  285. package/components/preview/alert-hidden-after-refresh-checkbox.html +63 -0
  286. package/components/preview/alert-hidden-after-refresh.html +57 -0
  287. package/components/preview/alert-layouts.html +341 -0
  288. package/components/preview/alert-visible-after-refresh.html +57 -0
  289. package/components/preview/background-colors.html +50 -0
  290. package/components/preview/basic-card-default-dark.html +55 -0
  291. package/components/preview/basic-card-default-without-caption-with-header-icon.html +50 -0
  292. package/components/preview/basic-card-default-without-caption-with-header-image.html +48 -0
  293. package/components/preview/basic-card-default-without-caption.html +46 -0
  294. package/components/preview/basic-card-default.html +55 -0
  295. package/components/preview/basic-card-grouping-center.html +55 -0
  296. package/components/preview/basic-card-grouping-left-with-flat-icon.html +60 -0
  297. package/components/preview/basic-card-grouping-left.html +55 -0
  298. package/components/preview/basic-card-grouping.html +110 -0
  299. package/components/preview/basic-card-layouts.html +494 -0
  300. package/components/preview/button-danger-dark-icon.html +51 -0
  301. package/components/preview/button-danger-dark.html +44 -0
  302. package/components/preview/button-danger-default.html +42 -0
  303. package/components/preview/button-danger-icon.html +51 -0
  304. package/components/preview/button-disabled-dark-icon.html +51 -0
  305. package/components/preview/button-disabled-dark.html +44 -0
  306. package/components/preview/button-floating-aligned-column.html +57 -0
  307. package/components/preview/button-floating-aligned-right.html +57 -0
  308. package/components/preview/button-floating-dark-aligned-column.html +57 -0
  309. package/components/preview/button-floating-dark-aligned-right.html +57 -0
  310. package/components/preview/button-floating-dark-default.html +57 -0
  311. package/components/preview/button-floating-dark-disabled.html +57 -0
  312. package/components/preview/button-floating-dark-secondary-aligned-column.html +57 -0
  313. package/components/preview/button-floating-dark-secondary-aligned-right.html +57 -0
  314. package/components/preview/button-floating-dark-secondary.html +57 -0
  315. package/components/preview/button-floating-default.html +57 -0
  316. package/components/preview/button-floating-disabled.html +57 -0
  317. package/components/preview/button-floating-overview.html +39 -0
  318. package/components/preview/button-floating-positioning.html +58 -0
  319. package/components/preview/button-floating-secondary-aligned-column.html +57 -0
  320. package/components/preview/button-floating-secondary-aligned-right.html +57 -0
  321. package/components/preview/button-floating-secondary.html +57 -0
  322. package/components/preview/button-floating-states.html +48 -0
  323. package/components/preview/button-gray-default.html +43 -0
  324. package/components/preview/button-gray-icon.html +51 -0
  325. package/components/preview/button-group-center-alignment.html +37 -0
  326. package/components/preview/button-group-left-alignment.html +37 -0
  327. package/components/preview/button-group-right-alignment.html +37 -0
  328. package/components/preview/button-overview-direction.html +45 -0
  329. package/components/preview/button-overview-global-definition.html +41 -0
  330. package/components/preview/button-overview-sizes.html +48 -0
  331. package/components/preview/button-overview-states.html +59 -0
  332. package/components/preview/button-primary-dark-icon.html +51 -0
  333. package/components/preview/button-primary-dark.html +44 -0
  334. package/components/preview/button-primary-default.html +42 -0
  335. package/components/preview/button-primary-icon.html +52 -0
  336. package/components/preview/button-secondary-dark-icon.html +51 -0
  337. package/components/preview/button-secondary-dark.html +44 -0
  338. package/components/preview/button-secondary-default.html +44 -0
  339. package/components/preview/button-secondary-icon.html +51 -0
  340. package/components/preview/button-tertiary-default.html +42 -0
  341. package/components/preview/button-tertiary-icon.html +51 -0
  342. package/components/preview/buttons-overview.html +510 -0
  343. package/components/preview/category-dark.html +67 -0
  344. package/components/preview/category-disabled-dark.html +63 -0
  345. package/components/preview/category-disabled.html +59 -0
  346. package/components/preview/category-full-row.html +139 -0
  347. package/components/preview/category-overview-dark-states.html +85 -0
  348. package/components/preview/category-overview-dark.html +67 -0
  349. package/components/preview/category-overview-sizes.html +67 -0
  350. package/components/preview/category-overview-states.html +81 -0
  351. package/components/preview/category-small-dark.html +67 -0
  352. package/components/preview/category-small-disabled-dark.html +63 -0
  353. package/components/preview/category-small-disabled.html +59 -0
  354. package/components/preview/category-small-full-row.html +175 -0
  355. package/components/preview/category-small.html +63 -0
  356. package/components/preview/category.html +63 -0
  357. package/components/preview/checkbox-checked.html +38 -0
  358. package/components/preview/checkbox-disabled.html +38 -0
  359. package/components/preview/checkbox-focus.html +38 -0
  360. package/components/preview/checkbox-global-definition.html +38 -0
  361. package/components/preview/checkbox-hover.html +38 -0
  362. package/components/preview/checkbox-inline.html +41 -0
  363. package/components/preview/checkbox-readonly.html +39 -0
  364. package/components/preview/colors-and-shadows.html +126 -0
  365. package/components/preview/contact-cards.html +622 -0
  366. package/components/preview/contact-content.html +56 -0
  367. package/components/preview/contact-overview.html +121 -0
  368. package/components/preview/contact-sizes.html +102 -0
  369. package/components/preview/contact-small.html +67 -0
  370. package/components/preview/contact-without-image-small.html +62 -0
  371. package/components/preview/contact-without-image.html +62 -0
  372. package/components/preview/contact.html +67 -0
  373. package/components/preview/divider-dark-blue.html +29 -0
  374. package/components/preview/divider-default.html +30 -0
  375. package/components/preview/divider-gray-5.html +29 -0
  376. package/components/preview/divider-white-50.html +29 -0
  377. package/components/preview/divider-white.html +29 -0
  378. package/components/preview/divider-yellow.html +30 -0
  379. package/components/preview/generic-card-aspect-16by9.html +49 -0
  380. package/components/preview/generic-card-aspect-2by1-small.html +110 -0
  381. package/components/preview/generic-card-aspect-2by1.html +106 -0
  382. package/components/preview/generic-card-aspect.html +74 -0
  383. package/components/preview/generic-card-default-small-dark-theme.html +48 -0
  384. package/components/preview/generic-card-default-small-svg.html +48 -0
  385. package/components/preview/generic-card-default-small.html +49 -0
  386. package/components/preview/generic-card-default-svg-dark.html +48 -0
  387. package/components/preview/generic-card-default-svg.html +47 -0
  388. package/components/preview/generic-card-default.html +50 -0
  389. package/components/preview/generic-card-media-dark-theme.html +64 -0
  390. package/components/preview/generic-card-media-floating-icon.html +70 -0
  391. package/components/preview/generic-card-media-small.html +62 -0
  392. package/components/preview/generic-card-media.html +62 -0
  393. package/components/preview/generic-card-overview.html +80 -0
  394. package/components/preview/generic-flat-icons.html +54 -0
  395. package/components/preview/generic-rich-icons.html +54 -0
  396. package/components/preview/global-colors-alternative.html +59 -0
  397. package/components/preview/global-colors-gradients.html +63 -0
  398. package/components/preview/global-colors-gray-white-black.html +62 -0
  399. package/components/preview/global-colors-primary.html +53 -0
  400. package/components/preview/global-colors-shadows.html +54 -0
  401. package/components/preview/global-colors-transparency.html +64 -0
  402. package/components/preview/global-margins.html +51 -0
  403. package/components/preview/global-paddings.html +30 -0
  404. package/components/preview/gradient-background-colors.html +164 -0
  405. package/components/preview/input-disabled.html +56 -0
  406. package/components/preview/input-field.html +164 -0
  407. package/components/preview/input-focus.html +56 -0
  408. package/components/preview/input-hover.html +56 -0
  409. package/components/preview/input-readonly.html +56 -0
  410. package/components/preview/input-sizes.html +58 -0
  411. package/components/preview/input-state-error.html +56 -0
  412. package/components/preview/input-state-success.html +56 -0
  413. package/components/preview/input.html +45 -0
  414. package/components/preview/large-section-spacing-definitions.html +59 -0
  415. package/components/preview/large-section-spacing.html +42 -0
  416. package/components/preview/links.html +44 -0
  417. package/components/preview/lists.html +42 -0
  418. package/components/preview/marketplace-flat-icons.html +54 -0
  419. package/components/preview/marketplace-rich-icons.html +54 -0
  420. package/components/preview/matching-content-height-card.html +354 -0
  421. package/components/preview/medium-section-spacing-definitions.html +59 -0
  422. package/components/preview/medium-section-spacing.html +42 -0
  423. package/components/preview/modal-on-click.html +63 -0
  424. package/components/preview/modal-on-load-demo.html +61 -0
  425. package/components/preview/modal-on-load.html +61 -0
  426. package/components/preview/msds-text-alt-blue-1.html +49 -0
  427. package/components/preview/msds-text-alt-blue-2.html +49 -0
  428. package/components/preview/msds-text-alt-blue-3.html +49 -0
  429. package/components/preview/msds-text-alt-yellow-1.html +49 -0
  430. package/components/preview/msds-text-alt-yellow-2.html +49 -0
  431. package/components/preview/msds-text-black.html +49 -0
  432. package/components/preview/msds-text-clear-blue.html +49 -0
  433. package/components/preview/msds-text-confirm-green.html +49 -0
  434. package/components/preview/msds-text-danger-red-1.html +49 -0
  435. package/components/preview/msds-text-danger-red-2.html +49 -0
  436. package/components/preview/msds-text-dark-blue.html +49 -0
  437. package/components/preview/msds-text-gray-1.html +49 -0
  438. package/components/preview/msds-text-gray-10.html +49 -0
  439. package/components/preview/msds-text-gray-2.html +49 -0
  440. package/components/preview/msds-text-gray-3.html +49 -0
  441. package/components/preview/msds-text-gray-4.html +49 -0
  442. package/components/preview/msds-text-gray-5.html +49 -0
  443. package/components/preview/msds-text-gray-6.html +49 -0
  444. package/components/preview/msds-text-gray-7.html +49 -0
  445. package/components/preview/msds-text-gray-8.html +49 -0
  446. package/components/preview/msds-text-gray-9.html +49 -0
  447. package/components/preview/msds-text-sand.html +49 -0
  448. package/components/preview/msds-text-white.html +49 -0
  449. package/components/preview/msds-text-yellow.html +49 -0
  450. package/components/preview/popover-bottom.html +61 -0
  451. package/components/preview/popover-global-definition.html +61 -0
  452. package/components/preview/popover-left.html +61 -0
  453. package/components/preview/popover-top.html +61 -0
  454. package/components/preview/preview-dark.html +59 -0
  455. package/components/preview/preview.html +29 -0
  456. package/components/preview/progress-bar-dark-theme.html +57 -0
  457. package/components/preview/progress-bar-features.html +66 -0
  458. package/components/preview/progress-bar-global-definition.html +41 -0
  459. package/components/preview/progress-bar-light-theme.html +53 -0
  460. package/components/preview/progress-bar-sizes.html +55 -0
  461. package/components/preview/radio-button-disabled.html +36 -0
  462. package/components/preview/radio-button-focus.html +36 -0
  463. package/components/preview/radio-button-global-definition.html +42 -0
  464. package/components/preview/radio-button-hover.html +36 -0
  465. package/components/preview/radio-button-readonly.html +37 -0
  466. package/components/preview/radio-button-selected.html +36 -0
  467. package/components/preview/section-checkbox-dark.html +64 -0
  468. package/components/preview/section-checkbox-nested-accordion.html +119 -0
  469. package/components/preview/section-checkbox.html +96 -0
  470. package/components/preview/section-radio-dark.html +96 -0
  471. package/components/preview/section-radio-nested-accordion.html +144 -0
  472. package/components/preview/section-radio.html +95 -0
  473. package/components/preview/select-input-default.html +41 -0
  474. package/components/preview/select-input-error.html +40 -0
  475. package/components/preview/select-input-global-definition.html +46 -0
  476. package/components/preview/select-input-not-required.html +41 -0
  477. package/components/preview/select-input-required.html +41 -0
  478. package/components/preview/select-input-small.html +38 -0
  479. package/components/preview/small-section-spacing-definitions.html +62 -0
  480. package/components/preview/small-section-spacing.html +42 -0
  481. package/components/preview/solid-background-colors.html +135 -0
  482. package/components/preview/solution-card-default-layout.html +158 -0
  483. package/components/preview/solution-card-default.html +74 -0
  484. package/components/preview/solution-card-layouts.html +587 -0
  485. package/components/preview/solution-card-optional-certification-badges.html +82 -0
  486. package/components/preview/solution-card-optional-solution-badges.html +82 -0
  487. package/components/preview/solution-card-sizes.html +116 -0
  488. package/components/preview/solution-card-small.html +74 -0
  489. package/components/preview/switch-checked.html +41 -0
  490. package/components/preview/switch-default.html +41 -0
  491. package/components/preview/switch-disabled-readonly.html +41 -0
  492. package/components/preview/switch-disabled.html +41 -0
  493. package/components/preview/switch-global.html +46 -0
  494. package/components/preview/tab-tile.html +1128 -0
  495. package/components/preview/table-dark-theme-default-expandable-rows.html +160 -0
  496. package/components/preview/table-dark-theme-default.html +172 -0
  497. package/components/preview/table-default-dark.html +144 -0
  498. package/components/preview/table-default-expandable-rows.html +156 -0
  499. package/components/preview/table-default-medium.html +144 -0
  500. package/components/preview/table-default-small.html +144 -0
  501. package/components/preview/table-default.html +168 -0
  502. package/components/preview/text-area-disabled.html +60 -0
  503. package/components/preview/text-area-error.html +60 -0
  504. package/components/preview/text-area-field.html +47 -0
  505. package/components/preview/text-area-focus.html +60 -0
  506. package/components/preview/text-area-hover.html +60 -0
  507. package/components/preview/text-area-readonly.html +60 -0
  508. package/components/preview/text-area-sizes.html +60 -0
  509. package/components/preview/text-area-success.html +60 -0
  510. package/components/preview/text-area.html +147 -0
  511. package/components/preview/text-colors.html +49 -0
  512. package/components/preview/text.html +74 -0
  513. package/components/preview/typography-body-texts.html +52 -0
  514. package/components/preview/typography-displays.html +34 -0
  515. package/components/preview/typography-headers.html +37 -0
  516. package/components/preview/typography-leads.html +30 -0
  517. package/components/preview/typography-links-dark-theme.html +135 -0
  518. package/components/preview/typography-links-light-theme.html +117 -0
  519. package/components/preview/typography-links-secondary.html +61 -0
  520. package/components/preview/typography-unordered-lists.html +41 -0
  521. package/components/raw/tab-tile/tab-tile.js +139 -0
  522. package/components/raw/tab-tile/tab-tile.scss +256 -0
  523. package/components/render/accordion-checkbox-large.html +55 -0
  524. package/components/render/accordion-checkbox-medium-dark.html +55 -0
  525. package/components/render/accordion-checkbox-medium-disabled.html +56 -0
  526. package/components/render/accordion-checkbox-medium-filtered-list-items.html +58 -0
  527. package/components/render/accordion-checkbox-medium-icon-left-floating-dark-yellow.html +69 -0
  528. package/components/render/accordion-checkbox-medium-icon-left-floating.html +69 -0
  529. package/components/render/accordion-checkbox-medium-icon-left.html +64 -0
  530. package/components/render/accordion-checkbox-medium.html +55 -0
  531. package/components/render/accordion-checkbox-overview.html +57 -0
  532. package/components/render/accordion-input.html +4 -0
  533. package/components/render/accordion-label.html +4 -0
  534. package/components/render/accordion-modifier-icon-floating.html +4 -0
  535. package/components/render/accordion-modifier-icon-left.html +5 -0
  536. package/components/render/accordion-radio.html +57 -0
  537. package/components/render/alert-dark-theme-default.html +33 -0
  538. package/components/render/alert-dark-theme-solution.html +33 -0
  539. package/components/render/alert-default-extra-attention.html +32 -0
  540. package/components/render/alert-default-generic.html +32 -0
  541. package/components/render/alert-default-solution-with-badge-and-ready-state.html +38 -0
  542. package/components/render/alert-default-solution.html +34 -0
  543. package/components/render/alert-default-without-image.html +31 -0
  544. package/components/render/alert-default.html +32 -0
  545. package/components/render/alert-hidden-after-refresh-checkbox.html +37 -0
  546. package/components/render/alert-hidden-after-refresh.html +31 -0
  547. package/components/render/alert-layouts.html +315 -0
  548. package/components/render/alert-visible-after-refresh.html +31 -0
  549. package/components/render/background-colors.html +4 -0
  550. package/components/render/basic-card-default-dark.html +29 -0
  551. package/components/render/basic-card-default-without-caption-with-header-icon.html +24 -0
  552. package/components/render/basic-card-default-without-caption-with-header-image.html +22 -0
  553. package/components/render/basic-card-default-without-caption.html +20 -0
  554. package/components/render/basic-card-default.html +29 -0
  555. package/components/render/basic-card-grouping-center.html +29 -0
  556. package/components/render/basic-card-grouping-left-with-flat-icon.html +34 -0
  557. package/components/render/basic-card-grouping-left.html +29 -0
  558. package/components/render/basic-card-grouping.html +84 -0
  559. package/components/render/basic-card-layouts.html +468 -0
  560. package/components/render/button-danger-dark-icon.html +25 -0
  561. package/components/render/button-danger-dark.html +18 -0
  562. package/components/render/button-danger-default.html +16 -0
  563. package/components/render/button-danger-icon.html +25 -0
  564. package/components/render/button-disabled-dark-icon.html +25 -0
  565. package/components/render/button-disabled-dark.html +18 -0
  566. package/components/render/button-floating-aligned-column.html +31 -0
  567. package/components/render/button-floating-aligned-right.html +31 -0
  568. package/components/render/button-floating-dark-aligned-column.html +31 -0
  569. package/components/render/button-floating-dark-aligned-right.html +31 -0
  570. package/components/render/button-floating-dark-default.html +31 -0
  571. package/components/render/button-floating-dark-disabled.html +31 -0
  572. package/components/render/button-floating-dark-secondary-aligned-column.html +31 -0
  573. package/components/render/button-floating-dark-secondary-aligned-right.html +31 -0
  574. package/components/render/button-floating-dark-secondary.html +31 -0
  575. package/components/render/button-floating-default.html +31 -0
  576. package/components/render/button-floating-disabled.html +31 -0
  577. package/components/render/button-floating-overview.html +13 -0
  578. package/components/render/button-floating-positioning.html +32 -0
  579. package/components/render/button-floating-secondary-aligned-column.html +31 -0
  580. package/components/render/button-floating-secondary-aligned-right.html +31 -0
  581. package/components/render/button-floating-secondary.html +31 -0
  582. package/components/render/button-floating-states.html +22 -0
  583. package/components/render/button-gray-default.html +17 -0
  584. package/components/render/button-gray-icon.html +25 -0
  585. package/components/render/button-group-center-alignment.html +11 -0
  586. package/components/render/button-group-left-alignment.html +11 -0
  587. package/components/render/button-group-right-alignment.html +11 -0
  588. package/components/render/button-overview-direction.html +19 -0
  589. package/components/render/button-overview-global-definition.html +15 -0
  590. package/components/render/button-overview-sizes.html +22 -0
  591. package/components/render/button-overview-states.html +33 -0
  592. package/components/render/button-primary-dark-icon.html +25 -0
  593. package/components/render/button-primary-dark.html +18 -0
  594. package/components/render/button-primary-default.html +16 -0
  595. package/components/render/button-primary-icon.html +26 -0
  596. package/components/render/button-secondary-dark-icon.html +25 -0
  597. package/components/render/button-secondary-dark.html +18 -0
  598. package/components/render/button-secondary-default.html +18 -0
  599. package/components/render/button-secondary-icon.html +25 -0
  600. package/components/render/button-tertiary-default.html +16 -0
  601. package/components/render/button-tertiary-icon.html +25 -0
  602. package/components/render/buttons-overview.html +484 -0
  603. package/components/render/category-dark.html +37 -0
  604. package/components/render/category-disabled-dark.html +33 -0
  605. package/components/render/category-disabled.html +33 -0
  606. package/components/render/category-full-row.html +113 -0
  607. package/components/render/category-overview-dark-states.html +55 -0
  608. package/components/render/category-overview-dark.html +37 -0
  609. package/components/render/category-overview-sizes.html +41 -0
  610. package/components/render/category-overview-states.html +55 -0
  611. package/components/render/category-small-dark.html +37 -0
  612. package/components/render/category-small-disabled-dark.html +33 -0
  613. package/components/render/category-small-disabled.html +33 -0
  614. package/components/render/category-small-full-row.html +149 -0
  615. package/components/render/category-small.html +37 -0
  616. package/components/render/category.html +37 -0
  617. package/components/render/checkbox-checked.html +12 -0
  618. package/components/render/checkbox-disabled.html +12 -0
  619. package/components/render/checkbox-focus.html +12 -0
  620. package/components/render/checkbox-global-definition.html +12 -0
  621. package/components/render/checkbox-hover.html +12 -0
  622. package/components/render/checkbox-inline.html +15 -0
  623. package/components/render/checkbox-readonly.html +13 -0
  624. package/components/render/colors-and-shadows.html +80 -0
  625. package/components/render/contact-cards.html +596 -0
  626. package/components/render/contact-content.html +30 -0
  627. package/components/render/contact-overview.html +95 -0
  628. package/components/render/contact-sizes.html +76 -0
  629. package/components/render/contact-small.html +41 -0
  630. package/components/render/contact-without-image-small.html +36 -0
  631. package/components/render/contact-without-image.html +36 -0
  632. package/components/render/contact.html +41 -0
  633. package/components/render/divider-dark-blue.html +3 -0
  634. package/components/render/divider-default.html +4 -0
  635. package/components/render/divider-gray-5.html +3 -0
  636. package/components/render/divider-white-50.html +3 -0
  637. package/components/render/divider-white.html +3 -0
  638. package/components/render/divider-yellow.html +4 -0
  639. package/components/render/generic-card-aspect-16by9.html +23 -0
  640. package/components/render/generic-card-aspect-2by1-small.html +84 -0
  641. package/components/render/generic-card-aspect-2by1.html +80 -0
  642. package/components/render/generic-card-aspect.html +48 -0
  643. package/components/render/generic-card-default-small-dark-theme.html +22 -0
  644. package/components/render/generic-card-default-small-svg.html +22 -0
  645. package/components/render/generic-card-default-small.html +23 -0
  646. package/components/render/generic-card-default-svg-dark.html +22 -0
  647. package/components/render/generic-card-default-svg.html +21 -0
  648. package/components/render/generic-card-default.html +24 -0
  649. package/components/render/generic-card-media-dark-theme.html +38 -0
  650. package/components/render/generic-card-media-floating-icon.html +44 -0
  651. package/components/render/generic-card-media-small.html +36 -0
  652. package/components/render/generic-card-media.html +36 -0
  653. package/components/render/generic-card-overview.html +54 -0
  654. package/components/render/generic-flat-icons.html +3 -0
  655. package/components/render/generic-rich-icons.html +3 -0
  656. package/components/render/global-colors-alternative.html +13 -0
  657. package/components/render/global-colors-gradients.html +17 -0
  658. package/components/render/global-colors-gray-white-black.html +16 -0
  659. package/components/render/global-colors-primary.html +7 -0
  660. package/components/render/global-colors-shadows.html +8 -0
  661. package/components/render/global-colors-transparency.html +18 -0
  662. package/components/render/global-margins.html +25 -0
  663. package/components/render/global-paddings.html +4 -0
  664. package/components/render/gradient-background-colors.html +118 -0
  665. package/components/render/input-disabled.html +30 -0
  666. package/components/render/input-field.html +138 -0
  667. package/components/render/input-focus.html +30 -0
  668. package/components/render/input-hover.html +30 -0
  669. package/components/render/input-readonly.html +30 -0
  670. package/components/render/input-sizes.html +32 -0
  671. package/components/render/input-state-error.html +30 -0
  672. package/components/render/input-state-success.html +30 -0
  673. package/components/render/input.html +19 -0
  674. package/components/render/large-section-spacing-definitions.html +33 -0
  675. package/components/render/large-section-spacing.html +16 -0
  676. package/components/render/links.html +18 -0
  677. package/components/render/lists.html +16 -0
  678. package/components/render/marketplace-flat-icons.html +3 -0
  679. package/components/render/marketplace-rich-icons.html +3 -0
  680. package/components/render/matching-content-height-card.html +328 -0
  681. package/components/render/medium-section-spacing-definitions.html +33 -0
  682. package/components/render/medium-section-spacing.html +16 -0
  683. package/components/render/modal-on-click.html +37 -0
  684. package/components/render/modal-on-load-demo.html +35 -0
  685. package/components/render/modal-on-load.html +35 -0
  686. package/components/render/msds-text-alt-blue-1.html +3 -0
  687. package/components/render/msds-text-alt-blue-2.html +3 -0
  688. package/components/render/msds-text-alt-blue-3.html +3 -0
  689. package/components/render/msds-text-alt-yellow-1.html +3 -0
  690. package/components/render/msds-text-alt-yellow-2.html +3 -0
  691. package/components/render/msds-text-black.html +3 -0
  692. package/components/render/msds-text-clear-blue.html +3 -0
  693. package/components/render/msds-text-confirm-green.html +3 -0
  694. package/components/render/msds-text-danger-red-1.html +3 -0
  695. package/components/render/msds-text-danger-red-2.html +3 -0
  696. package/components/render/msds-text-dark-blue.html +3 -0
  697. package/components/render/msds-text-gray-1.html +3 -0
  698. package/components/render/msds-text-gray-10.html +3 -0
  699. package/components/render/msds-text-gray-2.html +3 -0
  700. package/components/render/msds-text-gray-3.html +3 -0
  701. package/components/render/msds-text-gray-4.html +3 -0
  702. package/components/render/msds-text-gray-5.html +3 -0
  703. package/components/render/msds-text-gray-6.html +3 -0
  704. package/components/render/msds-text-gray-7.html +3 -0
  705. package/components/render/msds-text-gray-8.html +3 -0
  706. package/components/render/msds-text-gray-9.html +3 -0
  707. package/components/render/msds-text-sand.html +3 -0
  708. package/components/render/msds-text-white.html +3 -0
  709. package/components/render/msds-text-yellow.html +3 -0
  710. package/components/render/popover-bottom.html +35 -0
  711. package/components/render/popover-global-definition.html +35 -0
  712. package/components/render/popover-left.html +35 -0
  713. package/components/render/popover-top.html +35 -0
  714. package/components/render/preview-dark.html +33 -0
  715. package/components/render/preview.html +29 -0
  716. package/components/render/progress-bar-dark-theme.html +27 -0
  717. package/components/render/progress-bar-features.html +40 -0
  718. package/components/render/progress-bar-global-definition.html +15 -0
  719. package/components/render/progress-bar-light-theme.html +27 -0
  720. package/components/render/progress-bar-sizes.html +29 -0
  721. package/components/render/radio-button-disabled.html +10 -0
  722. package/components/render/radio-button-focus.html +10 -0
  723. package/components/render/radio-button-global-definition.html +16 -0
  724. package/components/render/radio-button-hover.html +10 -0
  725. package/components/render/radio-button-readonly.html +11 -0
  726. package/components/render/radio-button-selected.html +10 -0
  727. package/components/render/section-checkbox-dark.html +38 -0
  728. package/components/render/section-checkbox-nested-accordion.html +93 -0
  729. package/components/render/section-checkbox.html +70 -0
  730. package/components/render/section-radio-dark.html +70 -0
  731. package/components/render/section-radio-nested-accordion.html +118 -0
  732. package/components/render/section-radio.html +69 -0
  733. package/components/render/select-input-default.html +15 -0
  734. package/components/render/select-input-error.html +14 -0
  735. package/components/render/select-input-global-definition.html +20 -0
  736. package/components/render/select-input-not-required.html +15 -0
  737. package/components/render/select-input-required.html +15 -0
  738. package/components/render/select-input-small.html +12 -0
  739. package/components/render/small-section-spacing-definitions.html +36 -0
  740. package/components/render/small-section-spacing.html +16 -0
  741. package/components/render/solid-background-colors.html +89 -0
  742. package/components/render/solution-card-default-layout.html +132 -0
  743. package/components/render/solution-card-default.html +48 -0
  744. package/components/render/solution-card-layouts.html +561 -0
  745. package/components/render/solution-card-optional-certification-badges.html +56 -0
  746. package/components/render/solution-card-optional-solution-badges.html +56 -0
  747. package/components/render/solution-card-sizes.html +90 -0
  748. package/components/render/solution-card-small.html +48 -0
  749. package/components/render/switch-checked.html +15 -0
  750. package/components/render/switch-default.html +15 -0
  751. package/components/render/switch-disabled-readonly.html +15 -0
  752. package/components/render/switch-disabled.html +15 -0
  753. package/components/render/switch-global.html +20 -0
  754. package/components/render/tab-tile.html +1102 -0
  755. package/components/render/table-dark-theme-default-expandable-rows.html +130 -0
  756. package/components/render/table-dark-theme-default.html +142 -0
  757. package/components/render/table-default-dark.html +118 -0
  758. package/components/render/table-default-expandable-rows.html +130 -0
  759. package/components/render/table-default-medium.html +118 -0
  760. package/components/render/table-default-small.html +118 -0
  761. package/components/render/table-default.html +142 -0
  762. package/components/render/text-area-disabled.html +34 -0
  763. package/components/render/text-area-error.html +34 -0
  764. package/components/render/text-area-field.html +21 -0
  765. package/components/render/text-area-focus.html +34 -0
  766. package/components/render/text-area-hover.html +34 -0
  767. package/components/render/text-area-readonly.html +34 -0
  768. package/components/render/text-area-sizes.html +34 -0
  769. package/components/render/text-area-success.html +34 -0
  770. package/components/render/text-area.html +121 -0
  771. package/components/render/text-colors.html +3 -0
  772. package/components/render/text.html +48 -0
  773. package/components/render/typography-body-texts.html +26 -0
  774. package/components/render/typography-displays.html +8 -0
  775. package/components/render/typography-headers.html +11 -0
  776. package/components/render/typography-leads.html +4 -0
  777. package/components/render/typography-links-dark-theme.html +109 -0
  778. package/components/render/typography-links-light-theme.html +91 -0
  779. package/components/render/typography-links-secondary.html +35 -0
  780. package/components/render/typography-unordered-lists.html +15 -0
  781. package/components.html +13 -0
  782. package/design-system.css +1 -1
  783. package/docs/component-documentation/alerts.html +1657 -0
  784. package/docs/component-documentation/buttons/buttons-floating.html +1676 -0
  785. package/docs/component-documentation/buttons/buttons.html +1908 -0
  786. package/docs/component-documentation/cards/basic-cards.html +1424 -0
  787. package/docs/component-documentation/cards/category-cards.html +1950 -0
  788. package/docs/component-documentation/cards/contact-cards.html +1474 -0
  789. package/docs/component-documentation/cards/generic-cards.html +1534 -0
  790. package/docs/component-documentation/cards/solution-cards.html +1595 -0
  791. package/docs/component-documentation/dividers/dividers.html +839 -0
  792. package/docs/component-documentation/expanding-components/accordion.html +1832 -0
  793. package/docs/component-documentation/expanding-components/section.html +1511 -0
  794. package/docs/component-documentation/modal.html +983 -0
  795. package/docs/component-documentation/popover/popover.html +1082 -0
  796. package/docs/component-documentation/progress-bar.html +1143 -0
  797. package/docs/component-documentation/spacing.html +831 -0
  798. package/docs/component-documentation/table.html +2336 -0
  799. package/docs/content/icons/-overview.html +848 -0
  800. package/docs/content/icons/icons-flat.html +839 -0
  801. package/docs/content/icons/icons-rich.html +839 -0
  802. package/docs/content/typography/-overview.html +860 -0
  803. package/docs/content/typography/font-colors.html +900 -0
  804. package/docs/content/typography/links.html +1113 -0
  805. package/docs/content/typography/lists.html +854 -0
  806. package/docs/content/typography/text.html +919 -0
  807. package/docs/forms/-overview.html +881 -0
  808. package/docs/forms/checkbox.html +1007 -0
  809. package/docs/forms/drop-down-list.html +981 -0
  810. package/docs/forms/input-field.html +1316 -0
  811. package/docs/forms/radio-button.html +966 -0
  812. package/docs/forms/switch.html +964 -0
  813. package/docs/forms/text-area.html +1371 -0
  814. package/docs/guidelines-and-guides/creating-a-new-release.html +825 -0
  815. package/docs/guidelines-and-guides/css-and-scss-guidelines.html +814 -0
  816. package/docs/guidelines-and-guides/git-cheat-sheet.html +898 -0
  817. package/docs/guidelines-and-guides/installation-and-usage.html +812 -0
  818. package/docs/utilities/colors/background-colors.html +1029 -0
  819. package/docs/utilities/colors/font-colors.html +1002 -0
  820. package/docs/utilities/colors/overview.html +952 -0
  821. package/docs/utilities/spacing.html +1112 -0
  822. package/docs.html +13 -0
  823. package/icons.list.js +2432 -2432
  824. package/index.html +807 -0
  825. package/main.css +1 -1
  826. package/package.json +58 -58
  827. package/scss/_variables.scss +124 -124
  828. package/spacing.list.js +11 -11
  829. package/svg/rich/Okay.svg +33 -33
  830. package/svg/rich/acceleration.svg +39 -39
  831. package/svg/rich/add-content.svg +37 -37
  832. package/svg/rich/add-solution.svg +29 -29
  833. package/svg/rich/advanced-super-surveillance.svg +42 -42
  834. package/svg/rich/advocacy .svg +60 -60
  835. package/svg/rich/airplane.svg +67 -67
  836. package/svg/rich/ambition.svg +46 -46
  837. package/svg/rich/analytics-devices.svg +68 -68
  838. package/svg/rich/applications.svg +97 -97
  839. package/svg/rich/backup-important.svg +157 -157
  840. package/svg/rich/black-screens.svg +43 -43
  841. package/svg/rich/blueprint.svg +22 -22
  842. package/svg/rich/body-worn.svg +45 -45
  843. package/svg/rich/book-a-demo-notification.svg +38 -38
  844. package/svg/rich/book-a-demo.svg +34 -34
  845. package/svg/rich/booking.svg +49 -49
  846. package/svg/rich/browser.svg +32 -32
  847. package/svg/rich/build.svg +34 -34
  848. package/svg/rich/building-medium.svg +66 -66
  849. package/svg/rich/cal-monthly.svg +324 -324
  850. package/svg/rich/cal-weekly.svg +173 -173
  851. package/svg/rich/calendar.svg +25 -25
  852. package/svg/rich/cam-group-small.svg +84 -84
  853. package/svg/rich/camera-analogue.svg +27 -27
  854. package/svg/rich/camera-memory.svg +25 -25
  855. package/svg/rich/car.svg +41 -41
  856. package/svg/rich/care.svg +16 -16
  857. package/svg/rich/catalogue.svg +22 -22
  858. package/svg/rich/certification.svg +25 -25
  859. package/svg/rich/checklist.svg +22 -22
  860. package/svg/rich/checkmark-badge.svg +11 -11
  861. package/svg/rich/checkmark.svg +11 -11
  862. package/svg/rich/clock-24-7.svg +77 -77
  863. package/svg/rich/co-working.svg +104 -104
  864. package/svg/rich/coffee.svg +60 -60
  865. package/svg/rich/community.svg +184 -184
  866. package/svg/rich/company.svg +32 -32
  867. package/svg/rich/complete-flow.svg +30 -30
  868. package/svg/rich/consumer.svg +47 -47
  869. package/svg/rich/contact-illustration.svg +13 -13
  870. package/svg/rich/contact-notification.svg +17 -17
  871. package/svg/rich/crime.svg +29 -29
  872. package/svg/rich/crowd-management.svg +47 -47
  873. package/svg/rich/customer-stories.svg +23 -23
  874. package/svg/rich/customizable.svg +19 -19
  875. package/svg/rich/cyber-security.svg +131 -131
  876. package/svg/rich/dashboard.svg +43 -43
  877. package/svg/rich/decision-making.svg +19 -19
  878. package/svg/rich/deployment-device.svg +66 -66
  879. package/svg/rich/design-animated.svg +51 -51
  880. package/svg/rich/design.svg +24 -24
  881. package/svg/rich/devices-web.svg +56 -56
  882. package/svg/rich/devices.svg +29 -29
  883. package/svg/rich/discount.svg +22 -22
  884. package/svg/rich/document.svg +24 -24
  885. package/svg/rich/documentation.svg +79 -79
  886. package/svg/rich/dome-cam-8.svg +84 -84
  887. package/svg/rich/dome-cam.svg +16 -16
  888. package/svg/rich/download-illustration.svg +49 -49
  889. package/svg/rich/e-learning.svg +42 -42
  890. package/svg/rich/emergency.svg +44 -44
  891. package/svg/rich/employees.svg +37 -37
  892. package/svg/rich/end-user.svg +28 -28
  893. package/svg/rich/expertise.svg +47 -47
  894. package/svg/rich/explore.svg +50 -50
  895. package/svg/rich/extension.svg +63 -63
  896. package/svg/rich/failover.svg +33 -33
  897. package/svg/rich/faq.svg +23 -23
  898. package/svg/rich/feedback-notification.svg +21 -21
  899. package/svg/rich/feedback.svg +17 -17
  900. package/svg/rich/find.svg +28 -28
  901. package/svg/rich/flexibility.svg +13 -13
  902. package/svg/rich/form.svg +26 -26
  903. package/svg/rich/get-leads.svg +73 -73
  904. package/svg/rich/getting-started.svg +29 -29
  905. package/svg/rich/global-partner-network.svg +978 -978
  906. package/svg/rich/growth-data.svg +56 -56
  907. package/svg/rich/happiness.svg +29 -29
  908. package/svg/rich/hardware-applications-software.svg +165 -165
  909. package/svg/rich/hardware-services-documentation.svg +47 -47
  910. package/svg/rich/hardware.svg +22 -22
  911. package/svg/rich/intelligence.svg +43 -43
  912. package/svg/rich/interconnect.svg +39 -39
  913. package/svg/rich/investigation.svg +34 -34
  914. package/svg/rich/join.svg +78 -78
  915. package/svg/rich/key-features.svg +38 -38
  916. package/svg/rich/languages.svg +49 -49
  917. package/svg/rich/license-governance.svg +45 -45
  918. package/svg/rich/license-key.svg +13 -13
  919. package/svg/rich/like-notification.svg +43 -43
  920. package/svg/rich/listen.svg +13 -13
  921. package/svg/rich/live-streaming.svg +93 -93
  922. package/svg/rich/logged-in.svg +14 -14
  923. package/svg/rich/lpr.svg +59 -59
  924. package/svg/rich/marketplace-challenges-assist-people-feel-safe-leaving.svg +105 -105
  925. package/svg/rich/marketplace-challenges-assist-people-in-finding-their-vehicles.svg +124 -124
  926. package/svg/rich/marketplace-challenges-avoid-employee-theft.svg +169 -169
  927. package/svg/rich/marketplace-challenges-control-access-to-restricted-areas.svg +104 -104
  928. package/svg/rich/marketplace-challenges-discover-inefficiencies-in-cargo-movement.svg +130 -130
  929. package/svg/rich/marketplace-challenges-find-lost-children.svg +87 -87
  930. package/svg/rich/marketplace-challenges-gather-evidence-for-criminal-investigation.svg +172 -172
  931. package/svg/rich/marketplace-challenges-improve-wait-time-in-lines.svg +375 -375
  932. package/svg/rich/marketplace-challenges-money-disputes-with-customers.svg +157 -157
  933. package/svg/rich/marketplace-challenges-personalized-customer-experience.svg +127 -127
  934. package/svg/rich/marketplace-challenges-prevent-multiple-people-from-entering-a-door-on-a-single-access-badge.svg +245 -245
  935. package/svg/rich/marketplace-challenges-provide-evidence-against-lawsuit.svg +270 -270
  936. package/svg/rich/marketplace-challenges-react-to-confrontations-before-they-escalate.svg +176 -176
  937. package/svg/rich/marketplace-challenges-reduce-property-damage.svg +381 -381
  938. package/svg/rich/marketplace-challenges-reduce-workplace-accidents.svg +172 -172
  939. package/svg/rich/marketplace-challenges-respond-to-medical-emergencies.svg +179 -179
  940. package/svg/rich/marketplace-challenges-situational-awareness-to-response-teams.svg +330 -330
  941. package/svg/rich/marketplace-challenges-understand-customer-behavior.svg +455 -455
  942. package/svg/rich/marketplace-challenges-vandalism.svg +120 -120
  943. package/svg/rich/marketplace-collect.svg +121 -121
  944. package/svg/rich/marketplace-filter.svg +54 -54
  945. package/svg/rich/marketplace-industries-airports.svg +380 -380
  946. package/svg/rich/marketplace-industries-art-and-entertainment.svg +170 -170
  947. package/svg/rich/marketplace-industries-city-surveillance.svg +572 -572
  948. package/svg/rich/marketplace-industries-construction.svg +253 -253
  949. package/svg/rich/marketplace-industries-critical-infrastructure.svg +292 -292
  950. package/svg/rich/marketplace-industries-education.svg +291 -291
  951. package/svg/rich/marketplace-industries-finance-and-insurance.svg +140 -140
  952. package/svg/rich/marketplace-industries-healthcare.svg +207 -207
  953. package/svg/rich/marketplace-industries-information-technology.svg +250 -250
  954. package/svg/rich/marketplace-industries-manufacturing.svg +175 -175
  955. package/svg/rich/marketplace-industries-public-administration.svg +349 -349
  956. package/svg/rich/marketplace-industries-public-transport.svg +303 -303
  957. package/svg/rich/marketplace-industries-retail.svg +392 -392
  958. package/svg/rich/marketplace-industries-seaports.svg +335 -335
  959. package/svg/rich/marketplace-industries-trafic-monitoring.svg +255 -255
  960. package/svg/rich/marketplace-industries-utilities.svg +211 -211
  961. package/svg/rich/marketplace-interface.svg +76 -76
  962. package/svg/rich/marketplace-practice-access-control.svg +117 -117
  963. package/svg/rich/marketplace-practice-business-intelligence.svg +89 -89
  964. package/svg/rich/marketplace-practice-business-solutions.svg +195 -195
  965. package/svg/rich/marketplace-practice-central-monitoring.svg +505 -505
  966. package/svg/rich/marketplace-practice-cloud-and-managed-services.svg +75 -75
  967. package/svg/rich/marketplace-practice-communication.svg +187 -187
  968. package/svg/rich/marketplace-practice-crisis-emergency.svg +160 -160
  969. package/svg/rich/marketplace-practice-cyber-security.svg +141 -141
  970. package/svg/rich/marketplace-practice-detection-and-deterrence.svg +164 -164
  971. package/svg/rich/marketplace-practice-digital-infrastructure.svg +197 -197
  972. package/svg/rich/marketplace-practice-facilities-management.svg +332 -332
  973. package/svg/rich/marketplace-practice-fire-and-life-safety.svg +168 -168
  974. package/svg/rich/marketplace-practice-home-automation-iot.svg +161 -161
  975. package/svg/rich/marketplace-practice-intrusion-and-alarm.svg +301 -301
  976. package/svg/rich/marketplace-practice-investigation.svg +157 -157
  977. package/svg/rich/marketplace-practice-it-hardware-and-equipment.svg +254 -254
  978. package/svg/rich/marketplace-practice-privacy-protection.svg +118 -118
  979. package/svg/rich/marketplace-practice-smart-city.svg +351 -351
  980. package/svg/rich/marketplace-practice-surveillance.svg +72 -72
  981. package/svg/rich/marketplace-practice-tracking-and-monitoring.svg +178 -178
  982. package/svg/rich/marketplace-practice-vehicles-and-traffic.svg +227 -227
  983. package/svg/rich/marketplace-solution-service.svg +75 -75
  984. package/svg/rich/milestone-global-offices-illustration.svg +49 -49
  985. package/svg/rich/milestone-in the-media.svg +49 -49
  986. package/svg/rich/mobile-support.svg +40 -40
  987. package/svg/rich/my-milestone.svg +28 -28
  988. package/svg/rich/network.svg +24 -24
  989. package/svg/rich/newspaper.svg +20 -20
  990. package/svg/rich/no-1.svg +50 -50
  991. package/svg/rich/no-backup.svg +30 -30
  992. package/svg/rich/one-hub.svg +71 -71
  993. package/svg/rich/open-platform-community.svg +144 -144
  994. package/svg/rich/open-platform.svg +10 -10
  995. package/svg/rich/outdated-hardware.svg +53 -53
  996. package/svg/rich/partnership.svg +39 -39
  997. package/svg/rich/passion.svg +41 -41
  998. package/svg/rich/planet.svg +75 -75
  999. package/svg/rich/play.svg +10 -10
  1000. package/svg/rich/press-release.svg +30 -30
  1001. package/svg/rich/product-overview-illustration.svg +49 -49
  1002. package/svg/rich/project-animated.svg +99 -99
  1003. package/svg/rich/project.svg +18 -18
  1004. package/svg/rich/promotion.svg +25 -25
  1005. package/svg/rich/publish.svg +12 -12
  1006. package/svg/rich/quote.svg +104 -104
  1007. package/svg/rich/reaction-mode.svg +54 -54
  1008. package/svg/rich/releases.svg +17 -17
  1009. package/svg/rich/reliable.svg +24 -24
  1010. package/svg/rich/reminder.svg +33 -33
  1011. package/svg/rich/save-money.svg +27 -27
  1012. package/svg/rich/scalable.svg +16 -16
  1013. package/svg/rich/scale-balance.svg +101 -101
  1014. package/svg/rich/scale-up.svg +11 -11
  1015. package/svg/rich/screen-recording.svg +259 -259
  1016. package/svg/rich/searching.svg +115 -115
  1017. package/svg/rich/secure-gdpr.svg +52 -52
  1018. package/svg/rich/secure.svg +49 -49
  1019. package/svg/rich/self-service-support.svg +15 -15
  1020. package/svg/rich/service-coding.svg +44 -44
  1021. package/svg/rich/sign-up.svg +37 -37
  1022. package/svg/rich/single-site.svg +31 -31
  1023. package/svg/rich/smart-wall-person.svg +135 -135
  1024. package/svg/rich/smart-wall.svg +96 -96
  1025. package/svg/rich/solutions-design-tool.svg +234 -234
  1026. package/svg/rich/submit-for-feedback.svg +28 -28
  1027. package/svg/rich/subscriptions.svg +37 -37
  1028. package/svg/rich/support-call.svg +29 -29
  1029. package/svg/rich/support-chat-female.svg +48 -48
  1030. package/svg/rich/support-chat-male.svg +48 -48
  1031. package/svg/rich/support-technical.svg +17 -17
  1032. package/svg/rich/system-builder.svg +24 -24
  1033. package/svg/rich/tags.svg +24 -24
  1034. package/svg/rich/target.svg +15 -15
  1035. package/svg/rich/time-to-market.svg +53 -53
  1036. package/svg/rich/tools.svg +37 -37
  1037. package/svg/rich/trade-show.svg +90 -90
  1038. package/svg/rich/transaction.svg +56 -56
  1039. package/svg/rich/translation.svg +17 -17
  1040. package/svg/rich/update-content-then-publish.svg +77 -77
  1041. package/svg/rich/update-content.svg +55 -55
  1042. package/svg/rich/user-review.svg +22 -22
  1043. package/svg/rich/verification.svg +37 -37
  1044. package/svg/rich/video-cookie.svg +78 -78
  1045. package/svg/rich/vps.svg +39 -39
  1046. package/svg/rich/warning.svg +48 -48
  1047. package/svg/rich/watch.svg +19 -19
  1048. package/svg/rich/webinar.svg +49 -49
  1049. package/svg/rich/well-being.svg +67 -67
  1050. package/svg/rich/world-leading.svg +258 -258
  1051. package/svg/rich/xprotect-access-anywhere.svg +86 -86
  1052. package/svg/rich/xprotect-compare-matrix.svg +40 -40
  1053. package/svg/rich/xprotect-compare-products.svg +232 -232
  1054. package/svg/rich/xprotect-compare-releases.svg +208 -208
  1055. package/svg/rich/xprotect.svg +31 -31
  1056. package/svg/rich/youtube.svg +12 -12
  1057. package/text.list.js +47 -47
  1058. package/themes/mandelbrot/css/aqua.css +1 -0
  1059. package/themes/mandelbrot/css/black.css +1 -0
  1060. package/themes/mandelbrot/css/blue.css +1 -0
  1061. package/themes/mandelbrot/css/default.css +1 -0
  1062. package/themes/mandelbrot/css/fuchsia.css +1 -0
  1063. package/themes/mandelbrot/css/green.css +1 -0
  1064. package/themes/mandelbrot/css/grey.css +1 -0
  1065. package/themes/mandelbrot/css/highlight.css +1 -0
  1066. package/themes/mandelbrot/css/lime.css +1 -0
  1067. package/themes/mandelbrot/css/maroon.css +1 -0
  1068. package/themes/mandelbrot/css/navy.css +1 -0
  1069. package/themes/mandelbrot/css/olive.css +1 -0
  1070. package/themes/mandelbrot/css/orange.css +1 -0
  1071. package/themes/mandelbrot/css/purple.css +1 -0
  1072. package/themes/mandelbrot/css/red.css +1 -0
  1073. package/themes/mandelbrot/css/teal.css +1 -0
  1074. package/themes/mandelbrot/css/white.css +1 -0
  1075. package/themes/mandelbrot/css/yellow.css +1 -0
  1076. package/themes/mandelbrot/favicon.ico +0 -0
  1077. package/themes/mandelbrot/fonts/OpenSans-Italic.woff +0 -0
  1078. package/themes/mandelbrot/fonts/OpenSans-Italic.woff2 +0 -0
  1079. package/themes/mandelbrot/fonts/OpenSans-Regular.woff +0 -0
  1080. package/themes/mandelbrot/fonts/OpenSans-Regular.woff2 +0 -0
  1081. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff +0 -0
  1082. package/themes/mandelbrot/fonts/OpenSans-Semibold.woff2 +0 -0
  1083. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff +0 -0
  1084. package/themes/mandelbrot/fonts/OpenSans-SemiboldItalic.woff2 +0 -0
  1085. package/themes/mandelbrot/fonts/hack-bold-webfont.woff +0 -0
  1086. package/themes/mandelbrot/fonts/hack-bold-webfont.woff2 +0 -0
  1087. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff +0 -0
  1088. package/themes/mandelbrot/fonts/hack-bolditalic-webfont.woff2 +0 -0
  1089. package/themes/mandelbrot/fonts/hack-italic-webfont.woff +0 -0
  1090. package/themes/mandelbrot/fonts/hack-italic-webfont.woff2 +0 -0
  1091. package/themes/mandelbrot/fonts/hack-regular-webfont.woff +0 -0
  1092. package/themes/mandelbrot/fonts/hack-regular-webfont.woff2 +0 -0
  1093. package/themes/mandelbrot/img/favicon.png +0 -0
  1094. package/themes/mandelbrot/img/icon-drag--horizontal.svg +3 -0
  1095. package/themes/mandelbrot/img/icon-drag--vertical.svg +3 -0
  1096. package/themes/mandelbrot/img/icon-navigation-closed-ltr.svg +3 -0
  1097. package/themes/mandelbrot/img/icon-navigation-closed-rtl.svg +3 -0
  1098. package/themes/mandelbrot/img/icon-navigation-opened.svg +3 -0
  1099. package/themes/mandelbrot/img/icon-window.svg +3 -0
  1100. package/themes/mandelbrot/img/loader.svg +37 -0
  1101. package/themes/mandelbrot/js/mandelbrot.js +2 -0
  1102. package/themes/mandelbrot/js/mandelbrot.js.map +1 -0
package/components/detail/buttons-overview.html ADDED
@@ -0,0 +1,2069 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en" dir="ltr" class="no-js">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <script>
7
+ window.frctl = {
8
+ env: 'static'
9
+ };
10
+ </script>
11
+ <script>var cl = document.querySelector('html').classList; cl.remove('no-js'); cl.add('has-js');</script>
12
+ <link rel="shortcut icon" href="../../src/demo-img/favicon.ico" type="image/ico">
13
+
14
+ <link rel="stylesheet" href="../../themes/mandelbrot/css/default.css?cachebust=1.4.0" type="text/css">
15
+
16
+ <link rel="stylesheet" href="../../rich-icons-bundle.css?cachebust=1.4.0" type="text/css">
17
+
18
+ <link rel="stylesheet" href="../../theme-overrides/styles.css?cachebust=1.4.0" type="text/css">
19
+
20
+ <link rel="stylesheet" href="../../main.css?cachebust=1.4.0" type="text/css">
21
+
22
+ <link rel="stylesheet" href="../../themes/mandelbrot/css/highlight.css?cachebust=1.4.0" type="text/css">
23
+
24
+
25
+ <title>Buttons Overview | Milestone Web Design System</title>
26
+
27
+ </head>
28
+ <body>
29
+
30
+
31
+
32
+ <div class="Frame" id="frame">
33
+
34
+ <div class="Frame-header">
35
+ <div class="Header">
36
+ <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i&display=swap" rel="stylesheet">
37
+ <button class="Header-button Header-navToggle" data-action="toggle-sidebar">
38
+ <svg class="Header-navToggleIcon Header-navToggleIcon--open" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
39
+ <path d="M0 0h24v24H0z" fill="none"></path>
40
+ <path d="M19 6.4L17.6 5 12 10.6 6.4 5 5 6.4 10.6 12 5 17.6 6.4 19 12 13.4 17.6 19 19 17.6 13.4 12z"></path>
41
+ </svg>
42
+ <svg class="Header-navToggleIcon Header-navToggleIcon--closed" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
43
+ <path d="M0 0h24v24H0z" fill="none"></path>
44
+ <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
45
+ </svg>
46
+ </button>
47
+ <div class="flex-child-header-txt">
48
+ <a href="../../index.html" class="Header-title" data-pjax>
49
+ <img class="logo-test" src="../../src/demo-img/milestone-logo-white.png" alt="logo"></a>
50
+ </a>
51
+ <h6 class="header-txt ">Digital Design System</h6>
52
+ </div>
53
+ <div class="github-milestone-system">
54
+ <a class="github-milestonesys-design-system" href="https://github.com/milestone-sys/web-design-system" target="_blank">
55
+ <img class="git-icon" src="../../src/demo-img/giticon.png" alt="git icon"></a>
56
+ </a>
57
+ </div>
58
+ </div>
59
+ </div>
60
+
61
+ <div class="Frame-body" data-role="body">
62
+
63
+ <div class="Frame-panel Frame-panel--main" data-role="main">
64
+ <div class="Frame-inner" id="pjax-container">
65
+
66
+
67
+
68
+
69
+
70
+
71
+ <div class="Pen" data-behaviour="pen" id="pen-6ad3061e635613ff57c64cf20df4caab">
72
+
73
+
74
+
75
+ <div class="Pen-panel Pen-header">
76
+ <h1 class="Pen-title">
77
+ <a class="Pen-previewLink" href="../preview/buttons-overview.html" title="Component preview">
78
+ Buttons Overview
79
+ <svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg">
80
+ <path d="M0 0h24v24H0z" fill="none"/>
81
+ <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/>
82
+ </svg>
83
+
84
+ </a>
85
+ </h1>
86
+
87
+
88
+ <div class="Status Status--tag">
89
+
90
+ <label class="Status-label" style="background-color: #FF9233; border-color: #FF9233;">WIP</label>
91
+
92
+ </div>
93
+
94
+
95
+ </div>
96
+
97
+
98
+ <div class="Pen-panel Pen-preview Preview" data-behaviour="preview" id="preview-6ad3061e635613ff57c64cf20df4caab">
99
+ <div class="Preview-wrapper" data-role="resizer">
100
+ <div class="Preview-resizer">
101
+
102
+ <iframe
103
+ class="Preview-iframe"
104
+ data-role="window"
105
+ src="../preview/buttons-overview.html"
106
+ style=""
107
+ marginwidth="0" marginheight="0" frameborder="0" vspace="0" hspace="0" scrolling="yes">
108
+ </iframe>
109
+ </div>
110
+ <div class="Preview-handle" data-role="resize-handle"></div>
111
+ <div class="Preview-overlay"></div>
112
+ </div>
113
+ </div>
114
+
115
+
116
+ <div class="Pen-handle Pen-handle--browser" data-role="resize-handle"></div>
117
+
118
+ <div class="Pen-panel Pen-info" data-role="info">
119
+ <div class="Browser" data-behaviour="browser" id="browser-6ad3061e635613ff57c64cf20df4caab">
120
+
121
+
122
+
123
+ <div class="Browser-controls">
124
+ <ul class="Browser-tabs">
125
+
126
+
127
+ <li class="Browser-tab Browser-tab--html is-active " data-role="tab">
128
+ <a href="#browser-6ad3061e635613ff57c64cf20df4caab-panel-html">HTML</a>
129
+ </li>
130
+
131
+
132
+
133
+ <li class="Browser-tab Browser-tab--view" data-role="tab">
134
+ <a href="#browser-6ad3061e635613ff57c64cf20df4caab-panel-view">View</a>
135
+ </li>
136
+
137
+
138
+
139
+ <li class="Browser-tab Browser-tab--context" data-role="tab">
140
+ <a href="#browser-6ad3061e635613ff57c64cf20df4caab-panel-context">Context</a>
141
+ </li>
142
+
143
+
144
+
145
+ <li class="Browser-tab Browser-tab--info" data-role="tab">
146
+ <a href="#browser-6ad3061e635613ff57c64cf20df4caab-panel-info">Info</a>
147
+ </li>
148
+
149
+
150
+
151
+ <li class="Browser-tab Browser-tab--notes" data-role="tab">
152
+ <a href="#browser-6ad3061e635613ff57c64cf20df4caab-panel-notes">Notes</a>
153
+ </li>
154
+
155
+
156
+ </ul>
157
+ </div>
158
+
159
+
160
+
161
+
162
+ <div class="Browser-panel Browser-code is-active" data-role="tab-panel" id="browser-6ad3061e635613ff57c64cf20df4caab-panel-html">
163
+ <code class="Code Code--lang-html hljs">
164
+
165
+ <pre><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
166
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
167
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
168
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
169
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Milestone buttons<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
170
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>All type of buttons<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
171
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Without Icons<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
172
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
173
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
174
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
175
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Tertiary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
176
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Gray<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
177
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
178
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
179
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>With Icons<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
180
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
181
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
182
+ Primary
183
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
184
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
185
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
186
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
187
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
188
+ Secondary
189
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
190
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
191
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
192
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
193
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
194
+ Tertiary
195
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
196
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
197
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
198
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
199
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
200
+ Gray
201
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
202
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
203
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
204
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
205
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
206
+ Danger
207
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
208
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
209
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
210
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
211
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
212
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
213
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Primary Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
214
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
215
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
216
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
217
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span>&gt;</span>
218
+ With icon, enabled
219
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
220
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
221
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
222
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
223
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
224
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span>&gt;</span>
225
+ With icon, hover
226
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
227
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
228
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
229
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
230
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
231
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span>&gt;</span>
232
+ With icon, active (pressed)
233
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
234
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
235
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
236
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
237
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
238
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span>&gt;</span>
239
+ With icon, focus
240
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
241
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
242
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
243
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
244
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
245
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
246
+ With icon, disabled
247
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
248
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
249
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
250
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
251
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
252
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
253
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
254
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
255
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
256
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
257
+ With icon, enabled
258
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
259
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
260
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
261
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
262
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
263
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
264
+ With icon, hover
265
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
266
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
267
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
268
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
269
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
270
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
271
+ With icon, active (pressed)
272
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
273
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
274
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
275
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
276
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
277
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
278
+ With icon, focus
279
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
280
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
281
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
282
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
283
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
284
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span> <span class="hljs-attr">disabled</span>&gt;</span>
285
+ With icon, disabled
286
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
287
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
288
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
289
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
290
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
291
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
292
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
293
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
294
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
295
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span>&gt;</span>
296
+ With icon, enabled
297
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
298
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
299
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
300
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
301
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
302
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span>&gt;</span>
303
+ With icon, hover
304
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
305
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
306
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
307
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
308
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
309
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span>&gt;</span>
310
+ With icon, active (pressed)
311
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
312
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
313
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
314
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
315
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
316
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span>&gt;</span>
317
+ With icon, focus
318
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
319
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
320
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
321
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
322
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
323
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
324
+ With icon, disabled
325
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
326
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
327
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
328
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
329
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
330
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
331
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Secondary Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
332
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
333
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
334
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
335
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span>&gt;</span>
336
+ With icon, enabled
337
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
338
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
339
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
340
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
341
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
342
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span>&gt;</span>
343
+ With icon, hover
344
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
345
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
346
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
347
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
348
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
349
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span>&gt;</span>
350
+ With icon, active (pressed)
351
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
352
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
353
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
354
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
355
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
356
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span>&gt;</span>
357
+ With icon, focus
358
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
359
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
360
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
361
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
362
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
363
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
364
+ With icon, disabled
365
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
366
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
367
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
368
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
369
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
370
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
371
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
372
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
373
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
374
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
375
+ With icon, enabled
376
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
377
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
378
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
379
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
380
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
381
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
382
+ With icon, hover
383
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
384
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
385
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
386
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
387
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
388
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
389
+ With icon, active (pressed)
390
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
391
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
392
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
393
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
394
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
395
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
396
+ With icon, focus
397
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
398
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
399
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
400
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
401
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
402
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span> <span class="hljs-attr">disabled</span>&gt;</span>
403
+ With icon, disabled
404
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
405
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
406
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
407
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
408
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
409
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
410
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
411
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
412
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
413
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span>&gt;</span>
414
+ With icon, enabled
415
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
416
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
417
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
418
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
419
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
420
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span>&gt;</span>
421
+ With icon, hover
422
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
423
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
424
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
425
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
426
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
427
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span>&gt;</span>
428
+ With icon, active (pressed)
429
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
430
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
431
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
432
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
433
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
434
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span>&gt;</span>
435
+ With icon, focus
436
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
437
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
438
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
439
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
440
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
441
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
442
+ With icon, disabled
443
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
444
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
445
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
446
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
447
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
448
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
449
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Tertiary Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
450
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
451
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
452
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
453
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span>&gt;</span>
454
+ With icon, enabled
455
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
456
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
457
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
458
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
459
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
460
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span>&gt;</span>
461
+ With icon, hover
462
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
463
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
464
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
465
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
466
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
467
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span>&gt;</span>
468
+ With icon, active (pressed)
469
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
470
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
471
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
472
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
473
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
474
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span>&gt;</span>
475
+ With icon, focus
476
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
477
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
478
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
479
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
480
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
481
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
482
+ With icon, disabled
483
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
484
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
485
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
486
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
487
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
488
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
489
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
490
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
491
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
492
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
493
+ With icon, enabled
494
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
495
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
496
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
497
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
498
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
499
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
500
+ With icon, hover
501
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
502
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
503
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
504
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
505
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
506
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
507
+ With icon, active (pressed)
508
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
509
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
510
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
511
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
512
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
513
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
514
+ With icon, focus
515
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
516
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
517
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
518
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
519
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
520
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span> <span class="hljs-attr">disabled</span>&gt;</span>
521
+ With icon, disabled
522
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
523
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
524
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
525
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
526
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
527
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
528
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
529
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
530
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
531
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span>&gt;</span>
532
+ With icon, enabled
533
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
534
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
535
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
536
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
537
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
538
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span>&gt;</span>
539
+ With icon, hover
540
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
541
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
542
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
543
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
544
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
545
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span>&gt;</span>
546
+ With icon, active (pressed)
547
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
548
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
549
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
550
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
551
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
552
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span>&gt;</span>
553
+ With icon, focus
554
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
555
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
556
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
557
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
558
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
559
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
560
+ With icon, disabled
561
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
562
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
563
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
564
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
565
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
566
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
567
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Gray Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
568
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
569
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
570
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
571
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span>&gt;</span>
572
+ With icon, enabled
573
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
574
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
575
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
576
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
577
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
578
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span>&gt;</span>
579
+ With icon, hover
580
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
581
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
582
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
583
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
584
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
585
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span>&gt;</span>
586
+ With icon, active (pressed)
587
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
588
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
589
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
590
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
591
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
592
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span>&gt;</span>
593
+ With icon, focus
594
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
595
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
596
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
597
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
598
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
599
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
600
+ With icon, disabled
601
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
602
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
603
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
604
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
605
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
606
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
607
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
608
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
609
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
610
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
611
+ With icon, enabled
612
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
613
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
614
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
615
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
616
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
617
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
618
+ With icon, hover
619
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
620
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
621
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
622
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
623
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
624
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
625
+ With icon, active (pressed)
626
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
627
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
628
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
629
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
630
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
631
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
632
+ With icon, focus
633
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
634
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
635
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
636
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
637
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
638
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span> <span class="hljs-attr">disabled</span>&gt;</span>
639
+ With icon, disabled
640
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
641
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
642
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
643
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
644
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
645
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
646
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
647
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
648
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
649
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span>&gt;</span>
650
+ With icon, enabled
651
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
652
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
653
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
654
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
655
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
656
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span>&gt;</span>
657
+ With icon, hover
658
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
659
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
660
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
661
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
662
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
663
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span>&gt;</span>
664
+ With icon, active (pressed)
665
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
666
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
667
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
668
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
669
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
670
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span>&gt;</span>
671
+ With icon, focus
672
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
673
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
674
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
675
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
676
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
677
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
678
+ With icon, disabled
679
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
680
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
681
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
682
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
683
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
684
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
685
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Danger Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
686
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
687
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
688
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
689
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span>&gt;</span>
690
+ With icon, enabled
691
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
692
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
693
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
694
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
695
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
696
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span>&gt;</span>
697
+ With icon, hover
698
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
699
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
700
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
701
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
702
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
703
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span>&gt;</span>
704
+ With icon, active (pressed)
705
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
706
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
707
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
708
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
709
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
710
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span>&gt;</span>
711
+ With icon, focus
712
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
713
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
714
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
715
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
716
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
717
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
718
+ With icon, disabled
719
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
720
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
721
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
722
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
723
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
724
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
725
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
726
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
727
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
728
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
729
+ With icon, enabled
730
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
731
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
732
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
733
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
734
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
735
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
736
+ With icon, hover
737
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
738
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
739
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
740
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
741
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
742
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
743
+ With icon, active (pressed)
744
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
745
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
746
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
747
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
748
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
749
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
750
+ With icon, focus
751
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
752
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
753
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
754
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
755
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
756
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span> <span class="hljs-attr">disabled</span>&gt;</span>
757
+ With icon, disabled
758
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
759
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
760
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
761
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
762
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
763
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
764
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
765
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
766
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
767
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span>&gt;</span>
768
+ With icon, enabled
769
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
770
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
771
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
772
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
773
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
774
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span>&gt;</span>
775
+ With icon, hover
776
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
777
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
778
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
779
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
780
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
781
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span>&gt;</span>
782
+ With icon, active (pressed)
783
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
784
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
785
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
786
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
787
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
788
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span>&gt;</span>
789
+ With icon, focus
790
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
791
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
792
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
793
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
794
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
795
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
796
+ With icon, disabled
797
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span>
798
+ <span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"../../msds-spritemap.svg#publish"</span> /&gt;</span>
799
+ <span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
800
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
801
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
802
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
803
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
804
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
805
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></pre>
806
+
807
+ </code>
808
+ </div>
809
+
810
+
811
+ <div class="Browser-panel Browser-code" data-role="tab-panel" id="browser-6ad3061e635613ff57c64cf20df4caab-panel-view">
812
+ <code class="Code Code--lang-handlebars hljs">
813
+ <pre><span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"container"</span>&gt;</span>
814
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"row"</span>&gt;</span>
815
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"col-12"</span>&gt;</span>
816
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
817
+ <span class="hljs-tag">&lt;<span class="hljs-name">h1</span>&gt;</span>Milestone buttons<span class="hljs-tag">&lt;/<span class="hljs-name">h1</span>&gt;</span>
818
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>All type of buttons<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
819
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Without Icons<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
820
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
821
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Primary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
822
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Secondary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
823
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Tertiary<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
824
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Gray<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
825
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Danger<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
826
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
827
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>With Icons<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
828
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
829
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
830
+ Primary
831
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
832
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
833
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
834
+ Secondary
835
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
836
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
837
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
838
+ Tertiary
839
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
840
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
841
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
842
+ Gray
843
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
844
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
845
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
846
+ Danger
847
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
848
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
849
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
850
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
851
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Primary Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
852
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
853
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
854
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
855
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span>&gt;</span>
856
+ With icon, enabled
857
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
858
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
859
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
860
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span>&gt;</span>
861
+ With icon, hover
862
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
863
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
864
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
865
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span>&gt;</span>
866
+ With icon, active (pressed)
867
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
868
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
869
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
870
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span>&gt;</span>
871
+ With icon, focus
872
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
873
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
874
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
875
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
876
+ With icon, disabled
877
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
878
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
879
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
880
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
881
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
882
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
883
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
884
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
885
+ With icon, enabled
886
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
887
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
888
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
889
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
890
+ With icon, hover
891
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
892
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
893
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
894
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
895
+ With icon, active (pressed)
896
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
897
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
898
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
899
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span>&gt;</span>
900
+ With icon, focus
901
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
902
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
903
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
904
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary "</span> <span class="hljs-attr">disabled</span>&gt;</span>
905
+ With icon, disabled
906
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
907
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
908
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
909
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
910
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
911
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
912
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
913
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span>&gt;</span>
914
+ With icon, enabled
915
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
916
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
917
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
918
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span>&gt;</span>
919
+ With icon, hover
920
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
921
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
922
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
923
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span>&gt;</span>
924
+ With icon, active (pressed)
925
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
926
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
927
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
928
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span>&gt;</span>
929
+ With icon, focus
930
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
931
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
932
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
933
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--primary msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
934
+ With icon, disabled
935
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
936
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
937
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
938
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
939
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Secondary Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
940
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
941
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
942
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
943
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span>&gt;</span>
944
+ With icon, enabled
945
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
946
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
947
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
948
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span>&gt;</span>
949
+ With icon, hover
950
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
951
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
952
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
953
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span>&gt;</span>
954
+ With icon, active (pressed)
955
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
956
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
957
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
958
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span>&gt;</span>
959
+ With icon, focus
960
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
961
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
962
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
963
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
964
+ With icon, disabled
965
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
966
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
967
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
968
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
969
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
970
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
971
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
972
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
973
+ With icon, enabled
974
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
975
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
976
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
977
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
978
+ With icon, hover
979
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
980
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
981
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
982
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
983
+ With icon, active (pressed)
984
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
985
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
986
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
987
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span>&gt;</span>
988
+ With icon, focus
989
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
990
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
991
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
992
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary "</span> <span class="hljs-attr">disabled</span>&gt;</span>
993
+ With icon, disabled
994
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
995
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
996
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
997
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
998
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
999
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1000
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1001
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span>&gt;</span>
1002
+ With icon, enabled
1003
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1004
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1005
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1006
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span>&gt;</span>
1007
+ With icon, hover
1008
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1009
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1010
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1011
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span>&gt;</span>
1012
+ With icon, active (pressed)
1013
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1014
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1015
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1016
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span>&gt;</span>
1017
+ With icon, focus
1018
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1019
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1020
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1021
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--secondary msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1022
+ With icon, disabled
1023
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1024
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1025
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1026
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1027
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Tertiary Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
1028
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1029
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1030
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1031
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span>&gt;</span>
1032
+ With icon, enabled
1033
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1034
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1035
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1036
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span>&gt;</span>
1037
+ With icon, hover
1038
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1039
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1040
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1041
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span>&gt;</span>
1042
+ With icon, active (pressed)
1043
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1044
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1045
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1046
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span>&gt;</span>
1047
+ With icon, focus
1048
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1049
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1050
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1051
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1052
+ With icon, disabled
1053
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1054
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1055
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1056
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1057
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1058
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1059
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1060
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
1061
+ With icon, enabled
1062
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1063
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1064
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1065
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
1066
+ With icon, hover
1067
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1068
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1069
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1070
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
1071
+ With icon, active (pressed)
1072
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1073
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1074
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1075
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span>&gt;</span>
1076
+ With icon, focus
1077
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1078
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1079
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1080
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1081
+ With icon, disabled
1082
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1083
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1084
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1085
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1086
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1087
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1088
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1089
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span>&gt;</span>
1090
+ With icon, enabled
1091
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1092
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1093
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1094
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span>&gt;</span>
1095
+ With icon, hover
1096
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1097
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1098
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1099
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span>&gt;</span>
1100
+ With icon, active (pressed)
1101
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1102
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1103
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1104
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span>&gt;</span>
1105
+ With icon, focus
1106
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1107
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1108
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1109
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--tertiary msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1110
+ With icon, disabled
1111
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1112
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1113
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1114
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1115
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Gray Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
1116
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1117
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1118
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1119
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span>&gt;</span>
1120
+ With icon, enabled
1121
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1122
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1123
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1124
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span>&gt;</span>
1125
+ With icon, hover
1126
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1127
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1128
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1129
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span>&gt;</span>
1130
+ With icon, active (pressed)
1131
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1132
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1133
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1134
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span>&gt;</span>
1135
+ With icon, focus
1136
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1137
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1138
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1139
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1140
+ With icon, disabled
1141
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1142
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1143
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1144
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1145
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1146
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1147
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1148
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
1149
+ With icon, enabled
1150
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1151
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1152
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1153
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
1154
+ With icon, hover
1155
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1156
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1157
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1158
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
1159
+ With icon, active (pressed)
1160
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1161
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1162
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1163
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span>&gt;</span>
1164
+ With icon, focus
1165
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1166
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1167
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1168
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1169
+ With icon, disabled
1170
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1171
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1172
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1173
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1174
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1175
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1176
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1177
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span>&gt;</span>
1178
+ With icon, enabled
1179
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1180
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1181
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1182
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span>&gt;</span>
1183
+ With icon, hover
1184
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1185
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1186
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1187
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span>&gt;</span>
1188
+ With icon, active (pressed)
1189
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1190
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1191
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1192
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span>&gt;</span>
1193
+ With icon, focus
1194
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1195
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1196
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1197
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--gray msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1198
+ With icon, disabled
1199
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1200
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1201
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1202
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1203
+ <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>Danger Button<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span>
1204
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Large<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1205
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1206
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1207
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span>&gt;</span>
1208
+ With icon, enabled
1209
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1210
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1211
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1212
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span>&gt;</span>
1213
+ With icon, hover
1214
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1215
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1216
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1217
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span>&gt;</span>
1218
+ With icon, active (pressed)
1219
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1220
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1221
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1222
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span>&gt;</span>
1223
+ With icon, focus
1224
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1225
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1226
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1227
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--lg "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1228
+ With icon, disabled
1229
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1230
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1231
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1232
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1233
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Medium<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1234
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1235
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1236
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
1237
+ With icon, enabled
1238
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1239
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1240
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1241
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
1242
+ With icon, hover
1243
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1244
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1245
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1246
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
1247
+ With icon, active (pressed)
1248
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1249
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1250
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1251
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span>&gt;</span>
1252
+ With icon, focus
1253
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1254
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1255
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1256
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1257
+ With icon, disabled
1258
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1259
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1260
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1261
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1262
+ <span class="hljs-tag">&lt;<span class="hljs-name">h3</span>&gt;</span>Small<span class="hljs-tag">&lt;/<span class="hljs-name">h3</span>&gt;</span>
1263
+ <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn-group--left"</span>&gt;</span>
1264
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span>&gt;</span>Enabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1265
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span>&gt;</span>
1266
+ With icon, enabled
1267
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1268
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1269
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span>&gt;</span>Hover<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1270
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span>&gt;</span>
1271
+ With icon, hover
1272
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1273
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1274
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span>&gt;</span>Active (pressed)<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1275
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span>&gt;</span>
1276
+ With icon, active (pressed)
1277
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1278
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1279
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span>&gt;</span>Focus<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1280
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span>&gt;</span>
1281
+ With icon, focus
1282
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1283
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1284
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm"</span> <span class="hljs-attr">disabled</span>&gt;</span>Disabled<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1285
+ <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">type</span>=<span class="hljs-string">"button"</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-btn msds-btn--danger msds-btn--sm "</span> <span class="hljs-attr">disabled</span>&gt;</span>
1286
+ With icon, disabled
1287
+ <span class="hljs-tag">&lt;<span class="hljs-name">svg</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"msds-icon"</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">use</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"</span></span></span><span class="hljs-template-variable">{{ path '/msds-spritemap.svg' }}</span><span class="xml"><span class="hljs-tag"><span class="hljs-string">#publish"</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">svg</span>&gt;</span>
1288
+ <span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span>
1289
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1290
+ <span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">br</span> /&gt;</span>
1291
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1292
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
1293
+ <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span></pre>
1294
+ </code>
1295
+ </div>
1296
+
1297
+
1298
+ <div class="Browser-panel Browser-code" data-role="tab-panel" id="browser-6ad3061e635613ff57c64cf20df4caab-panel-context">
1299
+ <code class="Code Code--lang-json hljs">
1300
+
1301
+
1302
+ <pre><span class="hljs-comment">/* No context defined for this component. */</span></pre>
1303
+
1304
+
1305
+ </code>
1306
+ </div>
1307
+
1308
+
1309
+ <div class="Browser-panel" data-role="tab-panel" id="browser-6ad3061e635613ff57c64cf20df4caab-panel-info">
1310
+ <ul class="Meta">
1311
+ <li class="Meta-item">
1312
+ <strong class="Meta-key">Handle:</strong>
1313
+ <span class="Meta-value">@buttons-overview</span>
1314
+ </li>
1315
+
1316
+
1317
+
1318
+
1319
+
1320
+ <li class="Meta-item">
1321
+ <strong class="Meta-key">Preview:</strong>
1322
+ <span class="Meta-value">
1323
+ <ul>
1324
+ <li><a data-no-pjax href="../preview/buttons-overview.html"><span>With layout</span> <svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg">
1325
+ <path d="M0 0h24v24H0z" fill="none"/>
1326
+ <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/>
1327
+ </svg>
1328
+ </a></li>
1329
+ <li><a data-no-pjax href="../render/buttons-overview.html"><span>Component only</span> <svg fill="#000000" height="22" viewBox="0 0 24 24" width="22" xmlns="http://www.w3.org/2000/svg">
1330
+ <path d="M0 0h24v24H0z" fill="none"/>
1331
+ <path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h4v-2H5V8h14v10h-4v2h4c1.1 0 2-.9 2-2V6c0-1.1-.89-2-2-2zm-7 6l-4 4h3v6h2v-6h3l-4-4z"/>
1332
+ </svg>
1333
+ </a></li>
1334
+ </ul>
1335
+ </span>
1336
+ </li>
1337
+ <li class="Meta-item">
1338
+ <strong class="Meta-key">Filesystem Path:</strong>
1339
+ <span class="Meta-value">components\_buttons\button\buttons-overview.hbs</span>
1340
+ </li>
1341
+
1342
+
1343
+ </ul>
1344
+ </div>
1345
+
1346
+
1347
+ <div class="Browser-panel Browser-notes" data-role="tab-panel" id="browser-6ad3061e635613ff57c64cf20df4caab-panel-notes">
1348
+ <div class="Prose Prose--condensed">
1349
+
1350
+ <p class="Browser-isEmptyNote">There are no notes for this item.</p>
1351
+
1352
+ </div>
1353
+ </div>
1354
+
1355
+
1356
+
1357
+ </div>
1358
+
1359
+ </div>
1360
+
1361
+
1362
+
1363
+
1364
+ </div>
1365
+
1366
+
1367
+ </div>
1368
+ </div>
1369
+
1370
+ <div class="Frame-handle" data-role="frame-resize-handle"></div>
1371
+
1372
+ <div class="Frame-panel Frame-panel--sidebar" data-role="sidebar">
1373
+ <nav class="Navigation">
1374
+
1375
+
1376
+ <div class="Navigation-group">
1377
+
1378
+ <div class="Tree" data-behaviour="tree" id="tree-components">
1379
+ <div class="Tree-header">
1380
+ <h3 class="Tree-title">components</h3>
1381
+
1382
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
1383
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg>
1384
+
1385
+ </button>
1386
+ </div>
1387
+ <ul class="Tree-items Tree-depth-1">
1388
+
1389
+
1390
+
1391
+
1392
+ <li class="Tree-item Tree-entity" data-role="item">
1393
+ <a class="Tree-entityLink" href="tab-tile.html" data-pjax>
1394
+ <span>Tab Tile</span>
1395
+
1396
+
1397
+ <div class="Status Status--unlabelled">
1398
+
1399
+ <div class="Status-dots">
1400
+
1401
+
1402
+ <span class="Status-dot" style="border-color: #FF9233;" title="WIP"></span>
1403
+
1404
+
1405
+ </div>
1406
+
1407
+ </div>
1408
+
1409
+
1410
+ </a>
1411
+ </li>
1412
+
1413
+
1414
+
1415
+ </ul>
1416
+ </div>
1417
+
1418
+ </div>
1419
+
1420
+
1421
+
1422
+
1423
+ <div class="Navigation-group">
1424
+
1425
+ <div class="Tree" data-behaviour="tree" id="tree-docs">
1426
+ <div class="Tree-header">
1427
+ <h3 class="Tree-title">documentation</h3>
1428
+
1429
+ <button type="button" data-behaviour="collapse-tree" class="Tree-collapse" title="Collapse tree" aria-label="Collapse tree" hidden>
1430
+ <svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m9 11c-.6 0-1 .4-1 1s.4 1 1 1h6c.6 0 1-.4 1-1s-.4-1-1-1z"/><path d="m19 21h-14c-1.1 0-2-.9-2-2v-14c0-1.1.9-2 2-2h14c1.1 0 2 .9 2 2v14c0 1.1-.9 2-2 2zm-14-16v14h14v-14z"/></svg>
1431
+
1432
+ </button>
1433
+ </div>
1434
+ <ul class="Tree-items Tree-depth-1">
1435
+
1436
+
1437
+
1438
+
1439
+ <li class="Tree-item Tree-entity" data-role="item">
1440
+ <a class="Tree-entityLink" href="../../index.html" data-pjax>
1441
+ <span>Overview</span>
1442
+
1443
+ </a>
1444
+ </li>
1445
+
1446
+
1447
+
1448
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-content">
1449
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-content-items">
1450
+ Content
1451
+ </button>
1452
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-content-items">
1453
+
1454
+
1455
+
1456
+
1457
+
1458
+
1459
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-icons">
1460
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-icons-items">
1461
+ Icons
1462
+ </button>
1463
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-icons-items">
1464
+
1465
+
1466
+
1467
+
1468
+
1469
+
1470
+
1471
+ <li class="Tree-item Tree-entity" data-role="item">
1472
+ <a class="Tree-entityLink" href="../../docs/content/icons/-overview.html" data-pjax>
1473
+ <span>Overview</span>
1474
+
1475
+ </a>
1476
+ </li>
1477
+
1478
+
1479
+
1480
+
1481
+ <li class="Tree-item Tree-entity" data-role="item">
1482
+ <a class="Tree-entityLink" href="../../docs/content/icons/icons-flat.html" data-pjax>
1483
+ <span>Icons Flat</span>
1484
+
1485
+ </a>
1486
+ </li>
1487
+
1488
+
1489
+
1490
+
1491
+ <li class="Tree-item Tree-entity" data-role="item">
1492
+ <a class="Tree-entityLink" href="../../docs/content/icons/icons-rich.html" data-pjax>
1493
+ <span>Icons Rich</span>
1494
+
1495
+ </a>
1496
+ </li>
1497
+
1498
+
1499
+
1500
+ </ul>
1501
+ </li>
1502
+
1503
+
1504
+
1505
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-typography">
1506
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-typography-items">
1507
+ Typography
1508
+ </button>
1509
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-typography-items">
1510
+
1511
+
1512
+
1513
+
1514
+
1515
+
1516
+
1517
+ <li class="Tree-item Tree-entity" data-role="item">
1518
+ <a class="Tree-entityLink" href="../../docs/content/typography/-overview.html" data-pjax>
1519
+ <span>Overview</span>
1520
+
1521
+ </a>
1522
+ </li>
1523
+
1524
+
1525
+
1526
+
1527
+ <li class="Tree-item Tree-entity" data-role="item">
1528
+ <a class="Tree-entityLink" href="../../docs/content/typography/font-colors.html" data-pjax>
1529
+ <span>Font Colors</span>
1530
+
1531
+ </a>
1532
+ </li>
1533
+
1534
+
1535
+
1536
+
1537
+ <li class="Tree-item Tree-entity" data-role="item">
1538
+ <a class="Tree-entityLink" href="../../docs/content/typography/links.html" data-pjax>
1539
+ <span>Links</span>
1540
+
1541
+ </a>
1542
+ </li>
1543
+
1544
+
1545
+
1546
+
1547
+ <li class="Tree-item Tree-entity" data-role="item">
1548
+ <a class="Tree-entityLink" href="../../docs/content/typography/lists.html" data-pjax>
1549
+ <span>Lists</span>
1550
+
1551
+ </a>
1552
+ </li>
1553
+
1554
+
1555
+
1556
+
1557
+ <li class="Tree-item Tree-entity" data-role="item">
1558
+ <a class="Tree-entityLink" href="../../docs/content/typography/text.html" data-pjax>
1559
+ <span>Text</span>
1560
+
1561
+ </a>
1562
+ </li>
1563
+
1564
+
1565
+
1566
+ </ul>
1567
+ </li>
1568
+
1569
+
1570
+
1571
+ </ul>
1572
+ </li>
1573
+
1574
+
1575
+
1576
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-component-documentation">
1577
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-component-documentation-items">
1578
+ Component Documentation
1579
+ </button>
1580
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-component-documentation-items">
1581
+
1582
+
1583
+
1584
+
1585
+
1586
+
1587
+
1588
+ <li class="Tree-item Tree-entity" data-role="item">
1589
+ <a class="Tree-entityLink" href="../../docs/component-documentation/alerts.html" data-pjax>
1590
+ <span>Alerts</span>
1591
+
1592
+ </a>
1593
+ </li>
1594
+
1595
+
1596
+
1597
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-buttons">
1598
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-buttons-items">
1599
+ Buttons
1600
+ </button>
1601
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-buttons-items">
1602
+
1603
+
1604
+
1605
+
1606
+
1607
+
1608
+
1609
+ <li class="Tree-item Tree-entity" data-role="item">
1610
+ <a class="Tree-entityLink" href="../../docs/component-documentation/buttons/buttons.html" data-pjax>
1611
+ <span>Buttons</span>
1612
+
1613
+ </a>
1614
+ </li>
1615
+
1616
+
1617
+
1618
+
1619
+ <li class="Tree-item Tree-entity" data-role="item">
1620
+ <a class="Tree-entityLink" href="../../docs/component-documentation/buttons/buttons-floating.html" data-pjax>
1621
+ <span>Buttons Floating</span>
1622
+
1623
+ </a>
1624
+ </li>
1625
+
1626
+
1627
+
1628
+ </ul>
1629
+ </li>
1630
+
1631
+
1632
+
1633
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-cards">
1634
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-cards-items">
1635
+ Cards
1636
+ </button>
1637
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-cards-items">
1638
+
1639
+
1640
+
1641
+
1642
+
1643
+
1644
+
1645
+ <li class="Tree-item Tree-entity" data-role="item">
1646
+ <a class="Tree-entityLink" href="../../docs/component-documentation/cards/basic-cards.html" data-pjax>
1647
+ <span>Basic Cards</span>
1648
+
1649
+ </a>
1650
+ </li>
1651
+
1652
+
1653
+
1654
+
1655
+ <li class="Tree-item Tree-entity" data-role="item">
1656
+ <a class="Tree-entityLink" href="../../docs/component-documentation/cards/category-cards.html" data-pjax>
1657
+ <span>Category Cards</span>
1658
+
1659
+ </a>
1660
+ </li>
1661
+
1662
+
1663
+
1664
+
1665
+ <li class="Tree-item Tree-entity" data-role="item">
1666
+ <a class="Tree-entityLink" href="../../docs/component-documentation/cards/contact-cards.html" data-pjax>
1667
+ <span>Contact Cards</span>
1668
+
1669
+ </a>
1670
+ </li>
1671
+
1672
+
1673
+
1674
+
1675
+ <li class="Tree-item Tree-entity" data-role="item">
1676
+ <a class="Tree-entityLink" href="../../docs/component-documentation/cards/generic-cards.html" data-pjax>
1677
+ <span>Generic Cards</span>
1678
+
1679
+ </a>
1680
+ </li>
1681
+
1682
+
1683
+
1684
+
1685
+ <li class="Tree-item Tree-entity" data-role="item">
1686
+ <a class="Tree-entityLink" href="../../docs/component-documentation/cards/solution-cards.html" data-pjax>
1687
+ <span>Solution Cards</span>
1688
+
1689
+ </a>
1690
+ </li>
1691
+
1692
+
1693
+
1694
+ </ul>
1695
+ </li>
1696
+
1697
+
1698
+
1699
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-dividers">
1700
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-dividers-items">
1701
+ Dividers
1702
+ </button>
1703
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-dividers-items">
1704
+
1705
+
1706
+
1707
+
1708
+
1709
+
1710
+
1711
+ <li class="Tree-item Tree-entity" data-role="item">
1712
+ <a class="Tree-entityLink" href="../../docs/component-documentation/dividers/dividers.html" data-pjax>
1713
+ <span>Dividers</span>
1714
+
1715
+ </a>
1716
+ </li>
1717
+
1718
+
1719
+
1720
+ </ul>
1721
+ </li>
1722
+
1723
+
1724
+
1725
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-expanding-components">
1726
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-expanding-components-items">
1727
+ Expanding Components
1728
+ </button>
1729
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-expanding-components-items">
1730
+
1731
+
1732
+
1733
+
1734
+
1735
+
1736
+
1737
+ <li class="Tree-item Tree-entity" data-role="item">
1738
+ <a class="Tree-entityLink" href="../../docs/component-documentation/expanding-components/accordion.html" data-pjax>
1739
+ <span>Accordion</span>
1740
+
1741
+ </a>
1742
+ </li>
1743
+
1744
+
1745
+
1746
+
1747
+ <li class="Tree-item Tree-entity" data-role="item">
1748
+ <a class="Tree-entityLink" href="../../docs/component-documentation/expanding-components/section.html" data-pjax>
1749
+ <span>Section</span>
1750
+
1751
+ </a>
1752
+ </li>
1753
+
1754
+
1755
+
1756
+ </ul>
1757
+ </li>
1758
+
1759
+
1760
+
1761
+
1762
+ <li class="Tree-item Tree-entity" data-role="item">
1763
+ <a class="Tree-entityLink" href="../../docs/component-documentation/modal.html" data-pjax>
1764
+ <span>Modal</span>
1765
+
1766
+ </a>
1767
+ </li>
1768
+
1769
+
1770
+
1771
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-popover">
1772
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-popover-items">
1773
+ Popover
1774
+ </button>
1775
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-popover-items">
1776
+
1777
+
1778
+
1779
+
1780
+
1781
+
1782
+
1783
+ <li class="Tree-item Tree-entity" data-role="item">
1784
+ <a class="Tree-entityLink" href="../../docs/component-documentation/popover/popover.html" data-pjax>
1785
+ <span>Popover</span>
1786
+
1787
+ </a>
1788
+ </li>
1789
+
1790
+
1791
+
1792
+ </ul>
1793
+ </li>
1794
+
1795
+
1796
+
1797
+
1798
+ <li class="Tree-item Tree-entity" data-role="item">
1799
+ <a class="Tree-entityLink" href="../../docs/component-documentation/progress-bar.html" data-pjax>
1800
+ <span>Progress Bar</span>
1801
+
1802
+ </a>
1803
+ </li>
1804
+
1805
+
1806
+
1807
+
1808
+ <li class="Tree-item Tree-entity" data-role="item">
1809
+ <a class="Tree-entityLink" href="../../docs/component-documentation/spacing.html" data-pjax>
1810
+ <span>Spacing</span>
1811
+
1812
+ </a>
1813
+ </li>
1814
+
1815
+
1816
+
1817
+
1818
+ <li class="Tree-item Tree-entity" data-role="item">
1819
+ <a class="Tree-entityLink" href="../../docs/component-documentation/table.html" data-pjax>
1820
+ <span>Table</span>
1821
+
1822
+ </a>
1823
+ </li>
1824
+
1825
+
1826
+
1827
+ </ul>
1828
+ </li>
1829
+
1830
+
1831
+
1832
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-forms">
1833
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-forms-items">
1834
+ Forms
1835
+ </button>
1836
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-forms-items">
1837
+
1838
+
1839
+
1840
+
1841
+
1842
+
1843
+
1844
+ <li class="Tree-item Tree-entity" data-role="item">
1845
+ <a class="Tree-entityLink" href="../../docs/forms/-overview.html" data-pjax>
1846
+ <span>Overview</span>
1847
+
1848
+ </a>
1849
+ </li>
1850
+
1851
+
1852
+
1853
+
1854
+ <li class="Tree-item Tree-entity" data-role="item">
1855
+ <a class="Tree-entityLink" href="../../docs/forms/checkbox.html" data-pjax>
1856
+ <span>Checkbox</span>
1857
+
1858
+ </a>
1859
+ </li>
1860
+
1861
+
1862
+
1863
+
1864
+ <li class="Tree-item Tree-entity" data-role="item">
1865
+ <a class="Tree-entityLink" href="../../docs/forms/drop-down-list.html" data-pjax>
1866
+ <span>Drop Down List</span>
1867
+
1868
+ </a>
1869
+ </li>
1870
+
1871
+
1872
+
1873
+
1874
+ <li class="Tree-item Tree-entity" data-role="item">
1875
+ <a class="Tree-entityLink" href="../../docs/forms/input-field.html" data-pjax>
1876
+ <span>Input Field</span>
1877
+
1878
+ </a>
1879
+ </li>
1880
+
1881
+
1882
+
1883
+
1884
+ <li class="Tree-item Tree-entity" data-role="item">
1885
+ <a class="Tree-entityLink" href="../../docs/forms/radio-button.html" data-pjax>
1886
+ <span>Radio Button</span>
1887
+
1888
+ </a>
1889
+ </li>
1890
+
1891
+
1892
+
1893
+
1894
+ <li class="Tree-item Tree-entity" data-role="item">
1895
+ <a class="Tree-entityLink" href="../../docs/forms/switch.html" data-pjax>
1896
+ <span>Switch</span>
1897
+
1898
+ </a>
1899
+ </li>
1900
+
1901
+
1902
+
1903
+
1904
+ <li class="Tree-item Tree-entity" data-role="item">
1905
+ <a class="Tree-entityLink" href="../../docs/forms/text-area.html" data-pjax>
1906
+ <span>Text Area</span>
1907
+
1908
+ </a>
1909
+ </li>
1910
+
1911
+
1912
+
1913
+ </ul>
1914
+ </li>
1915
+
1916
+
1917
+
1918
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-utilities">
1919
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-utilities-items">
1920
+ Utilities
1921
+ </button>
1922
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-utilities-items">
1923
+
1924
+
1925
+
1926
+
1927
+
1928
+
1929
+ <li class="Tree-item Tree-collection Tree-depth-3" data-behaviour="collection" id="tree-docs-collection-colors">
1930
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-colors-items">
1931
+ Colors
1932
+ </button>
1933
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-colors-items">
1934
+
1935
+
1936
+
1937
+
1938
+
1939
+
1940
+
1941
+ <li class="Tree-item Tree-entity" data-role="item">
1942
+ <a class="Tree-entityLink" href="../../docs/utilities/colors/overview.html" data-pjax>
1943
+ <span>Overview</span>
1944
+
1945
+ </a>
1946
+ </li>
1947
+
1948
+
1949
+
1950
+
1951
+ <li class="Tree-item Tree-entity" data-role="item">
1952
+ <a class="Tree-entityLink" href="../../docs/utilities/colors/font-colors.html" data-pjax>
1953
+ <span>Font Colors</span>
1954
+
1955
+ </a>
1956
+ </li>
1957
+
1958
+
1959
+
1960
+
1961
+ <li class="Tree-item Tree-entity" data-role="item">
1962
+ <a class="Tree-entityLink" href="../../docs/utilities/colors/background-colors.html" data-pjax>
1963
+ <span>Background Colors</span>
1964
+
1965
+ </a>
1966
+ </li>
1967
+
1968
+
1969
+
1970
+ </ul>
1971
+ </li>
1972
+
1973
+
1974
+
1975
+
1976
+ <li class="Tree-item Tree-entity" data-role="item">
1977
+ <a class="Tree-entityLink" href="../../docs/utilities/spacing.html" data-pjax>
1978
+ <span>Spacing</span>
1979
+
1980
+ </a>
1981
+ </li>
1982
+
1983
+
1984
+
1985
+ </ul>
1986
+ </li>
1987
+
1988
+
1989
+
1990
+ <li class="Tree-item Tree-collection Tree-depth-2" data-behaviour="collection" id="tree-docs-collection-guidelines-and-guides">
1991
+ <button class="Tree-collectionLabel" data-role="toggle" aria-expanded="true" aria-controls="tree-docs-collection-guidelines-and-guides-items">
1992
+ Guidelines And Guides
1993
+ </button>
1994
+ <ul class="Tree-collectionItems" data-role="items" id="tree-docs-collection-guidelines-and-guides-items">
1995
+
1996
+
1997
+
1998
+
1999
+
2000
+
2001
+
2002
+ <li class="Tree-item Tree-entity" data-role="item">
2003
+ <a class="Tree-entityLink" href="../../docs/guidelines-and-guides/creating-a-new-release.html" data-pjax>
2004
+ <span>Creating A New Release</span>
2005
+
2006
+ </a>
2007
+ </li>
2008
+
2009
+
2010
+
2011
+
2012
+ <li class="Tree-item Tree-entity" data-role="item">
2013
+ <a class="Tree-entityLink" href="../../docs/guidelines-and-guides/css-and-scss-guidelines.html" data-pjax>
2014
+ <span>Css And Scss Guidelines</span>
2015
+
2016
+ </a>
2017
+ </li>
2018
+
2019
+
2020
+
2021
+
2022
+ <li class="Tree-item Tree-entity" data-role="item">
2023
+ <a class="Tree-entityLink" href="../../docs/guidelines-and-guides/git-cheat-sheet.html" data-pjax>
2024
+ <span>Git Cheat Sheet</span>
2025
+
2026
+ </a>
2027
+ </li>
2028
+
2029
+
2030
+
2031
+
2032
+ <li class="Tree-item Tree-entity" data-role="item">
2033
+ <a class="Tree-entityLink" href="../../docs/guidelines-and-guides/installation-and-usage.html" data-pjax>
2034
+ <span>Installation And Usage</span>
2035
+
2036
+ </a>
2037
+ </li>
2038
+
2039
+
2040
+
2041
+ </ul>
2042
+ </li>
2043
+
2044
+
2045
+
2046
+ </ul>
2047
+ </div>
2048
+
2049
+ </div>
2050
+
2051
+
2052
+
2053
+ </nav>
2054
+
2055
+ </div>
2056
+ </div>
2057
+ </div>
2058
+
2059
+
2060
+
2061
+
2062
+ <script src="../../themes/mandelbrot/js/mandelbrot.js?cachebust=1.4.0"></script>
2063
+
2064
+ <script src="../../design-system.js?cachebust=1.4.0"></script>
2065
+
2066
+
2067
+
2068
+ </body>
2069
+ </html>