@patternfly/patternfly 6.5.0-prerelease.8 → 6.5.0-prerelease.81

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 (410) hide show
  1. package/README.md +2 -2
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/Felt-Bkg-Generic-Dark.svg +82 -0
  4. package/assets/images/Felt-Bkg-Generic-Light.svg +82 -0
  5. package/assets/images/PF-Bkg-Generic-Dark.svg +76 -0
  6. package/assets/images/PF-Bkg-Generic-Light.svg +74 -0
  7. package/assets/images/RHAiExperienceIcon.svg +27 -0
  8. package/assets/images/RHAutomationsLogo.svg +96 -0
  9. package/assets/images/RHServerStackIcon.svg +16 -0
  10. package/assets/images/compass--hero-bg.png +0 -0
  11. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  12. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  13. package/assets/images/compass--wallpaper-dark.jpg +0 -0
  14. package/assets/images/compass--wallpaper-dark.png +0 -0
  15. package/assets/images/compass--wallpaper-light.jpg +0 -0
  16. package/assets/images/compass--wallpaper-light.png +0 -0
  17. package/assets/images/glass-brand-dark.jpg +0 -0
  18. package/assets/images/glass-brand-dark.png +0 -0
  19. package/assets/images/glass-brand-light.jpg +0 -0
  20. package/assets/images/glass-brand-light.png +0 -0
  21. package/base/normalize.scss +7 -0
  22. package/base/patternfly-common.css +50 -0
  23. package/base/patternfly-common.scss +59 -0
  24. package/base/patternfly-svg-icons.css +17 -0
  25. package/base/patternfly-svg-icons.scss +20 -0
  26. package/base/patternfly-variables.css +926 -513
  27. package/base/patternfly-variables.scss +46 -4
  28. package/base/tokens/tokens-dark.scss +56 -8
  29. package/base/tokens/tokens-default.scss +69 -14
  30. package/base/tokens/tokens-glass-dark.scss +26 -0
  31. package/base/tokens/tokens-glass.scss +22 -0
  32. package/base/tokens/tokens-local.scss +17 -0
  33. package/base/tokens/tokens-palette.scss +3 -1
  34. package/base/tokens/tokens-redhat-dark.scss +21 -0
  35. package/base/tokens/tokens-redhat-glass-dark.scss +40 -0
  36. package/base/tokens/tokens-redhat-glass.scss +30 -0
  37. package/base/tokens/tokens-redhat-highcontrast-dark.scss +50 -0
  38. package/base/tokens/tokens-redhat-highcontrast.scss +128 -0
  39. package/base/tokens/tokens-redhat.scss +15 -0
  40. package/components/AboutModalBox/about-modal-box.css +36 -26
  41. package/components/Accordion/accordion.css +26 -14
  42. package/components/Accordion/accordion.scss +12 -2
  43. package/components/ActionList/action-list.css +2 -0
  44. package/components/ActionList/action-list.scss +2 -0
  45. package/components/Alert/alert.css +7 -5
  46. package/components/Alert/alert.scss +2 -1
  47. package/components/Avatar/avatar.css +12 -4
  48. package/components/BackgroundImage/background-image.css +6 -3
  49. package/components/Banner/banner.css +12 -6
  50. package/components/Banner/banner.scss +7 -0
  51. package/components/Brand/brand.css +3 -1
  52. package/components/Breadcrumb/breadcrumb.css +10 -5
  53. package/components/Breadcrumb/breadcrumb.scss +6 -2
  54. package/components/Button/button.css +173 -71
  55. package/components/Button/button.scss +188 -72
  56. package/components/CalendarMonth/calendar-month.css +4 -3
  57. package/components/Card/card.css +51 -15
  58. package/components/Card/card.scss +65 -9
  59. package/components/ClipboardCopy/clipboard-copy.css +14 -7
  60. package/components/ClipboardCopy/clipboard-copy.scss +13 -4
  61. package/components/CodeEditor/code-editor.css +2 -2
  62. package/components/CodeEditor/code-editor.scss +2 -2
  63. package/components/Compass/compass.css +399 -0
  64. package/components/Compass/compass.scss +413 -0
  65. package/components/DataList/data-list.css +30 -23
  66. package/components/DataList/data-list.scss +3 -2
  67. package/components/DescriptionList/description-list-order.scss +5 -1
  68. package/components/DescriptionList/description-list.css +7 -5
  69. package/components/DescriptionList/description-list.scss +5 -1
  70. package/components/Divider/divider.css +7 -5
  71. package/components/Drawer/drawer.css +224 -75
  72. package/components/Drawer/drawer.scss +194 -27
  73. package/components/DualListSelector/dual-list-selector.css +18 -12
  74. package/components/DualListSelector/dual-list-selector.scss +1 -1
  75. package/components/ExpandableSection/expandable-section.css +21 -16
  76. package/components/ExpandableSection/expandable-section.scss +6 -3
  77. package/components/Form/form.css +2 -2
  78. package/components/Form/form.scss +2 -2
  79. package/components/FormControl/form-control.css +3 -3
  80. package/components/FormControl/form-control.scss +3 -3
  81. package/components/Hero/hero.css +74 -0
  82. package/components/Hero/hero.scss +86 -0
  83. package/components/JumpLinks/jump-links.css +16 -5
  84. package/components/JumpLinks/jump-links.scss +17 -3
  85. package/components/Label/label-group.css +2 -2
  86. package/components/Label/label-group.scss +2 -2
  87. package/components/Label/label.css +4 -3
  88. package/components/Login/login.css +58 -40
  89. package/components/Login/login.scss +7 -3
  90. package/components/Masthead/masthead.css +111 -16
  91. package/components/Masthead/masthead.scss +111 -1
  92. package/components/Menu/menu.css +49 -33
  93. package/components/Menu/menu.scss +26 -19
  94. package/components/MenuToggle/menu-toggle.css +35 -8
  95. package/components/MenuToggle/menu-toggle.scss +42 -8
  96. package/components/ModalBox/modal-box.css +9 -7
  97. package/components/ModalBox/modal-box.scss +2 -2
  98. package/components/Nav/nav.css +82 -11
  99. package/components/Nav/nav.scss +85 -5
  100. package/components/NotificationDrawer/notification-drawer.css +19 -9
  101. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  102. package/components/OverflowMenu/overflow-menu.css +16 -0
  103. package/components/OverflowMenu/overflow-menu.scss +20 -1
  104. package/components/Page/page.css +421 -32
  105. package/components/Page/page.scss +397 -15
  106. package/components/Pagination/pagination.css +56 -4
  107. package/components/Pagination/pagination.scss +71 -6
  108. package/components/Panel/panel.css +41 -3
  109. package/components/Panel/panel.scss +56 -3
  110. package/components/Progress/progress.css +3 -1
  111. package/components/Progress/progress.scss +3 -1
  112. package/components/ProgressStepper/progress-stepper.scss +5 -1
  113. package/components/Sidebar/sidebar.css +1 -1
  114. package/components/Sidebar/sidebar.scss +7 -3
  115. package/components/Skeleton/skeleton.css +16 -15
  116. package/components/Slider/slider.css +32 -18
  117. package/components/Switch/switch.css +4 -2
  118. package/components/Switch/switch.scss +1 -1
  119. package/components/Table/table-grid.css +28 -36
  120. package/components/Table/table-grid.scss +4 -4
  121. package/components/Table/table-scrollable.css +1 -1
  122. package/components/Table/table-scrollable.scss +1 -1
  123. package/components/Table/table-tree-view.css +4 -2
  124. package/components/Table/table.css +104 -57
  125. package/components/Table/table.scss +92 -37
  126. package/components/Tabs/tabs.css +39 -33
  127. package/components/Tabs/tabs.scss +38 -26
  128. package/components/TextInputGroup/text-input-group.css +2 -2
  129. package/components/TextInputGroup/text-input-group.scss +2 -2
  130. package/components/ToggleGroup/toggle-group.css +44 -19
  131. package/components/ToggleGroup/toggle-group.scss +51 -22
  132. package/components/Toolbar/toolbar.css +195 -16
  133. package/components/Toolbar/toolbar.scss +89 -9
  134. package/components/TreeView/tree-view.css +45 -14
  135. package/components/TreeView/tree-view.scss +32 -1
  136. package/components/Wizard/wizard.css +41 -19
  137. package/components/Wizard/wizard.scss +26 -6
  138. package/components/_index.css +2740 -829
  139. package/components/_index.scss +3 -1
  140. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  141. package/docs/components/Accordion/examples/Accordion.md +392 -30
  142. package/docs/components/ActionList/examples/ActionList.md +143 -11
  143. package/docs/components/Alert/examples/Alert.md +678 -54
  144. package/docs/components/Avatar/examples/Avatar.md +4 -4
  145. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  146. package/docs/components/Banner/examples/Banner.md +196 -5
  147. package/docs/components/Brand/examples/Brand.md +2 -2
  148. package/docs/components/Breadcrumb/examples/Breadcrumb.md +313 -26
  149. package/docs/components/Button/examples/Button.md +2829 -333
  150. package/docs/components/CalendarMonth/examples/CalendarMonth.md +156 -12
  151. package/docs/components/Card/examples/Card.md +335 -12
  152. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +293 -28
  153. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  154. package/docs/components/CodeEditor/examples/CodeEditor.md +234 -18
  155. package/docs/components/Compass/examples/Compass.css +8 -0
  156. package/docs/components/Compass/examples/Compass.md +109 -0
  157. package/docs/components/DataList/examples/DataList.md +468 -78
  158. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  159. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  160. package/docs/components/Divider/examples/Divider.md +2 -2
  161. package/docs/components/DragDrop/examples/DragDrop.css +1 -1
  162. package/docs/components/Drawer/examples/Drawer.md +415 -35
  163. package/docs/components/DualListSelector/examples/DualListSelector.md +1247 -161
  164. package/docs/components/EmptyState/examples/EmptyState.md +78 -6
  165. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  166. package/docs/components/Form/examples/Form.md +78 -6
  167. package/docs/components/Hero/examples/Hero.md +25 -0
  168. package/docs/components/Hint/examples/Hint.md +39 -3
  169. package/docs/components/Icon/examples/Icon.md +105 -9
  170. package/docs/components/InlineEdit/examples/InlineEdit.md +338 -26
  171. package/docs/components/InputGroup/examples/InputGroup.md +40 -4
  172. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  173. package/docs/components/Label/examples/Label.md +2834 -218
  174. package/docs/components/Login/examples/Login.md +39 -3
  175. package/docs/components/Masthead/examples/masthead.md +80 -1
  176. package/docs/components/Menu/examples/Menu.md +1679 -133
  177. package/docs/components/MenuToggle/examples/MenuToggle.md +1514 -118
  178. package/docs/components/ModalBox/examples/ModalBox.md +289 -25
  179. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  180. package/docs/components/Nav/examples/Navigation.md +898 -62
  181. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +1079 -83
  182. package/docs/components/OverflowMenu/examples/overflow-menu.css +6 -3
  183. package/docs/components/OverflowMenu/examples/overflow-menu.md +164 -11
  184. package/docs/components/Page/examples/Page.md +211 -25
  185. package/docs/components/Pagination/examples/Pagination.md +1291 -80
  186. package/docs/components/Panel/examples/Panel.css +3 -0
  187. package/docs/components/Panel/examples/Panel.md +71 -4
  188. package/docs/components/Popover/examples/Popover.md +286 -22
  189. package/docs/components/Progress/examples/Progress.md +91 -7
  190. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  191. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  192. package/docs/components/Slider/examples/Slider.md +52 -4
  193. package/docs/components/Table/examples/Table.css +2 -1
  194. package/docs/components/Table/examples/Table.md +7543 -653
  195. package/docs/components/Tabs/examples/Tabs.md +5734 -471
  196. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  197. package/docs/components/ToggleGroup/examples/toggle-group.md +261 -15
  198. package/docs/components/Toolbar/examples/Toolbar.css +1 -1
  199. package/docs/components/Toolbar/examples/Toolbar.md +1145 -88
  200. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  201. package/docs/components/Wizard/examples/Wizard.md +828 -73
  202. package/docs/demos/AboutModal/examples/AboutModal.md +158 -53
  203. package/docs/demos/Alert/examples/Alert.md +539 -164
  204. package/docs/demos/BackToTop/examples/BackToTop.md +158 -53
  205. package/docs/demos/Banner/examples/Banner.md +290 -104
  206. package/docs/demos/Button/examples/Button.md +13 -1
  207. package/docs/demos/Card/examples/Card.md +1041 -134
  208. package/docs/demos/CardView/examples/CardView.md +570 -171
  209. package/docs/demos/Compass/examples/Compass.md +10005 -0
  210. package/docs/demos/Dashboard/examples/Dashboard.md +745 -177
  211. package/docs/demos/DataList/examples/DataList.md +1301 -292
  212. package/docs/demos/DescriptionList/examples/DescriptionList.md +472 -160
  213. package/docs/demos/Drawer/examples/Drawer.md +718 -262
  214. package/docs/demos/Form/examples/BasicForms.md +273 -21
  215. package/docs/demos/JumpLinks/examples/JumpLinks.md +862 -319
  216. package/docs/demos/Masthead/examples/Masthead.md +1119 -489
  217. package/docs/demos/Modal/examples/Modal.md +948 -321
  218. package/docs/demos/Nav/examples/Nav.md +3449 -499
  219. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +2418 -405
  220. package/docs/demos/Page/examples/Page.md +2137 -773
  221. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  222. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  223. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1913 -504
  224. package/docs/demos/Skeleton/examples/Skeleton.md +145 -52
  225. package/docs/demos/Table/examples/Table.md +11807 -2275
  226. package/docs/demos/Tabs/examples/Tabs.md +1117 -337
  227. package/docs/demos/Toolbar/examples/Toolbar.md +1818 -286
  228. package/docs/demos/Wizard/examples/Wizard.md +1705 -526
  229. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  230. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  231. package/docs/layouts/Flex/examples/Flex.css +3 -3
  232. package/docs/layouts/Flex/examples/Flex.md +3 -2
  233. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  234. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  235. package/docs/layouts/Grid/examples/Grid.css +1 -1
  236. package/docs/layouts/Grid/examples/Grid.md +6 -5
  237. package/docs/layouts/Level/examples/Level.css +3 -3
  238. package/docs/layouts/Level/examples/Level.md +2 -1
  239. package/docs/layouts/Split/examples/Split.css +1 -1
  240. package/docs/layouts/Split/examples/Split.md +2 -1
  241. package/docs/layouts/Stack/examples/Stack.css +3 -3
  242. package/docs/layouts/Stack/examples/Stack.md +2 -1
  243. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  244. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  245. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  246. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  247. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  248. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  249. package/docs/utilities/Display/examples/Display.css +1 -1
  250. package/docs/utilities/Display/examples/Display.md +3 -2
  251. package/docs/utilities/Flex/examples/Flex.css +7 -7
  252. package/docs/utilities/Flex/examples/Flex.md +3 -2
  253. package/docs/utilities/Float/examples/Float.css +2 -2
  254. package/docs/utilities/Float/examples/Float.md +3 -2
  255. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  256. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  257. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  258. package/docs/utilities/Text/examples/Text.md +5 -4
  259. package/icons/PfIcons/add-circle-o.svg +4 -0
  260. package/icons/PfIcons/ansible-tower.svg +4 -0
  261. package/icons/PfIcons/applications.svg +4 -0
  262. package/icons/PfIcons/arrow.svg +4 -0
  263. package/icons/PfIcons/asleep.svg +4 -0
  264. package/icons/PfIcons/attention-bell.svg +4 -0
  265. package/icons/PfIcons/automation.svg +4 -0
  266. package/icons/PfIcons/bell.svg +4 -0
  267. package/icons/PfIcons/blueprint.svg +4 -0
  268. package/icons/PfIcons/build.svg +4 -0
  269. package/icons/PfIcons/builder-image.svg +4 -0
  270. package/icons/PfIcons/bundle.svg +4 -0
  271. package/icons/PfIcons/catalog.svg +4 -0
  272. package/icons/PfIcons/chat.svg +4 -0
  273. package/icons/PfIcons/close.svg +4 -0
  274. package/icons/PfIcons/cloud-security.svg +4 -0
  275. package/icons/PfIcons/cloud-tenant.svg +4 -0
  276. package/icons/PfIcons/cluster.svg +4 -0
  277. package/icons/PfIcons/connected.svg +4 -0
  278. package/icons/PfIcons/container-node.svg +4 -0
  279. package/icons/PfIcons/cpu.svg +4 -0
  280. package/icons/PfIcons/critical-risk.svg +4 -0
  281. package/icons/PfIcons/data-processor.svg +4 -0
  282. package/icons/PfIcons/data-sink.svg +4 -0
  283. package/icons/PfIcons/data-source.svg +4 -0
  284. package/icons/PfIcons/degraded.svg +4 -0
  285. package/icons/PfIcons/disconnected.svg +4 -0
  286. package/icons/PfIcons/domain.svg +4 -0
  287. package/icons/PfIcons/edit.svg +4 -0
  288. package/icons/PfIcons/enhancement.svg +4 -0
  289. package/icons/PfIcons/enterprise.svg +4 -0
  290. package/icons/PfIcons/equalizer.svg +4 -0
  291. package/icons/PfIcons/error-circle-o.svg +4 -0
  292. package/icons/PfIcons/export.svg +4 -0
  293. package/icons/PfIcons/filter.svg +4 -0
  294. package/icons/PfIcons/flavor.svg +4 -0
  295. package/icons/PfIcons/folder-close.svg +4 -0
  296. package/icons/PfIcons/folder-open.svg +4 -0
  297. package/icons/PfIcons/globe-route.svg +4 -0
  298. package/icons/PfIcons/help.svg +4 -0
  299. package/icons/PfIcons/history.svg +4 -0
  300. package/icons/PfIcons/home.svg +4 -0
  301. package/icons/PfIcons/import.svg +4 -0
  302. package/icons/PfIcons/in-progress.svg +4 -0
  303. package/icons/PfIcons/info.svg +4 -0
  304. package/icons/PfIcons/infrastructure.svg +4 -0
  305. package/icons/PfIcons/integration.svg +4 -0
  306. package/icons/PfIcons/key.svg +4 -0
  307. package/icons/PfIcons/locked.svg +4 -0
  308. package/icons/PfIcons/maintenance.svg +4 -0
  309. package/icons/PfIcons/memory.svg +4 -0
  310. package/icons/PfIcons/messages.svg +4 -0
  311. package/icons/PfIcons/middleware.svg +4 -0
  312. package/icons/PfIcons/migration.svg +4 -0
  313. package/icons/PfIcons/module.svg +4 -0
  314. package/icons/PfIcons/monitoring.svg +4 -0
  315. package/icons/PfIcons/multicluster.svg +4 -0
  316. package/icons/PfIcons/namespaces.svg +4 -0
  317. package/icons/PfIcons/network.svg +4 -0
  318. package/icons/PfIcons/new-process.svg +4 -0
  319. package/icons/PfIcons/not-started.svg +4 -0
  320. package/icons/PfIcons/off.svg +4 -0
  321. package/icons/PfIcons/ok.svg +4 -0
  322. package/icons/PfIcons/on-running.svg +4 -0
  323. package/icons/PfIcons/on.svg +4 -0
  324. package/icons/PfIcons/open-drawer-right.svg +4 -0
  325. package/icons/PfIcons/openshift.svg +4 -0
  326. package/icons/PfIcons/openstack.svg +4 -0
  327. package/icons/PfIcons/optimize.svg +4 -0
  328. package/icons/PfIcons/orders.svg +4 -0
  329. package/icons/PfIcons/os-image.svg +4 -0
  330. package/icons/PfIcons/package.svg +4 -0
  331. package/icons/PfIcons/panel-close.svg +4 -0
  332. package/icons/PfIcons/panel-open.svg +4 -0
  333. package/icons/PfIcons/paused.svg +4 -0
  334. package/icons/PfIcons/pending.svg +4 -0
  335. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  336. package/icons/PfIcons/pficon-history.svg +4 -0
  337. package/icons/PfIcons/pficon-network-range.svg +4 -0
  338. package/icons/PfIcons/pficon-satellite.svg +4 -0
  339. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  340. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  341. package/icons/PfIcons/pficon-template.svg +4 -0
  342. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  343. package/icons/PfIcons/plugged.svg +4 -0
  344. package/icons/PfIcons/port.svg +4 -0
  345. package/icons/PfIcons/print.svg +4 -0
  346. package/icons/PfIcons/private.svg +4 -0
  347. package/icons/PfIcons/process-automation.svg +4 -0
  348. package/icons/PfIcons/project.svg +4 -0
  349. package/icons/PfIcons/rebalance.svg +4 -0
  350. package/icons/PfIcons/rebooting.svg +4 -0
  351. package/icons/PfIcons/regions.svg +4 -0
  352. package/icons/PfIcons/registry.svg +4 -0
  353. package/icons/PfIcons/remove2.svg +4 -0
  354. package/icons/PfIcons/replicator.svg +4 -0
  355. package/icons/PfIcons/repository.svg +4 -0
  356. package/icons/PfIcons/resource-pool.svg +4 -0
  357. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  358. package/icons/PfIcons/resources-almost-full.svg +4 -0
  359. package/icons/PfIcons/resources-empty.svg +4 -0
  360. package/icons/PfIcons/resources-full.svg +4 -0
  361. package/icons/PfIcons/running.svg +4 -0
  362. package/icons/PfIcons/save.svg +4 -0
  363. package/icons/PfIcons/screen.svg +4 -0
  364. package/icons/PfIcons/security.svg +4 -0
  365. package/icons/PfIcons/server-group.svg +4 -0
  366. package/icons/PfIcons/server.svg +4 -0
  367. package/icons/PfIcons/service-catalog.svg +4 -0
  368. package/icons/PfIcons/service.svg +4 -0
  369. package/icons/PfIcons/services.svg +4 -0
  370. package/icons/PfIcons/severity-critical.svg +4 -0
  371. package/icons/PfIcons/severity-important.svg +4 -0
  372. package/icons/PfIcons/severity-minor.svg +4 -0
  373. package/icons/PfIcons/severity-moderate.svg +4 -0
  374. package/icons/PfIcons/severity-none.svg +4 -0
  375. package/icons/PfIcons/severity-undefined.svg +4 -0
  376. package/icons/PfIcons/spinner.svg +4 -0
  377. package/icons/PfIcons/spinner2.svg +4 -0
  378. package/icons/PfIcons/storage-domain.svg +4 -0
  379. package/icons/PfIcons/task.svg +4 -0
  380. package/icons/PfIcons/tenant.svg +4 -0
  381. package/icons/PfIcons/thumb-tack.svg +4 -0
  382. package/icons/PfIcons/topology.svg +4 -0
  383. package/icons/PfIcons/treeview.svg +4 -0
  384. package/icons/PfIcons/trend-down.svg +4 -0
  385. package/icons/PfIcons/trend-up.svg +4 -0
  386. package/icons/PfIcons/unknown.svg +4 -0
  387. package/icons/PfIcons/unlocked.svg +4 -0
  388. package/icons/PfIcons/unplugged.svg +4 -0
  389. package/icons/PfIcons/user.svg +4 -0
  390. package/icons/PfIcons/users.svg +4 -0
  391. package/icons/PfIcons/virtual-machine.svg +4 -0
  392. package/icons/PfIcons/volume.svg +4 -0
  393. package/icons/PfIcons/warning-triangle.svg +4 -0
  394. package/icons/PfIcons/zone.svg +4 -0
  395. package/layouts/Flex/flex.scss +83 -19
  396. package/layouts/Gallery/gallery.css +6 -2
  397. package/layouts/_index.css +6 -2
  398. package/package.json +55 -17
  399. package/patternfly-base-no-globals.css +969 -489
  400. package/patternfly-base.css +976 -489
  401. package/patternfly-charts.css +3 -3
  402. package/patternfly-no-globals.css +3623 -1194
  403. package/patternfly.css +3630 -1194
  404. package/patternfly.min.css +1 -1
  405. package/patternfly.min.css.map +1 -1
  406. package/patternfly.scss +48 -0
  407. package/sass-utilities/functions.scss +32 -25
  408. package/sass-utilities/mixins.scss +54 -23
  409. package/sass-utilities/namespaces-components.scss +6 -0
  410. package/sass-utilities/scss-variables.scss +3 -0
package/docs/components/Button/examples/Button.md CHANGED
@@ -50,8 +50,39 @@ cssPrefix: pf-v6-c-button
50
50
 
51
51
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
52
52
  <span class="pf-v6-c-button__icon">
53
- <i class="fas fa-times" aria-hidden="true"></i>
53
+ <svg
54
+ class="pf-v6-svg"
55
+ viewBox="0 0 20 20"
56
+ fill="currentColor"
57
+ aria-hidden="true"
58
+ role="img"
59
+ width="1em"
60
+ height="1em"
61
+ >
62
+ <path
63
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
64
+ />
65
+ </svg>
66
+ </span>
67
+ </button>
68
+
69
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
70
+ <span class="pf-v6-c-button__icon pf-m-start">
71
+ <svg
72
+ class="pf-v6-svg"
73
+ viewBox="0 0 20 20"
74
+ fill="currentColor"
75
+ aria-hidden="true"
76
+ role="img"
77
+ width="1em"
78
+ height="1em"
79
+ >
80
+ <path
81
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
82
+ />
83
+ </svg>
54
84
  </span>
85
+ <span class="pf-v6-c-button__text">Plain with text</span>
55
86
  </button>
56
87
 
57
88
  <br />
@@ -67,7 +98,19 @@ cssPrefix: pf-v6-c-button
67
98
  aria-label="Copy input"
68
99
  >
69
100
  <span class="pf-v6-c-button__icon">
70
- <i class="fas fa-copy" aria-hidden="true"></i>
101
+ <svg
102
+ class="pf-v6-svg"
103
+ viewBox="0 0 32 32"
104
+ fill="currentColor"
105
+ aria-hidden="true"
106
+ role="img"
107
+ width="1em"
108
+ height="1em"
109
+ >
110
+ <path
111
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
112
+ />
113
+ </svg>
71
114
  </span>
72
115
  </button>
73
116
 
@@ -79,42 +122,114 @@ cssPrefix: pf-v6-c-button
79
122
  </div>
80
123
  <button class="pf-v6-c-button pf-m-primary" type="button">
81
124
  <span class="pf-v6-c-button__icon pf-m-start">
82
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
125
+ <svg
126
+ class="pf-v6-svg"
127
+ viewBox="0 0 32 32"
128
+ fill="currentColor"
129
+ aria-hidden="true"
130
+ role="img"
131
+ width="1em"
132
+ height="1em"
133
+ >
134
+ <path
135
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
136
+ />
137
+ </svg>
83
138
  </span>
84
139
  <span class="pf-v6-c-button__text">Primary</span>
85
140
  </button>
86
141
 
87
142
  <button class="pf-v6-c-button pf-m-secondary" type="button">
88
143
  <span class="pf-v6-c-button__icon pf-m-start">
89
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
144
+ <svg
145
+ class="pf-v6-svg"
146
+ viewBox="0 0 32 32"
147
+ fill="currentColor"
148
+ aria-hidden="true"
149
+ role="img"
150
+ width="1em"
151
+ height="1em"
152
+ >
153
+ <path
154
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
155
+ />
156
+ </svg>
90
157
  </span>
91
158
  <span class="pf-v6-c-button__text">Secondary</span>
92
159
  </button>
93
160
 
94
161
  <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
95
162
  <span class="pf-v6-c-button__icon pf-m-start">
96
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
163
+ <svg
164
+ class="pf-v6-svg"
165
+ viewBox="0 0 32 32"
166
+ fill="currentColor"
167
+ aria-hidden="true"
168
+ role="img"
169
+ width="1em"
170
+ height="1em"
171
+ >
172
+ <path
173
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
174
+ />
175
+ </svg>
97
176
  </span>
98
177
  <span class="pf-v6-c-button__text">Secondary danger</span>
99
178
  </button>
100
179
 
101
180
  <button class="pf-v6-c-button pf-m-tertiary" type="button">
102
181
  <span class="pf-v6-c-button__icon pf-m-start">
103
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
182
+ <svg
183
+ class="pf-v6-svg"
184
+ viewBox="0 0 32 32"
185
+ fill="currentColor"
186
+ aria-hidden="true"
187
+ role="img"
188
+ width="1em"
189
+ height="1em"
190
+ >
191
+ <path
192
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
193
+ />
194
+ </svg>
104
195
  </span>
105
196
  <span class="pf-v6-c-button__text">Tertiary</span>
106
197
  </button>
107
198
 
108
199
  <button class="pf-v6-c-button pf-m-danger" type="button">
109
200
  <span class="pf-v6-c-button__icon pf-m-start">
110
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
201
+ <svg
202
+ class="pf-v6-svg"
203
+ viewBox="0 0 32 32"
204
+ fill="currentColor"
205
+ aria-hidden="true"
206
+ role="img"
207
+ width="1em"
208
+ height="1em"
209
+ >
210
+ <path
211
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
212
+ />
213
+ </svg>
111
214
  </span>
112
215
  <span class="pf-v6-c-button__text">Danger</span>
113
216
  </button>
114
217
 
115
218
  <button class="pf-v6-c-button pf-m-warning" type="button">
116
219
  <span class="pf-v6-c-button__icon pf-m-start">
117
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
220
+ <svg
221
+ class="pf-v6-svg"
222
+ viewBox="0 0 32 32"
223
+ fill="currentColor"
224
+ aria-hidden="true"
225
+ role="img"
226
+ width="1em"
227
+ height="1em"
228
+ >
229
+ <path
230
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
231
+ />
232
+ </svg>
118
233
  </span>
119
234
  <span class="pf-v6-c-button__text">Warning</span>
120
235
  </button>
@@ -124,29 +239,96 @@ cssPrefix: pf-v6-c-button
124
239
 
125
240
  <button class="pf-v6-c-button pf-m-link" type="button">
126
241
  <span class="pf-v6-c-button__icon pf-m-start">
127
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
242
+ <svg
243
+ class="pf-v6-svg"
244
+ viewBox="0 0 32 32"
245
+ fill="currentColor"
246
+ aria-hidden="true"
247
+ role="img"
248
+ width="1em"
249
+ height="1em"
250
+ >
251
+ <path
252
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
253
+ />
254
+ </svg>
128
255
  </span>
129
256
  <span class="pf-v6-c-button__text">Link</span>
130
257
  </button>
131
258
 
132
259
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
133
260
  <span class="pf-v6-c-button__icon pf-m-start">
134
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
261
+ <svg
262
+ class="pf-v6-svg"
263
+ viewBox="0 0 32 32"
264
+ fill="currentColor"
265
+ aria-hidden="true"
266
+ role="img"
267
+ width="1em"
268
+ height="1em"
269
+ >
270
+ <path
271
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
272
+ />
273
+ </svg>
135
274
  </span>
136
275
  <span class="pf-v6-c-button__text">Link danger</span>
137
276
  </button>
138
277
 
139
278
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
140
279
  <span class="pf-v6-c-button__icon pf-m-start">
141
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
280
+ <svg
281
+ class="pf-v6-svg"
282
+ viewBox="0 0 32 32"
283
+ fill="currentColor"
284
+ aria-hidden="true"
285
+ role="img"
286
+ width="1em"
287
+ height="1em"
288
+ >
289
+ <path
290
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
291
+ />
292
+ </svg>
142
293
  </span>
143
294
  <span class="pf-v6-c-button__text">Inline link</span>
144
295
  </button>
145
296
 
146
297
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
147
298
  <span class="pf-v6-c-button__icon">
148
- <i class="fas fa-times" aria-hidden="true"></i>
299
+ <svg
300
+ class="pf-v6-svg"
301
+ viewBox="0 0 20 20"
302
+ fill="currentColor"
303
+ aria-hidden="true"
304
+ role="img"
305
+ width="1em"
306
+ height="1em"
307
+ >
308
+ <path
309
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
310
+ />
311
+ </svg>
312
+ </span>
313
+ </button>
314
+
315
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
316
+ <span class="pf-v6-c-button__icon pf-m-start">
317
+ <svg
318
+ class="pf-v6-svg"
319
+ viewBox="0 0 20 20"
320
+ fill="currentColor"
321
+ aria-hidden="true"
322
+ role="img"
323
+ width="1em"
324
+ height="1em"
325
+ >
326
+ <path
327
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
328
+ />
329
+ </svg>
149
330
  </span>
331
+ <span class="pf-v6-c-button__text">Plain with text</span>
150
332
  </button>
151
333
 
152
334
  <br />
@@ -154,7 +336,19 @@ cssPrefix: pf-v6-c-button
154
336
 
155
337
  <button class="pf-v6-c-button pf-m-control" type="button">
156
338
  <span class="pf-v6-c-button__icon pf-m-start">
157
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
339
+ <svg
340
+ class="pf-v6-svg"
341
+ viewBox="0 0 32 32"
342
+ fill="currentColor"
343
+ aria-hidden="true"
344
+ role="img"
345
+ width="1em"
346
+ height="1em"
347
+ >
348
+ <path
349
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
350
+ />
351
+ </svg>
158
352
  </span>
159
353
  <span class="pf-v6-c-button__text">Control</span>
160
354
  </button>
@@ -165,7 +359,19 @@ cssPrefix: pf-v6-c-button
165
359
  aria-label="Copy input"
166
360
  >
167
361
  <span class="pf-v6-c-button__icon">
168
- <i class="fas fa-copy" aria-hidden="true"></i>
362
+ <svg
363
+ class="pf-v6-svg"
364
+ viewBox="0 0 32 32"
365
+ fill="currentColor"
366
+ aria-hidden="true"
367
+ role="img"
368
+ width="1em"
369
+ height="1em"
370
+ >
371
+ <path
372
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
373
+ />
374
+ </svg>
169
375
  </span>
170
376
  </button>
171
377
 
@@ -178,42 +384,114 @@ cssPrefix: pf-v6-c-button
178
384
  <button class="pf-v6-c-button pf-m-primary" type="button">
179
385
  <span class="pf-v6-c-button__text">Primary</span>
180
386
  <span class="pf-v6-c-button__icon pf-m-end">
181
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
387
+ <svg
388
+ class="pf-v6-svg"
389
+ viewBox="0 0 32 32"
390
+ fill="currentColor"
391
+ aria-hidden="true"
392
+ role="img"
393
+ width="1em"
394
+ height="1em"
395
+ >
396
+ <path
397
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
398
+ />
399
+ </svg>
182
400
  </span>
183
401
  </button>
184
402
 
185
403
  <button class="pf-v6-c-button pf-m-secondary" type="button">
186
404
  <span class="pf-v6-c-button__text">Secondary</span>
187
405
  <span class="pf-v6-c-button__icon pf-m-end">
188
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
406
+ <svg
407
+ class="pf-v6-svg"
408
+ viewBox="0 0 32 32"
409
+ fill="currentColor"
410
+ aria-hidden="true"
411
+ role="img"
412
+ width="1em"
413
+ height="1em"
414
+ >
415
+ <path
416
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
417
+ />
418
+ </svg>
189
419
  </span>
190
420
  </button>
191
421
 
192
422
  <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
193
423
  <span class="pf-v6-c-button__text">Secondary danger</span>
194
424
  <span class="pf-v6-c-button__icon pf-m-end">
195
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
425
+ <svg
426
+ class="pf-v6-svg"
427
+ viewBox="0 0 32 32"
428
+ fill="currentColor"
429
+ aria-hidden="true"
430
+ role="img"
431
+ width="1em"
432
+ height="1em"
433
+ >
434
+ <path
435
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
436
+ />
437
+ </svg>
196
438
  </span>
197
439
  </button>
198
440
 
199
441
  <button class="pf-v6-c-button pf-m-tertiary" type="button">
200
442
  <span class="pf-v6-c-button__text">Tertiary</span>
201
443
  <span class="pf-v6-c-button__icon pf-m-end">
202
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
444
+ <svg
445
+ class="pf-v6-svg"
446
+ viewBox="0 0 32 32"
447
+ fill="currentColor"
448
+ aria-hidden="true"
449
+ role="img"
450
+ width="1em"
451
+ height="1em"
452
+ >
453
+ <path
454
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
455
+ />
456
+ </svg>
203
457
  </span>
204
458
  </button>
205
459
 
206
460
  <button class="pf-v6-c-button pf-m-danger" type="button">
207
461
  <span class="pf-v6-c-button__text">Danger</span>
208
462
  <span class="pf-v6-c-button__icon pf-m-end">
209
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
463
+ <svg
464
+ class="pf-v6-svg"
465
+ viewBox="0 0 32 32"
466
+ fill="currentColor"
467
+ aria-hidden="true"
468
+ role="img"
469
+ width="1em"
470
+ height="1em"
471
+ >
472
+ <path
473
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
474
+ />
475
+ </svg>
210
476
  </span>
211
477
  </button>
212
478
 
213
479
  <button class="pf-v6-c-button pf-m-warning" type="button">
214
480
  <span class="pf-v6-c-button__text">Warning</span>
215
481
  <span class="pf-v6-c-button__icon pf-m-end">
216
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
482
+ <svg
483
+ class="pf-v6-svg"
484
+ viewBox="0 0 32 32"
485
+ fill="currentColor"
486
+ aria-hidden="true"
487
+ role="img"
488
+ width="1em"
489
+ height="1em"
490
+ >
491
+ <path
492
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
493
+ />
494
+ </svg>
217
495
  </span>
218
496
  </button>
219
497
 
@@ -223,27 +501,94 @@ cssPrefix: pf-v6-c-button
223
501
  <button class="pf-v6-c-button pf-m-link" type="button">
224
502
  <span class="pf-v6-c-button__text">Link</span>
225
503
  <span class="pf-v6-c-button__icon pf-m-end">
226
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
227
- </span>
228
- </button>
229
-
230
- <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
504
+ <svg
505
+ class="pf-v6-svg"
506
+ viewBox="0 0 32 32"
507
+ fill="currentColor"
508
+ aria-hidden="true"
509
+ role="img"
510
+ width="1em"
511
+ height="1em"
512
+ >
513
+ <path
514
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
515
+ />
516
+ </svg>
517
+ </span>
518
+ </button>
519
+
520
+ <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
231
521
  <span class="pf-v6-c-button__text">Link danger</span>
232
522
  <span class="pf-v6-c-button__icon pf-m-end">
233
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
523
+ <svg
524
+ class="pf-v6-svg"
525
+ viewBox="0 0 32 32"
526
+ fill="currentColor"
527
+ aria-hidden="true"
528
+ role="img"
529
+ width="1em"
530
+ height="1em"
531
+ >
532
+ <path
533
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
534
+ />
535
+ </svg>
234
536
  </span>
235
537
  </button>
236
538
 
237
539
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
238
540
  <span class="pf-v6-c-button__text">Inline link</span>
239
541
  <span class="pf-v6-c-button__icon pf-m-end">
240
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
542
+ <svg
543
+ class="pf-v6-svg"
544
+ viewBox="0 0 32 32"
545
+ fill="currentColor"
546
+ aria-hidden="true"
547
+ role="img"
548
+ width="1em"
549
+ height="1em"
550
+ >
551
+ <path
552
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
553
+ />
554
+ </svg>
241
555
  </span>
242
556
  </button>
243
557
 
244
558
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
245
559
  <span class="pf-v6-c-button__icon">
246
- <i class="fas fa-times" aria-hidden="true"></i>
560
+ <svg
561
+ class="pf-v6-svg"
562
+ viewBox="0 0 20 20"
563
+ fill="currentColor"
564
+ aria-hidden="true"
565
+ role="img"
566
+ width="1em"
567
+ height="1em"
568
+ >
569
+ <path
570
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
571
+ />
572
+ </svg>
573
+ </span>
574
+ </button>
575
+
576
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
577
+ <span class="pf-v6-c-button__text">Plain with text</span>
578
+ <span class="pf-v6-c-button__icon pf-m-end">
579
+ <svg
580
+ class="pf-v6-svg"
581
+ viewBox="0 0 20 20"
582
+ fill="currentColor"
583
+ aria-hidden="true"
584
+ role="img"
585
+ width="1em"
586
+ height="1em"
587
+ >
588
+ <path
589
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
590
+ />
591
+ </svg>
247
592
  </span>
248
593
  </button>
249
594
 
@@ -253,7 +598,19 @@ cssPrefix: pf-v6-c-button
253
598
  <button class="pf-v6-c-button pf-m-control" type="button">
254
599
  <span class="pf-v6-c-button__text">Control</span>
255
600
  <span class="pf-v6-c-button__icon pf-m-end">
256
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
601
+ <svg
602
+ class="pf-v6-svg"
603
+ viewBox="0 0 32 32"
604
+ fill="currentColor"
605
+ aria-hidden="true"
606
+ role="img"
607
+ width="1em"
608
+ height="1em"
609
+ >
610
+ <path
611
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
612
+ />
613
+ </svg>
257
614
  </span>
258
615
  </button>
259
616
 
@@ -263,7 +620,19 @@ cssPrefix: pf-v6-c-button
263
620
  aria-label="Copy input"
264
621
  >
265
622
  <span class="pf-v6-c-button__icon">
266
- <i class="fas fa-copy" aria-hidden="true"></i>
623
+ <svg
624
+ class="pf-v6-svg"
625
+ viewBox="0 0 32 32"
626
+ fill="currentColor"
627
+ aria-hidden="true"
628
+ role="img"
629
+ width="1em"
630
+ height="1em"
631
+ >
632
+ <path
633
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
634
+ />
635
+ </svg>
267
636
  </span>
268
637
  </button>
269
638
 
@@ -320,8 +689,43 @@ cssPrefix: pf-v6-c-button
320
689
  aria-label="Remove"
321
690
  >
322
691
  <span class="pf-v6-c-button__icon">
323
- <i class="fas fa-times" aria-hidden="true"></i>
692
+ <svg
693
+ class="pf-v6-svg"
694
+ viewBox="0 0 20 20"
695
+ fill="currentColor"
696
+ aria-hidden="true"
697
+ role="img"
698
+ width="1em"
699
+ height="1em"
700
+ >
701
+ <path
702
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
703
+ />
704
+ </svg>
705
+ </span>
706
+ </button>
707
+
708
+ <button
709
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
710
+ type="button"
711
+ aria-label="Remove"
712
+ >
713
+ <span class="pf-v6-c-button__icon pf-m-start">
714
+ <svg
715
+ class="pf-v6-svg"
716
+ viewBox="0 0 20 20"
717
+ fill="currentColor"
718
+ aria-hidden="true"
719
+ role="img"
720
+ width="1em"
721
+ height="1em"
722
+ >
723
+ <path
724
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
725
+ />
726
+ </svg>
324
727
  </span>
728
+ <span class="pf-v6-c-button__text">Plain with text</span>
325
729
  </button>
326
730
 
327
731
  <br />
@@ -337,7 +741,19 @@ cssPrefix: pf-v6-c-button
337
741
  aria-label="Copy input"
338
742
  >
339
743
  <span class="pf-v6-c-button__icon">
340
- <i class="fas fa-copy" aria-hidden="true"></i>
744
+ <svg
745
+ class="pf-v6-svg"
746
+ viewBox="0 0 32 32"
747
+ fill="currentColor"
748
+ aria-hidden="true"
749
+ role="img"
750
+ width="1em"
751
+ height="1em"
752
+ >
753
+ <path
754
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
755
+ />
756
+ </svg>
341
757
  </span>
342
758
  </button>
343
759
 
@@ -349,14 +765,38 @@ cssPrefix: pf-v6-c-button
349
765
  </div>
350
766
  <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
351
767
  <span class="pf-v6-c-button__icon pf-m-start">
352
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
768
+ <svg
769
+ class="pf-v6-svg"
770
+ viewBox="0 0 32 32"
771
+ fill="currentColor"
772
+ aria-hidden="true"
773
+ role="img"
774
+ width="1em"
775
+ height="1em"
776
+ >
777
+ <path
778
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
779
+ />
780
+ </svg>
353
781
  </span>
354
782
  <span class="pf-v6-c-button__text">Primary</span>
355
783
  </button>
356
784
 
357
785
  <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
358
786
  <span class="pf-v6-c-button__icon pf-m-start">
359
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
787
+ <svg
788
+ class="pf-v6-svg"
789
+ viewBox="0 0 32 32"
790
+ fill="currentColor"
791
+ aria-hidden="true"
792
+ role="img"
793
+ width="1em"
794
+ height="1em"
795
+ >
796
+ <path
797
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
798
+ />
799
+ </svg>
360
800
  </span>
361
801
  <span class="pf-v6-c-button__text">Secondary</span>
362
802
  </button>
@@ -366,28 +806,76 @@ cssPrefix: pf-v6-c-button
366
806
  type="button"
367
807
  >
368
808
  <span class="pf-v6-c-button__icon pf-m-start">
369
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
809
+ <svg
810
+ class="pf-v6-svg"
811
+ viewBox="0 0 32 32"
812
+ fill="currentColor"
813
+ aria-hidden="true"
814
+ role="img"
815
+ width="1em"
816
+ height="1em"
817
+ >
818
+ <path
819
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
820
+ />
821
+ </svg>
370
822
  </span>
371
823
  <span class="pf-v6-c-button__text">Secondary danger</span>
372
824
  </button>
373
825
 
374
826
  <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
375
827
  <span class="pf-v6-c-button__icon pf-m-start">
376
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
828
+ <svg
829
+ class="pf-v6-svg"
830
+ viewBox="0 0 32 32"
831
+ fill="currentColor"
832
+ aria-hidden="true"
833
+ role="img"
834
+ width="1em"
835
+ height="1em"
836
+ >
837
+ <path
838
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
839
+ />
840
+ </svg>
377
841
  </span>
378
842
  <span class="pf-v6-c-button__text">Tertiary</span>
379
843
  </button>
380
844
 
381
845
  <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
382
846
  <span class="pf-v6-c-button__icon pf-m-start">
383
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
847
+ <svg
848
+ class="pf-v6-svg"
849
+ viewBox="0 0 32 32"
850
+ fill="currentColor"
851
+ aria-hidden="true"
852
+ role="img"
853
+ width="1em"
854
+ height="1em"
855
+ >
856
+ <path
857
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
858
+ />
859
+ </svg>
384
860
  </span>
385
861
  <span class="pf-v6-c-button__text">Danger</span>
386
862
  </button>
387
863
 
388
864
  <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
389
865
  <span class="pf-v6-c-button__icon pf-m-start">
390
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
866
+ <svg
867
+ class="pf-v6-svg"
868
+ viewBox="0 0 32 32"
869
+ fill="currentColor"
870
+ aria-hidden="true"
871
+ role="img"
872
+ width="1em"
873
+ height="1em"
874
+ >
875
+ <path
876
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
877
+ />
878
+ </svg>
391
879
  </span>
392
880
  <span class="pf-v6-c-button__text">Warning</span>
393
881
  </button>
@@ -397,21 +885,57 @@ cssPrefix: pf-v6-c-button
397
885
 
398
886
  <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
399
887
  <span class="pf-v6-c-button__icon pf-m-start">
400
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
888
+ <svg
889
+ class="pf-v6-svg"
890
+ viewBox="0 0 32 32"
891
+ fill="currentColor"
892
+ aria-hidden="true"
893
+ role="img"
894
+ width="1em"
895
+ height="1em"
896
+ >
897
+ <path
898
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
899
+ />
900
+ </svg>
401
901
  </span>
402
902
  <span class="pf-v6-c-button__text">Link</span>
403
903
  </button>
404
904
 
405
905
  <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
406
906
  <span class="pf-v6-c-button__icon pf-m-start">
407
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
907
+ <svg
908
+ class="pf-v6-svg"
909
+ viewBox="0 0 32 32"
910
+ fill="currentColor"
911
+ aria-hidden="true"
912
+ role="img"
913
+ width="1em"
914
+ height="1em"
915
+ >
916
+ <path
917
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
918
+ />
919
+ </svg>
408
920
  </span>
409
921
  <span class="pf-v6-c-button__text">Link danger</span>
410
922
  </button>
411
923
 
412
924
  <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
413
925
  <span class="pf-v6-c-button__icon pf-m-start">
414
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
926
+ <svg
927
+ class="pf-v6-svg"
928
+ viewBox="0 0 32 32"
929
+ fill="currentColor"
930
+ aria-hidden="true"
931
+ role="img"
932
+ width="1em"
933
+ height="1em"
934
+ >
935
+ <path
936
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
937
+ />
938
+ </svg>
415
939
  </span>
416
940
  <span class="pf-v6-c-button__text">Inline link</span>
417
941
  </button>
@@ -422,31 +946,90 @@ cssPrefix: pf-v6-c-button
422
946
  aria-label="Remove"
423
947
  >
424
948
  <span class="pf-v6-c-button__icon">
425
- <i class="fas fa-times" aria-hidden="true"></i>
426
- </span>
427
- </button>
428
-
429
- <br />
430
- <br />
431
-
432
- <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
433
- <span class="pf-v6-c-button__icon pf-m-start">
434
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
949
+ <svg
950
+ class="pf-v6-svg"
951
+ viewBox="0 0 20 20"
952
+ fill="currentColor"
953
+ aria-hidden="true"
954
+ role="img"
955
+ width="1em"
956
+ height="1em"
957
+ >
958
+ <path
959
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
960
+ />
961
+ </svg>
435
962
  </span>
436
- <span class="pf-v6-c-button__text">Control</span>
437
963
  </button>
438
964
 
439
965
  <button
440
- class="pf-v6-c-button pf-m-clicked pf-m-control"
966
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
441
967
  type="button"
442
- aria-label="Copy input"
968
+ aria-label="Remove"
443
969
  >
444
- <span class="pf-v6-c-button__icon">
445
- <i class="fas fa-copy" aria-hidden="true"></i>
446
- </span>
447
- </button>
448
-
449
- <br />
970
+ <span class="pf-v6-c-button__icon pf-m-start">
971
+ <svg
972
+ class="pf-v6-svg"
973
+ viewBox="0 0 20 20"
974
+ fill="currentColor"
975
+ aria-hidden="true"
976
+ role="img"
977
+ width="1em"
978
+ height="1em"
979
+ >
980
+ <path
981
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
982
+ />
983
+ </svg>
984
+ </span>
985
+ <span class="pf-v6-c-button__text">Plain with text</span>
986
+ </button>
987
+
988
+ <br />
989
+ <br />
990
+
991
+ <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
992
+ <span class="pf-v6-c-button__icon pf-m-start">
993
+ <svg
994
+ class="pf-v6-svg"
995
+ viewBox="0 0 32 32"
996
+ fill="currentColor"
997
+ aria-hidden="true"
998
+ role="img"
999
+ width="1em"
1000
+ height="1em"
1001
+ >
1002
+ <path
1003
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1004
+ />
1005
+ </svg>
1006
+ </span>
1007
+ <span class="pf-v6-c-button__text">Control</span>
1008
+ </button>
1009
+
1010
+ <button
1011
+ class="pf-v6-c-button pf-m-clicked pf-m-control"
1012
+ type="button"
1013
+ aria-label="Copy input"
1014
+ >
1015
+ <span class="pf-v6-c-button__icon">
1016
+ <svg
1017
+ class="pf-v6-svg"
1018
+ viewBox="0 0 32 32"
1019
+ fill="currentColor"
1020
+ aria-hidden="true"
1021
+ role="img"
1022
+ width="1em"
1023
+ height="1em"
1024
+ >
1025
+ <path
1026
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1027
+ />
1028
+ </svg>
1029
+ </span>
1030
+ </button>
1031
+
1032
+ <br />
450
1033
  <br />
451
1034
 
452
1035
  <div>
@@ -455,14 +1038,38 @@ cssPrefix: pf-v6-c-button
455
1038
  <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
456
1039
  <span class="pf-v6-c-button__text">Primary</span>
457
1040
  <span class="pf-v6-c-button__icon pf-m-end">
458
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1041
+ <svg
1042
+ class="pf-v6-svg"
1043
+ viewBox="0 0 32 32"
1044
+ fill="currentColor"
1045
+ aria-hidden="true"
1046
+ role="img"
1047
+ width="1em"
1048
+ height="1em"
1049
+ >
1050
+ <path
1051
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1052
+ />
1053
+ </svg>
459
1054
  </span>
460
1055
  </button>
461
1056
 
462
1057
  <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
463
1058
  <span class="pf-v6-c-button__text">Secondary</span>
464
1059
  <span class="pf-v6-c-button__icon pf-m-end">
465
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1060
+ <svg
1061
+ class="pf-v6-svg"
1062
+ viewBox="0 0 32 32"
1063
+ fill="currentColor"
1064
+ aria-hidden="true"
1065
+ role="img"
1066
+ width="1em"
1067
+ height="1em"
1068
+ >
1069
+ <path
1070
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1071
+ />
1072
+ </svg>
466
1073
  </span>
467
1074
  </button>
468
1075
 
@@ -472,28 +1079,76 @@ cssPrefix: pf-v6-c-button
472
1079
  >
473
1080
  <span class="pf-v6-c-button__text">Secondary danger</span>
474
1081
  <span class="pf-v6-c-button__icon pf-m-end">
475
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1082
+ <svg
1083
+ class="pf-v6-svg"
1084
+ viewBox="0 0 32 32"
1085
+ fill="currentColor"
1086
+ aria-hidden="true"
1087
+ role="img"
1088
+ width="1em"
1089
+ height="1em"
1090
+ >
1091
+ <path
1092
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1093
+ />
1094
+ </svg>
476
1095
  </span>
477
1096
  </button>
478
1097
 
479
1098
  <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
480
1099
  <span class="pf-v6-c-button__text">Tertiary</span>
481
1100
  <span class="pf-v6-c-button__icon pf-m-end">
482
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1101
+ <svg
1102
+ class="pf-v6-svg"
1103
+ viewBox="0 0 32 32"
1104
+ fill="currentColor"
1105
+ aria-hidden="true"
1106
+ role="img"
1107
+ width="1em"
1108
+ height="1em"
1109
+ >
1110
+ <path
1111
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1112
+ />
1113
+ </svg>
483
1114
  </span>
484
1115
  </button>
485
1116
 
486
1117
  <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
487
1118
  <span class="pf-v6-c-button__text">Danger</span>
488
1119
  <span class="pf-v6-c-button__icon pf-m-end">
489
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1120
+ <svg
1121
+ class="pf-v6-svg"
1122
+ viewBox="0 0 32 32"
1123
+ fill="currentColor"
1124
+ aria-hidden="true"
1125
+ role="img"
1126
+ width="1em"
1127
+ height="1em"
1128
+ >
1129
+ <path
1130
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1131
+ />
1132
+ </svg>
490
1133
  </span>
491
1134
  </button>
492
1135
 
493
1136
  <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
494
1137
  <span class="pf-v6-c-button__text">Warning</span>
495
1138
  <span class="pf-v6-c-button__icon pf-m-end">
496
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1139
+ <svg
1140
+ class="pf-v6-svg"
1141
+ viewBox="0 0 32 32"
1142
+ fill="currentColor"
1143
+ aria-hidden="true"
1144
+ role="img"
1145
+ width="1em"
1146
+ height="1em"
1147
+ >
1148
+ <path
1149
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1150
+ />
1151
+ </svg>
497
1152
  </span>
498
1153
  </button>
499
1154
 
@@ -503,21 +1158,57 @@ cssPrefix: pf-v6-c-button
503
1158
  <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
504
1159
  <span class="pf-v6-c-button__text">Link</span>
505
1160
  <span class="pf-v6-c-button__icon pf-m-end">
506
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1161
+ <svg
1162
+ class="pf-v6-svg"
1163
+ viewBox="0 0 32 32"
1164
+ fill="currentColor"
1165
+ aria-hidden="true"
1166
+ role="img"
1167
+ width="1em"
1168
+ height="1em"
1169
+ >
1170
+ <path
1171
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1172
+ />
1173
+ </svg>
507
1174
  </span>
508
1175
  </button>
509
1176
 
510
1177
  <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
511
1178
  <span class="pf-v6-c-button__text">Link danger</span>
512
1179
  <span class="pf-v6-c-button__icon pf-m-end">
513
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1180
+ <svg
1181
+ class="pf-v6-svg"
1182
+ viewBox="0 0 32 32"
1183
+ fill="currentColor"
1184
+ aria-hidden="true"
1185
+ role="img"
1186
+ width="1em"
1187
+ height="1em"
1188
+ >
1189
+ <path
1190
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1191
+ />
1192
+ </svg>
514
1193
  </span>
515
1194
  </button>
516
1195
 
517
1196
  <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
518
1197
  <span class="pf-v6-c-button__text">Inline link</span>
519
1198
  <span class="pf-v6-c-button__icon pf-m-end">
520
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1199
+ <svg
1200
+ class="pf-v6-svg"
1201
+ viewBox="0 0 32 32"
1202
+ fill="currentColor"
1203
+ aria-hidden="true"
1204
+ role="img"
1205
+ width="1em"
1206
+ height="1em"
1207
+ >
1208
+ <path
1209
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1210
+ />
1211
+ </svg>
521
1212
  </span>
522
1213
  </button>
523
1214
 
@@ -527,7 +1218,42 @@ cssPrefix: pf-v6-c-button
527
1218
  aria-label="Remove"
528
1219
  >
529
1220
  <span class="pf-v6-c-button__icon">
530
- <i class="fas fa-times" aria-hidden="true"></i>
1221
+ <svg
1222
+ class="pf-v6-svg"
1223
+ viewBox="0 0 20 20"
1224
+ fill="currentColor"
1225
+ aria-hidden="true"
1226
+ role="img"
1227
+ width="1em"
1228
+ height="1em"
1229
+ >
1230
+ <path
1231
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1232
+ />
1233
+ </svg>
1234
+ </span>
1235
+ </button>
1236
+
1237
+ <button
1238
+ class="pf-v6-c-button pf-m-clicked pf-m-plain"
1239
+ type="button"
1240
+ aria-label="Remove"
1241
+ >
1242
+ <span class="pf-v6-c-button__text">Plain with text</span>
1243
+ <span class="pf-v6-c-button__icon pf-m-end">
1244
+ <svg
1245
+ class="pf-v6-svg"
1246
+ viewBox="0 0 20 20"
1247
+ fill="currentColor"
1248
+ aria-hidden="true"
1249
+ role="img"
1250
+ width="1em"
1251
+ height="1em"
1252
+ >
1253
+ <path
1254
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1255
+ />
1256
+ </svg>
531
1257
  </span>
532
1258
  </button>
533
1259
 
@@ -537,7 +1263,19 @@ cssPrefix: pf-v6-c-button
537
1263
  <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
538
1264
  <span class="pf-v6-c-button__text">Control</span>
539
1265
  <span class="pf-v6-c-button__icon pf-m-end">
540
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1266
+ <svg
1267
+ class="pf-v6-svg"
1268
+ viewBox="0 0 32 32"
1269
+ fill="currentColor"
1270
+ aria-hidden="true"
1271
+ role="img"
1272
+ width="1em"
1273
+ height="1em"
1274
+ >
1275
+ <path
1276
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1277
+ />
1278
+ </svg>
541
1279
  </span>
542
1280
  </button>
543
1281
 
@@ -547,7 +1285,19 @@ cssPrefix: pf-v6-c-button
547
1285
  aria-label="Copy input"
548
1286
  >
549
1287
  <span class="pf-v6-c-button__icon">
550
- <i class="fas fa-copy" aria-hidden="true"></i>
1288
+ <svg
1289
+ class="pf-v6-svg"
1290
+ viewBox="0 0 32 32"
1291
+ fill="currentColor"
1292
+ aria-hidden="true"
1293
+ role="img"
1294
+ width="1em"
1295
+ height="1em"
1296
+ >
1297
+ <path
1298
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1299
+ />
1300
+ </svg>
551
1301
  </span>
552
1302
  </button>
553
1303
 
@@ -604,8 +1354,43 @@ cssPrefix: pf-v6-c-button
604
1354
  aria-label="Remove"
605
1355
  >
606
1356
  <span class="pf-v6-c-button__icon">
607
- <i class="fas fa-times" aria-hidden="true"></i>
1357
+ <svg
1358
+ class="pf-v6-svg"
1359
+ viewBox="0 0 20 20"
1360
+ fill="currentColor"
1361
+ aria-hidden="true"
1362
+ role="img"
1363
+ width="1em"
1364
+ height="1em"
1365
+ >
1366
+ <path
1367
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1368
+ />
1369
+ </svg>
1370
+ </span>
1371
+ </button>
1372
+
1373
+ <button
1374
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1375
+ type="button"
1376
+ aria-label="Remove"
1377
+ >
1378
+ <span class="pf-v6-c-button__icon pf-m-start">
1379
+ <svg
1380
+ class="pf-v6-svg"
1381
+ viewBox="0 0 20 20"
1382
+ fill="currentColor"
1383
+ aria-hidden="true"
1384
+ role="img"
1385
+ width="1em"
1386
+ height="1em"
1387
+ >
1388
+ <path
1389
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1390
+ />
1391
+ </svg>
608
1392
  </span>
1393
+ <span class="pf-v6-c-button__text">Plain with text</span>
609
1394
  </button>
610
1395
 
611
1396
  <br />
@@ -621,7 +1406,19 @@ cssPrefix: pf-v6-c-button
621
1406
  aria-label="Copy input"
622
1407
  >
623
1408
  <span class="pf-v6-c-button__icon">
624
- <i class="fas fa-copy" aria-hidden="true"></i>
1409
+ <svg
1410
+ class="pf-v6-svg"
1411
+ viewBox="0 0 32 32"
1412
+ fill="currentColor"
1413
+ aria-hidden="true"
1414
+ role="img"
1415
+ width="1em"
1416
+ height="1em"
1417
+ >
1418
+ <path
1419
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1420
+ />
1421
+ </svg>
625
1422
  </span>
626
1423
  </button>
627
1424
 
@@ -633,14 +1430,38 @@ cssPrefix: pf-v6-c-button
633
1430
  </div>
634
1431
  <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
635
1432
  <span class="pf-v6-c-button__icon pf-m-start">
636
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
637
- </span>
638
- <span class="pf-v6-c-button__text">Primary</span>
639
- </button>
640
-
641
- <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
642
- <span class="pf-v6-c-button__icon pf-m-start">
643
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1433
+ <svg
1434
+ class="pf-v6-svg"
1435
+ viewBox="0 0 32 32"
1436
+ fill="currentColor"
1437
+ aria-hidden="true"
1438
+ role="img"
1439
+ width="1em"
1440
+ height="1em"
1441
+ >
1442
+ <path
1443
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1444
+ />
1445
+ </svg>
1446
+ </span>
1447
+ <span class="pf-v6-c-button__text">Primary</span>
1448
+ </button>
1449
+
1450
+ <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
1451
+ <span class="pf-v6-c-button__icon pf-m-start">
1452
+ <svg
1453
+ class="pf-v6-svg"
1454
+ viewBox="0 0 32 32"
1455
+ fill="currentColor"
1456
+ aria-hidden="true"
1457
+ role="img"
1458
+ width="1em"
1459
+ height="1em"
1460
+ >
1461
+ <path
1462
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1463
+ />
1464
+ </svg>
644
1465
  </span>
645
1466
  <span class="pf-v6-c-button__text">Secondary</span>
646
1467
  </button>
@@ -650,28 +1471,76 @@ cssPrefix: pf-v6-c-button
650
1471
  type="button"
651
1472
  >
652
1473
  <span class="pf-v6-c-button__icon pf-m-start">
653
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1474
+ <svg
1475
+ class="pf-v6-svg"
1476
+ viewBox="0 0 32 32"
1477
+ fill="currentColor"
1478
+ aria-hidden="true"
1479
+ role="img"
1480
+ width="1em"
1481
+ height="1em"
1482
+ >
1483
+ <path
1484
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1485
+ />
1486
+ </svg>
654
1487
  </span>
655
1488
  <span class="pf-v6-c-button__text">Secondary danger</span>
656
1489
  </button>
657
1490
 
658
1491
  <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
659
1492
  <span class="pf-v6-c-button__icon pf-m-start">
660
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1493
+ <svg
1494
+ class="pf-v6-svg"
1495
+ viewBox="0 0 32 32"
1496
+ fill="currentColor"
1497
+ aria-hidden="true"
1498
+ role="img"
1499
+ width="1em"
1500
+ height="1em"
1501
+ >
1502
+ <path
1503
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1504
+ />
1505
+ </svg>
661
1506
  </span>
662
1507
  <span class="pf-v6-c-button__text">Tertiary</span>
663
1508
  </button>
664
1509
 
665
1510
  <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
666
1511
  <span class="pf-v6-c-button__icon pf-m-start">
667
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1512
+ <svg
1513
+ class="pf-v6-svg"
1514
+ viewBox="0 0 32 32"
1515
+ fill="currentColor"
1516
+ aria-hidden="true"
1517
+ role="img"
1518
+ width="1em"
1519
+ height="1em"
1520
+ >
1521
+ <path
1522
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1523
+ />
1524
+ </svg>
668
1525
  </span>
669
1526
  <span class="pf-v6-c-button__text">Danger</span>
670
1527
  </button>
671
1528
 
672
1529
  <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
673
1530
  <span class="pf-v6-c-button__icon pf-m-start">
674
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1531
+ <svg
1532
+ class="pf-v6-svg"
1533
+ viewBox="0 0 32 32"
1534
+ fill="currentColor"
1535
+ aria-hidden="true"
1536
+ role="img"
1537
+ width="1em"
1538
+ height="1em"
1539
+ >
1540
+ <path
1541
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1542
+ />
1543
+ </svg>
675
1544
  </span>
676
1545
  <span class="pf-v6-c-button__text">Warning</span>
677
1546
  </button>
@@ -681,21 +1550,57 @@ cssPrefix: pf-v6-c-button
681
1550
 
682
1551
  <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
683
1552
  <span class="pf-v6-c-button__icon pf-m-start">
684
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1553
+ <svg
1554
+ class="pf-v6-svg"
1555
+ viewBox="0 0 32 32"
1556
+ fill="currentColor"
1557
+ aria-hidden="true"
1558
+ role="img"
1559
+ width="1em"
1560
+ height="1em"
1561
+ >
1562
+ <path
1563
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1564
+ />
1565
+ </svg>
685
1566
  </span>
686
1567
  <span class="pf-v6-c-button__text">Link</span>
687
1568
  </button>
688
1569
 
689
1570
  <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
690
1571
  <span class="pf-v6-c-button__icon pf-m-start">
691
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1572
+ <svg
1573
+ class="pf-v6-svg"
1574
+ viewBox="0 0 32 32"
1575
+ fill="currentColor"
1576
+ aria-hidden="true"
1577
+ role="img"
1578
+ width="1em"
1579
+ height="1em"
1580
+ >
1581
+ <path
1582
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1583
+ />
1584
+ </svg>
692
1585
  </span>
693
1586
  <span class="pf-v6-c-button__text">Link danger</span>
694
1587
  </button>
695
1588
 
696
1589
  <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
697
1590
  <span class="pf-v6-c-button__icon pf-m-start">
698
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1591
+ <svg
1592
+ class="pf-v6-svg"
1593
+ viewBox="0 0 32 32"
1594
+ fill="currentColor"
1595
+ aria-hidden="true"
1596
+ role="img"
1597
+ width="1em"
1598
+ height="1em"
1599
+ >
1600
+ <path
1601
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1602
+ />
1603
+ </svg>
699
1604
  </span>
700
1605
  <span class="pf-v6-c-button__text">Inline link</span>
701
1606
  </button>
@@ -706,8 +1611,43 @@ cssPrefix: pf-v6-c-button
706
1611
  aria-label="Remove"
707
1612
  >
708
1613
  <span class="pf-v6-c-button__icon">
709
- <i class="fas fa-times" aria-hidden="true"></i>
1614
+ <svg
1615
+ class="pf-v6-svg"
1616
+ viewBox="0 0 20 20"
1617
+ fill="currentColor"
1618
+ aria-hidden="true"
1619
+ role="img"
1620
+ width="1em"
1621
+ height="1em"
1622
+ >
1623
+ <path
1624
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1625
+ />
1626
+ </svg>
1627
+ </span>
1628
+ </button>
1629
+
1630
+ <button
1631
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1632
+ type="button"
1633
+ aria-label="Remove"
1634
+ >
1635
+ <span class="pf-v6-c-button__icon pf-m-start">
1636
+ <svg
1637
+ class="pf-v6-svg"
1638
+ viewBox="0 0 20 20"
1639
+ fill="currentColor"
1640
+ aria-hidden="true"
1641
+ role="img"
1642
+ width="1em"
1643
+ height="1em"
1644
+ >
1645
+ <path
1646
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1647
+ />
1648
+ </svg>
710
1649
  </span>
1650
+ <span class="pf-v6-c-button__text">Plain with text</span>
711
1651
  </button>
712
1652
 
713
1653
  <br />
@@ -715,7 +1655,19 @@ cssPrefix: pf-v6-c-button
715
1655
 
716
1656
  <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
717
1657
  <span class="pf-v6-c-button__icon pf-m-start">
718
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1658
+ <svg
1659
+ class="pf-v6-svg"
1660
+ viewBox="0 0 32 32"
1661
+ fill="currentColor"
1662
+ aria-hidden="true"
1663
+ role="img"
1664
+ width="1em"
1665
+ height="1em"
1666
+ >
1667
+ <path
1668
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1669
+ />
1670
+ </svg>
719
1671
  </span>
720
1672
  <span class="pf-v6-c-button__text">Control</span>
721
1673
  </button>
@@ -726,7 +1678,19 @@ cssPrefix: pf-v6-c-button
726
1678
  aria-label="Copy input"
727
1679
  >
728
1680
  <span class="pf-v6-c-button__icon">
729
- <i class="fas fa-copy" aria-hidden="true"></i>
1681
+ <svg
1682
+ class="pf-v6-svg"
1683
+ viewBox="0 0 32 32"
1684
+ fill="currentColor"
1685
+ aria-hidden="true"
1686
+ role="img"
1687
+ width="1em"
1688
+ height="1em"
1689
+ >
1690
+ <path
1691
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1692
+ />
1693
+ </svg>
730
1694
  </span>
731
1695
  </button>
732
1696
 
@@ -739,14 +1703,38 @@ cssPrefix: pf-v6-c-button
739
1703
  <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
740
1704
  <span class="pf-v6-c-button__text">Primary</span>
741
1705
  <span class="pf-v6-c-button__icon pf-m-end">
742
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1706
+ <svg
1707
+ class="pf-v6-svg"
1708
+ viewBox="0 0 32 32"
1709
+ fill="currentColor"
1710
+ aria-hidden="true"
1711
+ role="img"
1712
+ width="1em"
1713
+ height="1em"
1714
+ >
1715
+ <path
1716
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1717
+ />
1718
+ </svg>
743
1719
  </span>
744
1720
  </button>
745
1721
 
746
1722
  <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
747
1723
  <span class="pf-v6-c-button__text">Secondary</span>
748
1724
  <span class="pf-v6-c-button__icon pf-m-end">
749
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1725
+ <svg
1726
+ class="pf-v6-svg"
1727
+ viewBox="0 0 32 32"
1728
+ fill="currentColor"
1729
+ aria-hidden="true"
1730
+ role="img"
1731
+ width="1em"
1732
+ height="1em"
1733
+ >
1734
+ <path
1735
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1736
+ />
1737
+ </svg>
750
1738
  </span>
751
1739
  </button>
752
1740
 
@@ -756,28 +1744,76 @@ cssPrefix: pf-v6-c-button
756
1744
  >
757
1745
  <span class="pf-v6-c-button__text">Secondary danger</span>
758
1746
  <span class="pf-v6-c-button__icon pf-m-end">
759
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1747
+ <svg
1748
+ class="pf-v6-svg"
1749
+ viewBox="0 0 32 32"
1750
+ fill="currentColor"
1751
+ aria-hidden="true"
1752
+ role="img"
1753
+ width="1em"
1754
+ height="1em"
1755
+ >
1756
+ <path
1757
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1758
+ />
1759
+ </svg>
760
1760
  </span>
761
1761
  </button>
762
1762
 
763
1763
  <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
764
1764
  <span class="pf-v6-c-button__text">Tertiary</span>
765
1765
  <span class="pf-v6-c-button__icon pf-m-end">
766
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1766
+ <svg
1767
+ class="pf-v6-svg"
1768
+ viewBox="0 0 32 32"
1769
+ fill="currentColor"
1770
+ aria-hidden="true"
1771
+ role="img"
1772
+ width="1em"
1773
+ height="1em"
1774
+ >
1775
+ <path
1776
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1777
+ />
1778
+ </svg>
767
1779
  </span>
768
1780
  </button>
769
1781
 
770
1782
  <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
771
1783
  <span class="pf-v6-c-button__text">Danger</span>
772
1784
  <span class="pf-v6-c-button__icon pf-m-end">
773
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1785
+ <svg
1786
+ class="pf-v6-svg"
1787
+ viewBox="0 0 32 32"
1788
+ fill="currentColor"
1789
+ aria-hidden="true"
1790
+ role="img"
1791
+ width="1em"
1792
+ height="1em"
1793
+ >
1794
+ <path
1795
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1796
+ />
1797
+ </svg>
774
1798
  </span>
775
1799
  </button>
776
1800
 
777
1801
  <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
778
1802
  <span class="pf-v6-c-button__text">Warning</span>
779
1803
  <span class="pf-v6-c-button__icon pf-m-end">
780
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1804
+ <svg
1805
+ class="pf-v6-svg"
1806
+ viewBox="0 0 32 32"
1807
+ fill="currentColor"
1808
+ aria-hidden="true"
1809
+ role="img"
1810
+ width="1em"
1811
+ height="1em"
1812
+ >
1813
+ <path
1814
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1815
+ />
1816
+ </svg>
781
1817
  </span>
782
1818
  </button>
783
1819
 
@@ -787,32 +1823,103 @@ cssPrefix: pf-v6-c-button
787
1823
  <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
788
1824
  <span class="pf-v6-c-button__text">Link</span>
789
1825
  <span class="pf-v6-c-button__icon pf-m-end">
790
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1826
+ <svg
1827
+ class="pf-v6-svg"
1828
+ viewBox="0 0 32 32"
1829
+ fill="currentColor"
1830
+ aria-hidden="true"
1831
+ role="img"
1832
+ width="1em"
1833
+ height="1em"
1834
+ >
1835
+ <path
1836
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1837
+ />
1838
+ </svg>
791
1839
  </span>
792
1840
  </button>
793
1841
 
794
1842
  <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
795
1843
  <span class="pf-v6-c-button__text">Link danger</span>
796
1844
  <span class="pf-v6-c-button__icon pf-m-end">
797
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1845
+ <svg
1846
+ class="pf-v6-svg"
1847
+ viewBox="0 0 32 32"
1848
+ fill="currentColor"
1849
+ aria-hidden="true"
1850
+ role="img"
1851
+ width="1em"
1852
+ height="1em"
1853
+ >
1854
+ <path
1855
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1856
+ />
1857
+ </svg>
798
1858
  </span>
799
1859
  </button>
800
1860
 
801
1861
  <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
802
1862
  <span class="pf-v6-c-button__text">Inline link</span>
803
1863
  <span class="pf-v6-c-button__icon pf-m-end">
804
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
805
- </span>
806
- </button>
807
-
808
- <button
809
- class="pf-v6-c-button pf-m-small pf-m-plain"
810
- type="button"
811
- aria-label="Remove"
812
- >
813
- <span class="pf-v6-c-button__icon">
814
- <i class="fas fa-times" aria-hidden="true"></i>
815
- </span>
1864
+ <svg
1865
+ class="pf-v6-svg"
1866
+ viewBox="0 0 32 32"
1867
+ fill="currentColor"
1868
+ aria-hidden="true"
1869
+ role="img"
1870
+ width="1em"
1871
+ height="1em"
1872
+ >
1873
+ <path
1874
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1875
+ />
1876
+ </svg>
1877
+ </span>
1878
+ </button>
1879
+
1880
+ <button
1881
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1882
+ type="button"
1883
+ aria-label="Remove"
1884
+ >
1885
+ <span class="pf-v6-c-button__icon">
1886
+ <svg
1887
+ class="pf-v6-svg"
1888
+ viewBox="0 0 20 20"
1889
+ fill="currentColor"
1890
+ aria-hidden="true"
1891
+ role="img"
1892
+ width="1em"
1893
+ height="1em"
1894
+ >
1895
+ <path
1896
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1897
+ />
1898
+ </svg>
1899
+ </span>
1900
+ </button>
1901
+
1902
+ <button
1903
+ class="pf-v6-c-button pf-m-small pf-m-plain"
1904
+ type="button"
1905
+ aria-label="Remove"
1906
+ >
1907
+ <span class="pf-v6-c-button__text">Plain with text</span>
1908
+ <span class="pf-v6-c-button__icon pf-m-end">
1909
+ <svg
1910
+ class="pf-v6-svg"
1911
+ viewBox="0 0 20 20"
1912
+ fill="currentColor"
1913
+ aria-hidden="true"
1914
+ role="img"
1915
+ width="1em"
1916
+ height="1em"
1917
+ >
1918
+ <path
1919
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
1920
+ />
1921
+ </svg>
1922
+ </span>
816
1923
  </button>
817
1924
 
818
1925
  <br />
@@ -821,7 +1928,19 @@ cssPrefix: pf-v6-c-button
821
1928
  <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
822
1929
  <span class="pf-v6-c-button__text">Control</span>
823
1930
  <span class="pf-v6-c-button__icon pf-m-end">
824
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1931
+ <svg
1932
+ class="pf-v6-svg"
1933
+ viewBox="0 0 32 32"
1934
+ fill="currentColor"
1935
+ aria-hidden="true"
1936
+ role="img"
1937
+ width="1em"
1938
+ height="1em"
1939
+ >
1940
+ <path
1941
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
1942
+ />
1943
+ </svg>
825
1944
  </span>
826
1945
  </button>
827
1946
 
@@ -831,7 +1950,19 @@ cssPrefix: pf-v6-c-button
831
1950
  aria-label="Copy input"
832
1951
  >
833
1952
  <span class="pf-v6-c-button__icon">
834
- <i class="fas fa-copy" aria-hidden="true"></i>
1953
+ <svg
1954
+ class="pf-v6-svg"
1955
+ viewBox="0 0 32 32"
1956
+ fill="currentColor"
1957
+ aria-hidden="true"
1958
+ role="img"
1959
+ width="1em"
1960
+ height="1em"
1961
+ >
1962
+ <path
1963
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
1964
+ />
1965
+ </svg>
835
1966
  </span>
836
1967
  </button>
837
1968
 
@@ -890,8 +2021,44 @@ cssPrefix: pf-v6-c-button
890
2021
  disabled
891
2022
  >
892
2023
  <span class="pf-v6-c-button__icon">
893
- <i class="fas fa-times" aria-hidden="true"></i>
2024
+ <svg
2025
+ class="pf-v6-svg"
2026
+ viewBox="0 0 20 20"
2027
+ fill="currentColor"
2028
+ aria-hidden="true"
2029
+ role="img"
2030
+ width="1em"
2031
+ height="1em"
2032
+ >
2033
+ <path
2034
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2035
+ />
2036
+ </svg>
2037
+ </span>
2038
+ </button>
2039
+
2040
+ <button
2041
+ class="pf-v6-c-button pf-m-plain"
2042
+ type="button"
2043
+ aria-label="Remove"
2044
+ disabled
2045
+ >
2046
+ <span class="pf-v6-c-button__icon pf-m-start">
2047
+ <svg
2048
+ class="pf-v6-svg"
2049
+ viewBox="0 0 20 20"
2050
+ fill="currentColor"
2051
+ aria-hidden="true"
2052
+ role="img"
2053
+ width="1em"
2054
+ height="1em"
2055
+ >
2056
+ <path
2057
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2058
+ />
2059
+ </svg>
894
2060
  </span>
2061
+ <span class="pf-v6-c-button__text">Plain with text</span>
895
2062
  </button>
896
2063
 
897
2064
  <br />
@@ -908,7 +2075,19 @@ cssPrefix: pf-v6-c-button
908
2075
  disabled
909
2076
  >
910
2077
  <span class="pf-v6-c-button__icon">
911
- <i class="fas fa-copy" aria-hidden="true"></i>
2078
+ <svg
2079
+ class="pf-v6-svg"
2080
+ viewBox="0 0 32 32"
2081
+ fill="currentColor"
2082
+ aria-hidden="true"
2083
+ role="img"
2084
+ width="1em"
2085
+ height="1em"
2086
+ >
2087
+ <path
2088
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
2089
+ />
2090
+ </svg>
912
2091
  </span>
913
2092
  </button>
914
2093
 
@@ -920,14 +2099,38 @@ cssPrefix: pf-v6-c-button
920
2099
  </div>
921
2100
  <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
922
2101
  <span class="pf-v6-c-button__icon pf-m-start">
923
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2102
+ <svg
2103
+ class="pf-v6-svg"
2104
+ viewBox="0 0 32 32"
2105
+ fill="currentColor"
2106
+ aria-hidden="true"
2107
+ role="img"
2108
+ width="1em"
2109
+ height="1em"
2110
+ >
2111
+ <path
2112
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2113
+ />
2114
+ </svg>
924
2115
  </span>
925
2116
  <span class="pf-v6-c-button__text">Primary</span>
926
2117
  </button>
927
2118
 
928
2119
  <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
929
2120
  <span class="pf-v6-c-button__icon pf-m-start">
930
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2121
+ <svg
2122
+ class="pf-v6-svg"
2123
+ viewBox="0 0 32 32"
2124
+ fill="currentColor"
2125
+ aria-hidden="true"
2126
+ role="img"
2127
+ width="1em"
2128
+ height="1em"
2129
+ >
2130
+ <path
2131
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2132
+ />
2133
+ </svg>
931
2134
  </span>
932
2135
  <span class="pf-v6-c-button__text">Secondary</span>
933
2136
  </button>
@@ -938,28 +2141,76 @@ cssPrefix: pf-v6-c-button
938
2141
  disabled
939
2142
  >
940
2143
  <span class="pf-v6-c-button__icon pf-m-start">
941
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2144
+ <svg
2145
+ class="pf-v6-svg"
2146
+ viewBox="0 0 32 32"
2147
+ fill="currentColor"
2148
+ aria-hidden="true"
2149
+ role="img"
2150
+ width="1em"
2151
+ height="1em"
2152
+ >
2153
+ <path
2154
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2155
+ />
2156
+ </svg>
942
2157
  </span>
943
2158
  <span class="pf-v6-c-button__text">Secondary danger</span>
944
2159
  </button>
945
2160
 
946
2161
  <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
947
2162
  <span class="pf-v6-c-button__icon pf-m-start">
948
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2163
+ <svg
2164
+ class="pf-v6-svg"
2165
+ viewBox="0 0 32 32"
2166
+ fill="currentColor"
2167
+ aria-hidden="true"
2168
+ role="img"
2169
+ width="1em"
2170
+ height="1em"
2171
+ >
2172
+ <path
2173
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2174
+ />
2175
+ </svg>
949
2176
  </span>
950
2177
  <span class="pf-v6-c-button__text">Tertiary</span>
951
2178
  </button>
952
2179
 
953
2180
  <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
954
2181
  <span class="pf-v6-c-button__icon pf-m-start">
955
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2182
+ <svg
2183
+ class="pf-v6-svg"
2184
+ viewBox="0 0 32 32"
2185
+ fill="currentColor"
2186
+ aria-hidden="true"
2187
+ role="img"
2188
+ width="1em"
2189
+ height="1em"
2190
+ >
2191
+ <path
2192
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2193
+ />
2194
+ </svg>
956
2195
  </span>
957
2196
  <span class="pf-v6-c-button__text">Danger</span>
958
2197
  </button>
959
2198
 
960
2199
  <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
961
2200
  <span class="pf-v6-c-button__icon pf-m-start">
962
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2201
+ <svg
2202
+ class="pf-v6-svg"
2203
+ viewBox="0 0 32 32"
2204
+ fill="currentColor"
2205
+ aria-hidden="true"
2206
+ role="img"
2207
+ width="1em"
2208
+ height="1em"
2209
+ >
2210
+ <path
2211
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2212
+ />
2213
+ </svg>
963
2214
  </span>
964
2215
  <span class="pf-v6-c-button__text">Warning</span>
965
2216
  </button>
@@ -969,21 +2220,57 @@ cssPrefix: pf-v6-c-button
969
2220
 
970
2221
  <button class="pf-v6-c-button pf-m-link" type="button" disabled>
971
2222
  <span class="pf-v6-c-button__icon pf-m-start">
972
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2223
+ <svg
2224
+ class="pf-v6-svg"
2225
+ viewBox="0 0 32 32"
2226
+ fill="currentColor"
2227
+ aria-hidden="true"
2228
+ role="img"
2229
+ width="1em"
2230
+ height="1em"
2231
+ >
2232
+ <path
2233
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2234
+ />
2235
+ </svg>
973
2236
  </span>
974
2237
  <span class="pf-v6-c-button__text">Link</span>
975
2238
  </button>
976
2239
 
977
2240
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
978
2241
  <span class="pf-v6-c-button__icon pf-m-start">
979
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2242
+ <svg
2243
+ class="pf-v6-svg"
2244
+ viewBox="0 0 32 32"
2245
+ fill="currentColor"
2246
+ aria-hidden="true"
2247
+ role="img"
2248
+ width="1em"
2249
+ height="1em"
2250
+ >
2251
+ <path
2252
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2253
+ />
2254
+ </svg>
980
2255
  </span>
981
2256
  <span class="pf-v6-c-button__text">Link danger</span>
982
2257
  </button>
983
2258
 
984
2259
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
985
2260
  <span class="pf-v6-c-button__icon pf-m-start">
986
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2261
+ <svg
2262
+ class="pf-v6-svg"
2263
+ viewBox="0 0 32 32"
2264
+ fill="currentColor"
2265
+ aria-hidden="true"
2266
+ role="img"
2267
+ width="1em"
2268
+ height="1em"
2269
+ >
2270
+ <path
2271
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2272
+ />
2273
+ </svg>
987
2274
  </span>
988
2275
  <span class="pf-v6-c-button__text">Inline link</span>
989
2276
  </button>
@@ -995,48 +2282,132 @@ cssPrefix: pf-v6-c-button
995
2282
  disabled
996
2283
  >
997
2284
  <span class="pf-v6-c-button__icon">
998
- <i class="fas fa-times" aria-hidden="true"></i>
999
- </span>
1000
- </button>
1001
-
1002
- <br />
1003
- <br />
1004
-
1005
- <button class="pf-v6-c-button pf-m-control" type="button" disabled>
1006
- <span class="pf-v6-c-button__icon pf-m-start">
1007
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2285
+ <svg
2286
+ class="pf-v6-svg"
2287
+ viewBox="0 0 20 20"
2288
+ fill="currentColor"
2289
+ aria-hidden="true"
2290
+ role="img"
2291
+ width="1em"
2292
+ height="1em"
2293
+ >
2294
+ <path
2295
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2296
+ />
2297
+ </svg>
1008
2298
  </span>
1009
- <span class="pf-v6-c-button__text">Control</span>
1010
2299
  </button>
1011
2300
 
1012
2301
  <button
1013
- class="pf-v6-c-button pf-m-control"
2302
+ class="pf-v6-c-button pf-m-plain"
1014
2303
  type="button"
1015
- aria-label="Copy input"
2304
+ aria-label="Remove"
1016
2305
  disabled
1017
2306
  >
1018
- <span class="pf-v6-c-button__icon">
1019
- <i class="fas fa-copy" aria-hidden="true"></i>
2307
+ <span class="pf-v6-c-button__icon pf-m-start">
2308
+ <svg
2309
+ class="pf-v6-svg"
2310
+ viewBox="0 0 20 20"
2311
+ fill="currentColor"
2312
+ aria-hidden="true"
2313
+ role="img"
2314
+ width="1em"
2315
+ height="1em"
2316
+ >
2317
+ <path
2318
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2319
+ />
2320
+ </svg>
1020
2321
  </span>
2322
+ <span class="pf-v6-c-button__text">Plain with text</span>
1021
2323
  </button>
1022
2324
 
1023
2325
  <br />
1024
2326
  <br />
1025
2327
 
1026
- <div>
1027
- <strong>Icon end</strong>
1028
- </div>
2328
+ <button class="pf-v6-c-button pf-m-control" type="button" disabled>
2329
+ <span class="pf-v6-c-button__icon pf-m-start">
2330
+ <svg
2331
+ class="pf-v6-svg"
2332
+ viewBox="0 0 32 32"
2333
+ fill="currentColor"
2334
+ aria-hidden="true"
2335
+ role="img"
2336
+ width="1em"
2337
+ height="1em"
2338
+ >
2339
+ <path
2340
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2341
+ />
2342
+ </svg>
2343
+ </span>
2344
+ <span class="pf-v6-c-button__text">Control</span>
2345
+ </button>
2346
+
2347
+ <button
2348
+ class="pf-v6-c-button pf-m-control"
2349
+ type="button"
2350
+ aria-label="Copy input"
2351
+ disabled
2352
+ >
2353
+ <span class="pf-v6-c-button__icon">
2354
+ <svg
2355
+ class="pf-v6-svg"
2356
+ viewBox="0 0 32 32"
2357
+ fill="currentColor"
2358
+ aria-hidden="true"
2359
+ role="img"
2360
+ width="1em"
2361
+ height="1em"
2362
+ >
2363
+ <path
2364
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
2365
+ />
2366
+ </svg>
2367
+ </span>
2368
+ </button>
2369
+
2370
+ <br />
2371
+ <br />
2372
+
2373
+ <div>
2374
+ <strong>Icon end</strong>
2375
+ </div>
1029
2376
  <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
1030
2377
  <span class="pf-v6-c-button__text">Primary</span>
1031
2378
  <span class="pf-v6-c-button__icon pf-m-end">
1032
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2379
+ <svg
2380
+ class="pf-v6-svg"
2381
+ viewBox="0 0 32 32"
2382
+ fill="currentColor"
2383
+ aria-hidden="true"
2384
+ role="img"
2385
+ width="1em"
2386
+ height="1em"
2387
+ >
2388
+ <path
2389
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2390
+ />
2391
+ </svg>
1033
2392
  </span>
1034
2393
  </button>
1035
2394
 
1036
2395
  <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
1037
2396
  <span class="pf-v6-c-button__text">Secondary</span>
1038
2397
  <span class="pf-v6-c-button__icon pf-m-end">
1039
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2398
+ <svg
2399
+ class="pf-v6-svg"
2400
+ viewBox="0 0 32 32"
2401
+ fill="currentColor"
2402
+ aria-hidden="true"
2403
+ role="img"
2404
+ width="1em"
2405
+ height="1em"
2406
+ >
2407
+ <path
2408
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2409
+ />
2410
+ </svg>
1040
2411
  </span>
1041
2412
  </button>
1042
2413
 
@@ -1047,28 +2418,76 @@ cssPrefix: pf-v6-c-button
1047
2418
  >
1048
2419
  <span class="pf-v6-c-button__text">Secondary danger</span>
1049
2420
  <span class="pf-v6-c-button__icon pf-m-end">
1050
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2421
+ <svg
2422
+ class="pf-v6-svg"
2423
+ viewBox="0 0 32 32"
2424
+ fill="currentColor"
2425
+ aria-hidden="true"
2426
+ role="img"
2427
+ width="1em"
2428
+ height="1em"
2429
+ >
2430
+ <path
2431
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2432
+ />
2433
+ </svg>
1051
2434
  </span>
1052
2435
  </button>
1053
2436
 
1054
2437
  <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
1055
2438
  <span class="pf-v6-c-button__text">Tertiary</span>
1056
2439
  <span class="pf-v6-c-button__icon pf-m-end">
1057
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2440
+ <svg
2441
+ class="pf-v6-svg"
2442
+ viewBox="0 0 32 32"
2443
+ fill="currentColor"
2444
+ aria-hidden="true"
2445
+ role="img"
2446
+ width="1em"
2447
+ height="1em"
2448
+ >
2449
+ <path
2450
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2451
+ />
2452
+ </svg>
1058
2453
  </span>
1059
2454
  </button>
1060
2455
 
1061
2456
  <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
1062
2457
  <span class="pf-v6-c-button__text">Danger</span>
1063
2458
  <span class="pf-v6-c-button__icon pf-m-end">
1064
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2459
+ <svg
2460
+ class="pf-v6-svg"
2461
+ viewBox="0 0 32 32"
2462
+ fill="currentColor"
2463
+ aria-hidden="true"
2464
+ role="img"
2465
+ width="1em"
2466
+ height="1em"
2467
+ >
2468
+ <path
2469
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2470
+ />
2471
+ </svg>
1065
2472
  </span>
1066
2473
  </button>
1067
2474
 
1068
2475
  <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
1069
2476
  <span class="pf-v6-c-button__text">Warning</span>
1070
2477
  <span class="pf-v6-c-button__icon pf-m-end">
1071
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2478
+ <svg
2479
+ class="pf-v6-svg"
2480
+ viewBox="0 0 32 32"
2481
+ fill="currentColor"
2482
+ aria-hidden="true"
2483
+ role="img"
2484
+ width="1em"
2485
+ height="1em"
2486
+ >
2487
+ <path
2488
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2489
+ />
2490
+ </svg>
1072
2491
  </span>
1073
2492
  </button>
1074
2493
 
@@ -1078,21 +2497,57 @@ cssPrefix: pf-v6-c-button
1078
2497
  <button class="pf-v6-c-button pf-m-link" type="button" disabled>
1079
2498
  <span class="pf-v6-c-button__text">Link</span>
1080
2499
  <span class="pf-v6-c-button__icon pf-m-end">
1081
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2500
+ <svg
2501
+ class="pf-v6-svg"
2502
+ viewBox="0 0 32 32"
2503
+ fill="currentColor"
2504
+ aria-hidden="true"
2505
+ role="img"
2506
+ width="1em"
2507
+ height="1em"
2508
+ >
2509
+ <path
2510
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2511
+ />
2512
+ </svg>
1082
2513
  </span>
1083
2514
  </button>
1084
2515
 
1085
2516
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
1086
2517
  <span class="pf-v6-c-button__text">Link danger</span>
1087
2518
  <span class="pf-v6-c-button__icon pf-m-end">
1088
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2519
+ <svg
2520
+ class="pf-v6-svg"
2521
+ viewBox="0 0 32 32"
2522
+ fill="currentColor"
2523
+ aria-hidden="true"
2524
+ role="img"
2525
+ width="1em"
2526
+ height="1em"
2527
+ >
2528
+ <path
2529
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2530
+ />
2531
+ </svg>
1089
2532
  </span>
1090
2533
  </button>
1091
2534
 
1092
2535
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
1093
2536
  <span class="pf-v6-c-button__text">Inline link</span>
1094
2537
  <span class="pf-v6-c-button__icon pf-m-end">
1095
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2538
+ <svg
2539
+ class="pf-v6-svg"
2540
+ viewBox="0 0 32 32"
2541
+ fill="currentColor"
2542
+ aria-hidden="true"
2543
+ role="img"
2544
+ width="1em"
2545
+ height="1em"
2546
+ >
2547
+ <path
2548
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2549
+ />
2550
+ </svg>
1096
2551
  </span>
1097
2552
  </button>
1098
2553
 
@@ -1103,7 +2558,43 @@ cssPrefix: pf-v6-c-button
1103
2558
  disabled
1104
2559
  >
1105
2560
  <span class="pf-v6-c-button__icon">
1106
- <i class="fas fa-times" aria-hidden="true"></i>
2561
+ <svg
2562
+ class="pf-v6-svg"
2563
+ viewBox="0 0 20 20"
2564
+ fill="currentColor"
2565
+ aria-hidden="true"
2566
+ role="img"
2567
+ width="1em"
2568
+ height="1em"
2569
+ >
2570
+ <path
2571
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2572
+ />
2573
+ </svg>
2574
+ </span>
2575
+ </button>
2576
+
2577
+ <button
2578
+ class="pf-v6-c-button pf-m-plain"
2579
+ type="button"
2580
+ aria-label="Remove"
2581
+ disabled
2582
+ >
2583
+ <span class="pf-v6-c-button__text">Plain with text</span>
2584
+ <span class="pf-v6-c-button__icon pf-m-end">
2585
+ <svg
2586
+ class="pf-v6-svg"
2587
+ viewBox="0 0 20 20"
2588
+ fill="currentColor"
2589
+ aria-hidden="true"
2590
+ role="img"
2591
+ width="1em"
2592
+ height="1em"
2593
+ >
2594
+ <path
2595
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2596
+ />
2597
+ </svg>
1107
2598
  </span>
1108
2599
  </button>
1109
2600
 
@@ -1113,7 +2604,19 @@ cssPrefix: pf-v6-c-button
1113
2604
  <button class="pf-v6-c-button pf-m-control" type="button" disabled>
1114
2605
  <span class="pf-v6-c-button__text">Control</span>
1115
2606
  <span class="pf-v6-c-button__icon pf-m-end">
1116
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2607
+ <svg
2608
+ class="pf-v6-svg"
2609
+ viewBox="0 0 32 32"
2610
+ fill="currentColor"
2611
+ aria-hidden="true"
2612
+ role="img"
2613
+ width="1em"
2614
+ height="1em"
2615
+ >
2616
+ <path
2617
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2618
+ />
2619
+ </svg>
1117
2620
  </span>
1118
2621
  </button>
1119
2622
 
@@ -1124,7 +2627,19 @@ cssPrefix: pf-v6-c-button
1124
2627
  disabled
1125
2628
  >
1126
2629
  <span class="pf-v6-c-button__icon">
1127
- <i class="fas fa-copy" aria-hidden="true"></i>
2630
+ <svg
2631
+ class="pf-v6-svg"
2632
+ viewBox="0 0 32 32"
2633
+ fill="currentColor"
2634
+ aria-hidden="true"
2635
+ role="img"
2636
+ width="1em"
2637
+ height="1em"
2638
+ >
2639
+ <path
2640
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
2641
+ />
2642
+ </svg>
1128
2643
  </span>
1129
2644
  </button>
1130
2645
 
@@ -1215,8 +2730,44 @@ cssPrefix: pf-v6-c-button
1215
2730
  aria-disabled="true"
1216
2731
  >
1217
2732
  <span class="pf-v6-c-button__icon">
1218
- <i class="fas fa-times" aria-hidden="true"></i>
2733
+ <svg
2734
+ class="pf-v6-svg"
2735
+ viewBox="0 0 20 20"
2736
+ fill="currentColor"
2737
+ aria-hidden="true"
2738
+ role="img"
2739
+ width="1em"
2740
+ height="1em"
2741
+ >
2742
+ <path
2743
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2744
+ />
2745
+ </svg>
2746
+ </span>
2747
+ </button>
2748
+
2749
+ <button
2750
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
2751
+ type="button"
2752
+ aria-label="Remove"
2753
+ aria-disabled="true"
2754
+ >
2755
+ <span class="pf-v6-c-button__icon pf-m-start">
2756
+ <svg
2757
+ class="pf-v6-svg"
2758
+ viewBox="0 0 20 20"
2759
+ fill="currentColor"
2760
+ aria-hidden="true"
2761
+ role="img"
2762
+ width="1em"
2763
+ height="1em"
2764
+ >
2765
+ <path
2766
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
2767
+ />
2768
+ </svg>
1219
2769
  </span>
2770
+ <span class="pf-v6-c-button__text">Plain with text</span>
1220
2771
  </button>
1221
2772
 
1222
2773
  <br />
@@ -1237,7 +2788,19 @@ cssPrefix: pf-v6-c-button
1237
2788
  aria-disabled="true"
1238
2789
  >
1239
2790
  <span class="pf-v6-c-button__icon">
1240
- <i class="fas fa-copy" aria-hidden="true"></i>
2791
+ <svg
2792
+ class="pf-v6-svg"
2793
+ viewBox="0 0 32 32"
2794
+ fill="currentColor"
2795
+ aria-hidden="true"
2796
+ role="img"
2797
+ width="1em"
2798
+ height="1em"
2799
+ >
2800
+ <path
2801
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
2802
+ />
2803
+ </svg>
1241
2804
  </span>
1242
2805
  </button>
1243
2806
 
@@ -1253,7 +2816,19 @@ cssPrefix: pf-v6-c-button
1253
2816
  aria-disabled="true"
1254
2817
  >
1255
2818
  <span class="pf-v6-c-button__icon pf-m-start">
1256
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2819
+ <svg
2820
+ class="pf-v6-svg"
2821
+ viewBox="0 0 32 32"
2822
+ fill="currentColor"
2823
+ aria-hidden="true"
2824
+ role="img"
2825
+ width="1em"
2826
+ height="1em"
2827
+ >
2828
+ <path
2829
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2830
+ />
2831
+ </svg>
1257
2832
  </span>
1258
2833
  <span class="pf-v6-c-button__text">Primary</span>
1259
2834
  </button>
@@ -1264,18 +2839,42 @@ cssPrefix: pf-v6-c-button
1264
2839
  aria-disabled="true"
1265
2840
  >
1266
2841
  <span class="pf-v6-c-button__icon pf-m-start">
1267
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1268
- </span>
1269
- <span class="pf-v6-c-button__text">Secondary</span>
1270
- </button>
1271
-
1272
- <button
2842
+ <svg
2843
+ class="pf-v6-svg"
2844
+ viewBox="0 0 32 32"
2845
+ fill="currentColor"
2846
+ aria-hidden="true"
2847
+ role="img"
2848
+ width="1em"
2849
+ height="1em"
2850
+ >
2851
+ <path
2852
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2853
+ />
2854
+ </svg>
2855
+ </span>
2856
+ <span class="pf-v6-c-button__text">Secondary</span>
2857
+ </button>
2858
+
2859
+ <button
1273
2860
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
1274
2861
  type="button"
1275
2862
  aria-disabled="true"
1276
2863
  >
1277
2864
  <span class="pf-v6-c-button__icon pf-m-start">
1278
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2865
+ <svg
2866
+ class="pf-v6-svg"
2867
+ viewBox="0 0 32 32"
2868
+ fill="currentColor"
2869
+ aria-hidden="true"
2870
+ role="img"
2871
+ width="1em"
2872
+ height="1em"
2873
+ >
2874
+ <path
2875
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2876
+ />
2877
+ </svg>
1279
2878
  </span>
1280
2879
  <span class="pf-v6-c-button__text">Secondary danger</span>
1281
2880
  </button>
@@ -1286,7 +2885,19 @@ cssPrefix: pf-v6-c-button
1286
2885
  aria-disabled="true"
1287
2886
  >
1288
2887
  <span class="pf-v6-c-button__icon pf-m-start">
1289
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2888
+ <svg
2889
+ class="pf-v6-svg"
2890
+ viewBox="0 0 32 32"
2891
+ fill="currentColor"
2892
+ aria-hidden="true"
2893
+ role="img"
2894
+ width="1em"
2895
+ height="1em"
2896
+ >
2897
+ <path
2898
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2899
+ />
2900
+ </svg>
1290
2901
  </span>
1291
2902
  <span class="pf-v6-c-button__text">Tertiary</span>
1292
2903
  </button>
@@ -1297,7 +2908,19 @@ cssPrefix: pf-v6-c-button
1297
2908
  aria-disabled="true"
1298
2909
  >
1299
2910
  <span class="pf-v6-c-button__icon pf-m-start">
1300
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2911
+ <svg
2912
+ class="pf-v6-svg"
2913
+ viewBox="0 0 32 32"
2914
+ fill="currentColor"
2915
+ aria-hidden="true"
2916
+ role="img"
2917
+ width="1em"
2918
+ height="1em"
2919
+ >
2920
+ <path
2921
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2922
+ />
2923
+ </svg>
1301
2924
  </span>
1302
2925
  <span class="pf-v6-c-button__text">Danger</span>
1303
2926
  </button>
@@ -1308,7 +2931,19 @@ cssPrefix: pf-v6-c-button
1308
2931
  aria-disabled="true"
1309
2932
  >
1310
2933
  <span class="pf-v6-c-button__icon pf-m-start">
1311
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2934
+ <svg
2935
+ class="pf-v6-svg"
2936
+ viewBox="0 0 32 32"
2937
+ fill="currentColor"
2938
+ aria-hidden="true"
2939
+ role="img"
2940
+ width="1em"
2941
+ height="1em"
2942
+ >
2943
+ <path
2944
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2945
+ />
2946
+ </svg>
1312
2947
  </span>
1313
2948
  <span class="pf-v6-c-button__text">Warning</span>
1314
2949
  </button>
@@ -1322,7 +2957,19 @@ cssPrefix: pf-v6-c-button
1322
2957
  aria-disabled="true"
1323
2958
  >
1324
2959
  <span class="pf-v6-c-button__icon pf-m-start">
1325
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2960
+ <svg
2961
+ class="pf-v6-svg"
2962
+ viewBox="0 0 32 32"
2963
+ fill="currentColor"
2964
+ aria-hidden="true"
2965
+ role="img"
2966
+ width="1em"
2967
+ height="1em"
2968
+ >
2969
+ <path
2970
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2971
+ />
2972
+ </svg>
1326
2973
  </span>
1327
2974
  <span class="pf-v6-c-button__text">Link</span>
1328
2975
  </button>
@@ -1333,7 +2980,19 @@ cssPrefix: pf-v6-c-button
1333
2980
  aria-disabled="true"
1334
2981
  >
1335
2982
  <span class="pf-v6-c-button__icon pf-m-start">
1336
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2983
+ <svg
2984
+ class="pf-v6-svg"
2985
+ viewBox="0 0 32 32"
2986
+ fill="currentColor"
2987
+ aria-hidden="true"
2988
+ role="img"
2989
+ width="1em"
2990
+ height="1em"
2991
+ >
2992
+ <path
2993
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
2994
+ />
2995
+ </svg>
1337
2996
  </span>
1338
2997
  <span class="pf-v6-c-button__text">Link danger</span>
1339
2998
  </button>
@@ -1344,7 +3003,19 @@ cssPrefix: pf-v6-c-button
1344
3003
  aria-disabled="true"
1345
3004
  >
1346
3005
  <span class="pf-v6-c-button__icon pf-m-start">
1347
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3006
+ <svg
3007
+ class="pf-v6-svg"
3008
+ viewBox="0 0 32 32"
3009
+ fill="currentColor"
3010
+ aria-hidden="true"
3011
+ role="img"
3012
+ width="1em"
3013
+ height="1em"
3014
+ >
3015
+ <path
3016
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3017
+ />
3018
+ </svg>
1348
3019
  </span>
1349
3020
  <span class="pf-v6-c-button__text">Inline link</span>
1350
3021
  </button>
@@ -1356,8 +3027,44 @@ cssPrefix: pf-v6-c-button
1356
3027
  aria-disabled="true"
1357
3028
  >
1358
3029
  <span class="pf-v6-c-button__icon">
1359
- <i class="fas fa-times" aria-hidden="true"></i>
3030
+ <svg
3031
+ class="pf-v6-svg"
3032
+ viewBox="0 0 20 20"
3033
+ fill="currentColor"
3034
+ aria-hidden="true"
3035
+ role="img"
3036
+ width="1em"
3037
+ height="1em"
3038
+ >
3039
+ <path
3040
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3041
+ />
3042
+ </svg>
3043
+ </span>
3044
+ </button>
3045
+
3046
+ <button
3047
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
3048
+ type="button"
3049
+ aria-label="Remove"
3050
+ aria-disabled="true"
3051
+ >
3052
+ <span class="pf-v6-c-button__icon pf-m-start">
3053
+ <svg
3054
+ class="pf-v6-svg"
3055
+ viewBox="0 0 20 20"
3056
+ fill="currentColor"
3057
+ aria-hidden="true"
3058
+ role="img"
3059
+ width="1em"
3060
+ height="1em"
3061
+ >
3062
+ <path
3063
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3064
+ />
3065
+ </svg>
1360
3066
  </span>
3067
+ <span class="pf-v6-c-button__text">Plain with text</span>
1361
3068
  </button>
1362
3069
 
1363
3070
  <br />
@@ -1369,7 +3076,19 @@ cssPrefix: pf-v6-c-button
1369
3076
  aria-disabled="true"
1370
3077
  >
1371
3078
  <span class="pf-v6-c-button__icon pf-m-start">
1372
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3079
+ <svg
3080
+ class="pf-v6-svg"
3081
+ viewBox="0 0 32 32"
3082
+ fill="currentColor"
3083
+ aria-hidden="true"
3084
+ role="img"
3085
+ width="1em"
3086
+ height="1em"
3087
+ >
3088
+ <path
3089
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3090
+ />
3091
+ </svg>
1373
3092
  </span>
1374
3093
  <span class="pf-v6-c-button__text">Control</span>
1375
3094
  </button>
@@ -1381,7 +3100,19 @@ cssPrefix: pf-v6-c-button
1381
3100
  aria-disabled="true"
1382
3101
  >
1383
3102
  <span class="pf-v6-c-button__icon">
1384
- <i class="fas fa-copy" aria-hidden="true"></i>
3103
+ <svg
3104
+ class="pf-v6-svg"
3105
+ viewBox="0 0 32 32"
3106
+ fill="currentColor"
3107
+ aria-hidden="true"
3108
+ role="img"
3109
+ width="1em"
3110
+ height="1em"
3111
+ >
3112
+ <path
3113
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
3114
+ />
3115
+ </svg>
1385
3116
  </span>
1386
3117
  </button>
1387
3118
 
@@ -1398,7 +3129,19 @@ cssPrefix: pf-v6-c-button
1398
3129
  >
1399
3130
  <span class="pf-v6-c-button__text">Primary</span>
1400
3131
  <span class="pf-v6-c-button__icon pf-m-end">
1401
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3132
+ <svg
3133
+ class="pf-v6-svg"
3134
+ viewBox="0 0 32 32"
3135
+ fill="currentColor"
3136
+ aria-hidden="true"
3137
+ role="img"
3138
+ width="1em"
3139
+ height="1em"
3140
+ >
3141
+ <path
3142
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3143
+ />
3144
+ </svg>
1402
3145
  </span>
1403
3146
  </button>
1404
3147
 
@@ -1409,7 +3152,19 @@ cssPrefix: pf-v6-c-button
1409
3152
  >
1410
3153
  <span class="pf-v6-c-button__text">Secondary</span>
1411
3154
  <span class="pf-v6-c-button__icon pf-m-end">
1412
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3155
+ <svg
3156
+ class="pf-v6-svg"
3157
+ viewBox="0 0 32 32"
3158
+ fill="currentColor"
3159
+ aria-hidden="true"
3160
+ role="img"
3161
+ width="1em"
3162
+ height="1em"
3163
+ >
3164
+ <path
3165
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3166
+ />
3167
+ </svg>
1413
3168
  </span>
1414
3169
  </button>
1415
3170
 
@@ -1420,7 +3175,19 @@ cssPrefix: pf-v6-c-button
1420
3175
  >
1421
3176
  <span class="pf-v6-c-button__text">Secondary danger</span>
1422
3177
  <span class="pf-v6-c-button__icon pf-m-end">
1423
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3178
+ <svg
3179
+ class="pf-v6-svg"
3180
+ viewBox="0 0 32 32"
3181
+ fill="currentColor"
3182
+ aria-hidden="true"
3183
+ role="img"
3184
+ width="1em"
3185
+ height="1em"
3186
+ >
3187
+ <path
3188
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3189
+ />
3190
+ </svg>
1424
3191
  </span>
1425
3192
  </button>
1426
3193
 
@@ -1431,7 +3198,19 @@ cssPrefix: pf-v6-c-button
1431
3198
  >
1432
3199
  <span class="pf-v6-c-button__text">Tertiary</span>
1433
3200
  <span class="pf-v6-c-button__icon pf-m-end">
1434
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3201
+ <svg
3202
+ class="pf-v6-svg"
3203
+ viewBox="0 0 32 32"
3204
+ fill="currentColor"
3205
+ aria-hidden="true"
3206
+ role="img"
3207
+ width="1em"
3208
+ height="1em"
3209
+ >
3210
+ <path
3211
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3212
+ />
3213
+ </svg>
1435
3214
  </span>
1436
3215
  </button>
1437
3216
 
@@ -1442,7 +3221,19 @@ cssPrefix: pf-v6-c-button
1442
3221
  >
1443
3222
  <span class="pf-v6-c-button__text">Danger</span>
1444
3223
  <span class="pf-v6-c-button__icon pf-m-end">
1445
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3224
+ <svg
3225
+ class="pf-v6-svg"
3226
+ viewBox="0 0 32 32"
3227
+ fill="currentColor"
3228
+ aria-hidden="true"
3229
+ role="img"
3230
+ width="1em"
3231
+ height="1em"
3232
+ >
3233
+ <path
3234
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3235
+ />
3236
+ </svg>
1446
3237
  </span>
1447
3238
  </button>
1448
3239
 
@@ -1453,7 +3244,19 @@ cssPrefix: pf-v6-c-button
1453
3244
  >
1454
3245
  <span class="pf-v6-c-button__text">Warning</span>
1455
3246
  <span class="pf-v6-c-button__icon pf-m-end">
1456
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3247
+ <svg
3248
+ class="pf-v6-svg"
3249
+ viewBox="0 0 32 32"
3250
+ fill="currentColor"
3251
+ aria-hidden="true"
3252
+ role="img"
3253
+ width="1em"
3254
+ height="1em"
3255
+ >
3256
+ <path
3257
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3258
+ />
3259
+ </svg>
1457
3260
  </span>
1458
3261
  </button>
1459
3262
 
@@ -1467,7 +3270,19 @@ cssPrefix: pf-v6-c-button
1467
3270
  >
1468
3271
  <span class="pf-v6-c-button__text">Link</span>
1469
3272
  <span class="pf-v6-c-button__icon pf-m-end">
1470
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3273
+ <svg
3274
+ class="pf-v6-svg"
3275
+ viewBox="0 0 32 32"
3276
+ fill="currentColor"
3277
+ aria-hidden="true"
3278
+ role="img"
3279
+ width="1em"
3280
+ height="1em"
3281
+ >
3282
+ <path
3283
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3284
+ />
3285
+ </svg>
1471
3286
  </span>
1472
3287
  </button>
1473
3288
 
@@ -1478,7 +3293,19 @@ cssPrefix: pf-v6-c-button
1478
3293
  >
1479
3294
  <span class="pf-v6-c-button__text">Link danger</span>
1480
3295
  <span class="pf-v6-c-button__icon pf-m-end">
1481
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3296
+ <svg
3297
+ class="pf-v6-svg"
3298
+ viewBox="0 0 32 32"
3299
+ fill="currentColor"
3300
+ aria-hidden="true"
3301
+ role="img"
3302
+ width="1em"
3303
+ height="1em"
3304
+ >
3305
+ <path
3306
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3307
+ />
3308
+ </svg>
1482
3309
  </span>
1483
3310
  </button>
1484
3311
 
@@ -1489,7 +3316,19 @@ cssPrefix: pf-v6-c-button
1489
3316
  >
1490
3317
  <span class="pf-v6-c-button__text">Inline link</span>
1491
3318
  <span class="pf-v6-c-button__icon pf-m-end">
1492
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3319
+ <svg
3320
+ class="pf-v6-svg"
3321
+ viewBox="0 0 32 32"
3322
+ fill="currentColor"
3323
+ aria-hidden="true"
3324
+ role="img"
3325
+ width="1em"
3326
+ height="1em"
3327
+ >
3328
+ <path
3329
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3330
+ />
3331
+ </svg>
1493
3332
  </span>
1494
3333
  </button>
1495
3334
 
@@ -1500,21 +3339,69 @@ cssPrefix: pf-v6-c-button
1500
3339
  aria-disabled="true"
1501
3340
  >
1502
3341
  <span class="pf-v6-c-button__icon">
1503
- <i class="fas fa-times" aria-hidden="true"></i>
1504
- </span>
1505
- </button>
1506
-
1507
- <br />
1508
- <br />
1509
-
1510
- <button
1511
- class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
1512
- type="button"
1513
- aria-disabled="true"
3342
+ <svg
3343
+ class="pf-v6-svg"
3344
+ viewBox="0 0 20 20"
3345
+ fill="currentColor"
3346
+ aria-hidden="true"
3347
+ role="img"
3348
+ width="1em"
3349
+ height="1em"
3350
+ >
3351
+ <path
3352
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3353
+ />
3354
+ </svg>
3355
+ </span>
3356
+ </button>
3357
+
3358
+ <button
3359
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
3360
+ type="button"
3361
+ aria-label="Remove"
3362
+ aria-disabled="true"
3363
+ >
3364
+ <span class="pf-v6-c-button__text">Plain with text</span>
3365
+ <span class="pf-v6-c-button__icon pf-m-end">
3366
+ <svg
3367
+ class="pf-v6-svg"
3368
+ viewBox="0 0 20 20"
3369
+ fill="currentColor"
3370
+ aria-hidden="true"
3371
+ role="img"
3372
+ width="1em"
3373
+ height="1em"
3374
+ >
3375
+ <path
3376
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3377
+ />
3378
+ </svg>
3379
+ </span>
3380
+ </button>
3381
+
3382
+ <br />
3383
+ <br />
3384
+
3385
+ <button
3386
+ class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
3387
+ type="button"
3388
+ aria-disabled="true"
1514
3389
  >
1515
3390
  <span class="pf-v6-c-button__text">Control</span>
1516
3391
  <span class="pf-v6-c-button__icon pf-m-end">
1517
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3392
+ <svg
3393
+ class="pf-v6-svg"
3394
+ viewBox="0 0 32 32"
3395
+ fill="currentColor"
3396
+ aria-hidden="true"
3397
+ role="img"
3398
+ width="1em"
3399
+ height="1em"
3400
+ >
3401
+ <path
3402
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3403
+ />
3404
+ </svg>
1518
3405
  </span>
1519
3406
  </button>
1520
3407
 
@@ -1525,7 +3412,19 @@ cssPrefix: pf-v6-c-button
1525
3412
  aria-disabled="true"
1526
3413
  >
1527
3414
  <span class="pf-v6-c-button__icon">
1528
- <i class="fas fa-copy" aria-hidden="true"></i>
3415
+ <svg
3416
+ class="pf-v6-svg"
3417
+ viewBox="0 0 32 32"
3418
+ fill="currentColor"
3419
+ aria-hidden="true"
3420
+ role="img"
3421
+ width="1em"
3422
+ height="1em"
3423
+ >
3424
+ <path
3425
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
3426
+ />
3427
+ </svg>
1529
3428
  </span>
1530
3429
  </button>
1531
3430
 
@@ -1595,7 +3494,19 @@ cssPrefix: pf-v6-c-button
1595
3494
  aria-label="Remove"
1596
3495
  >
1597
3496
  <span class="pf-v6-c-button__icon">
1598
- <i class="fas fa-times" aria-hidden="true"></i>
3497
+ <svg
3498
+ class="pf-v6-svg"
3499
+ viewBox="0 0 20 20"
3500
+ fill="currentColor"
3501
+ aria-hidden="true"
3502
+ role="img"
3503
+ width="1em"
3504
+ height="1em"
3505
+ >
3506
+ <path
3507
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3508
+ />
3509
+ </svg>
1599
3510
  </span>
1600
3511
  </span>
1601
3512
  <br />
@@ -1610,7 +3521,19 @@ cssPrefix: pf-v6-c-button
1610
3521
  aria-label="Remove"
1611
3522
  >
1612
3523
  <span class="pf-v6-c-button__icon">
1613
- <i class="fas fa-times" aria-hidden="true"></i>
3524
+ <svg
3525
+ class="pf-v6-svg"
3526
+ viewBox="0 0 20 20"
3527
+ fill="currentColor"
3528
+ aria-hidden="true"
3529
+ role="img"
3530
+ width="1em"
3531
+ height="1em"
3532
+ >
3533
+ <path
3534
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3535
+ />
3536
+ </svg>
1614
3537
  </span>
1615
3538
  </span>
1616
3539
  <br />
@@ -1675,7 +3598,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1675
3598
  <button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button">
1676
3599
  <span class="pf-v6-c-button__text">Call to action</span>
1677
3600
  <span class="pf-v6-c-button__icon pf-m-end">
1678
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3601
+ <svg
3602
+ class="pf-v6-svg"
3603
+ viewBox="0 0 32 32"
3604
+ fill="currentColor"
3605
+ aria-hidden="true"
3606
+ role="img"
3607
+ width="1em"
3608
+ height="1em"
3609
+ >
3610
+ <path
3611
+ d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
3612
+ />
3613
+ </svg>
1679
3614
  </span>
1680
3615
  </button>
1681
3616
 
@@ -1685,7 +3620,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1685
3620
  >
1686
3621
  <span class="pf-v6-c-button__text">Call to action</span>
1687
3622
  <span class="pf-v6-c-button__icon pf-m-end">
1688
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3623
+ <svg
3624
+ class="pf-v6-svg"
3625
+ viewBox="0 0 32 32"
3626
+ fill="currentColor"
3627
+ aria-hidden="true"
3628
+ role="img"
3629
+ width="1em"
3630
+ height="1em"
3631
+ >
3632
+ <path
3633
+ d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
3634
+ />
3635
+ </svg>
1689
3636
  </span>
1690
3637
  </button>
1691
3638
  <br />
@@ -1719,7 +3666,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1719
3666
  <button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button" disabled>
1720
3667
  <span class="pf-v6-c-button__text">Call to action</span>
1721
3668
  <span class="pf-v6-c-button__icon pf-m-end">
1722
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3669
+ <svg
3670
+ class="pf-v6-svg"
3671
+ viewBox="0 0 32 32"
3672
+ fill="currentColor"
3673
+ aria-hidden="true"
3674
+ role="img"
3675
+ width="1em"
3676
+ height="1em"
3677
+ >
3678
+ <path
3679
+ d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
3680
+ />
3681
+ </svg>
1723
3682
  </span>
1724
3683
  </button>
1725
3684
 
@@ -1730,7 +3689,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1730
3689
  >
1731
3690
  <span class="pf-v6-c-button__text">Call to action</span>
1732
3691
  <span class="pf-v6-c-button__icon pf-m-end">
1733
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3692
+ <svg
3693
+ class="pf-v6-svg"
3694
+ viewBox="0 0 32 32"
3695
+ fill="currentColor"
3696
+ aria-hidden="true"
3697
+ role="img"
3698
+ width="1em"
3699
+ height="1em"
3700
+ >
3701
+ <path
3702
+ d="M30.354 14.939 19.708 4.293a.999.999 0 1 0-1.414 1.414L27.587 15H2a1 1 0 0 0 0 2h25.586l-9.293 9.293a.999.999 0 1 0 1.414 1.414l10.646-10.646c.283-.283.439-.66.439-1.061s-.156-.777-.439-1.061Z"
3703
+ />
3704
+ </svg>
1734
3705
  </span>
1735
3706
  </button>
1736
3707
 
@@ -1785,7 +3756,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1785
3756
  <br />
1786
3757
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Upload">
1787
3758
  <span class="pf-v6-c-button__icon">
1788
- <i class="fas fa-upload" aria-hidden="true"></i>
3759
+ <svg
3760
+ class="pf-v6-svg"
3761
+ viewBox="0 0 32 32"
3762
+ fill="currentColor"
3763
+ aria-hidden="true"
3764
+ role="img"
3765
+ width="1em"
3766
+ height="1em"
3767
+ >
3768
+ <path
3769
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
3770
+ />
3771
+ </svg>
1789
3772
  </span>
1790
3773
  </button>
1791
3774
 
@@ -1802,7 +3785,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1802
3785
  </span>
1803
3786
 
1804
3787
  <span class="pf-v6-c-button__icon">
1805
- <i class="fas fa-upload" aria-hidden="true"></i>
3788
+ <svg
3789
+ class="pf-v6-svg"
3790
+ viewBox="0 0 32 32"
3791
+ fill="currentColor"
3792
+ aria-hidden="true"
3793
+ role="img"
3794
+ width="1em"
3795
+ height="1em"
3796
+ >
3797
+ <path
3798
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
3799
+ />
3800
+ </svg>
1806
3801
  </span>
1807
3802
  </button>
1808
3803
  <br />
@@ -1842,7 +3837,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1842
3837
  aria-label="Add primary circle variant"
1843
3838
  >
1844
3839
  <span class="pf-v6-c-button__icon pf-m-start">
1845
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3840
+ <svg
3841
+ class="pf-v6-svg"
3842
+ viewBox="0 0 32 32"
3843
+ fill="currentColor"
3844
+ aria-hidden="true"
3845
+ role="img"
3846
+ width="1em"
3847
+ height="1em"
3848
+ >
3849
+ <path
3850
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3851
+ />
3852
+ </svg>
1846
3853
  </span>
1847
3854
  </button>
1848
3855
 
@@ -1852,7 +3859,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1852
3859
  aria-label="Add secondary circle variant"
1853
3860
  >
1854
3861
  <span class="pf-v6-c-button__icon pf-m-start">
1855
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3862
+ <svg
3863
+ class="pf-v6-svg"
3864
+ viewBox="0 0 32 32"
3865
+ fill="currentColor"
3866
+ aria-hidden="true"
3867
+ role="img"
3868
+ width="1em"
3869
+ height="1em"
3870
+ >
3871
+ <path
3872
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3873
+ />
3874
+ </svg>
1856
3875
  </span>
1857
3876
  </button>
1858
3877
 
@@ -1862,7 +3881,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1862
3881
  aria-label="Add tertiary circle variant"
1863
3882
  >
1864
3883
  <span class="pf-v6-c-button__icon pf-m-start">
1865
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3884
+ <svg
3885
+ class="pf-v6-svg"
3886
+ viewBox="0 0 32 32"
3887
+ fill="currentColor"
3888
+ aria-hidden="true"
3889
+ role="img"
3890
+ width="1em"
3891
+ height="1em"
3892
+ >
3893
+ <path
3894
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3895
+ />
3896
+ </svg>
1866
3897
  </span>
1867
3898
  </button>
1868
3899
 
@@ -1872,7 +3903,19 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1872
3903
  aria-label="Add danger circle variant"
1873
3904
  >
1874
3905
  <span class="pf-v6-c-button__icon pf-m-start">
1875
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3906
+ <svg
3907
+ class="pf-v6-svg"
3908
+ viewBox="0 0 32 32"
3909
+ fill="currentColor"
3910
+ aria-hidden="true"
3911
+ role="img"
3912
+ width="1em"
3913
+ height="1em"
3914
+ >
3915
+ <path
3916
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3917
+ />
3918
+ </svg>
1876
3919
  </span>
1877
3920
  </button>
1878
3921
 
@@ -1882,148 +3925,520 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1882
3925
  aria-label="Add warning circle variant"
1883
3926
  >
1884
3927
  <span class="pf-v6-c-button__icon pf-m-start">
1885
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3928
+ <svg
3929
+ class="pf-v6-svg"
3930
+ viewBox="0 0 32 32"
3931
+ fill="currentColor"
3932
+ aria-hidden="true"
3933
+ role="img"
3934
+ width="1em"
3935
+ height="1em"
3936
+ >
3937
+ <path
3938
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3939
+ />
3940
+ </svg>
3941
+ </span>
3942
+ </button>
3943
+
3944
+ <button
3945
+ class="pf-v6-c-button pf-m-circle pf-m-link"
3946
+ type="button"
3947
+ aria-label="Add link circle variant"
3948
+ >
3949
+ <span class="pf-v6-c-button__icon pf-m-start">
3950
+ <svg
3951
+ class="pf-v6-svg"
3952
+ viewBox="0 0 32 32"
3953
+ fill="currentColor"
3954
+ aria-hidden="true"
3955
+ role="img"
3956
+ width="1em"
3957
+ height="1em"
3958
+ >
3959
+ <path
3960
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm8-13a1 1 0 0 1-1 1h-6v6a1 1 0 0 1-2 0v-6H9a1 1 0 0 1 0-2h6V9a1 1 0 0 1 2 0v6h6a1 1 0 0 1 1 1Z"
3961
+ />
3962
+ </svg>
3963
+ </span>
3964
+ </button>
3965
+
3966
+ <button
3967
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
3968
+ type="button"
3969
+ aria-label="Remove plain circle variant"
3970
+ >
3971
+ <span class="pf-v6-c-button__icon pf-m-start">
3972
+ <svg
3973
+ class="pf-v6-svg"
3974
+ viewBox="0 0 20 20"
3975
+ fill="currentColor"
3976
+ aria-hidden="true"
3977
+ role="img"
3978
+ width="1em"
3979
+ height="1em"
3980
+ >
3981
+ <path
3982
+ d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
3983
+ />
3984
+ </svg>
1886
3985
  </span>
1887
3986
  </button>
1888
3987
 
1889
3988
  <button
1890
- class="pf-v6-c-button pf-m-circle pf-m-link"
3989
+ class="pf-v6-c-button pf-m-circle pf-m-control"
3990
+ type="button"
3991
+ aria-label="Copy control circle variant"
3992
+ >
3993
+ <span class="pf-v6-c-button__icon pf-m-start">
3994
+ <svg
3995
+ class="pf-v6-svg"
3996
+ viewBox="0 0 32 32"
3997
+ fill="currentColor"
3998
+ aria-hidden="true"
3999
+ role="img"
4000
+ width="1em"
4001
+ height="1em"
4002
+ >
4003
+ <path
4004
+ d="M28 7v22.607c0 .768-.622 1.393-1.387 1.393H10a1 1 0 1 1 0-2h16V7a1 1 0 1 1 2 0Zm-6.5 19h-16c-.827 0-1.5-.673-1.5-1.5V8a1.001 1.001 0 0 1 .294-.708l5.998-5.998A1.001 1.001 0 0 1 11 1h10.5c.827 0 1.5.673 1.5 1.5v22c0 .827-.673 1.5-1.5 1.5ZM7.414 7H10V4.414L7.414 7ZM21 3h-9v4.614C12 8.378 11.378 9 10.613 9H6v15h15V3Z"
4005
+ />
4006
+ </svg>
4007
+ </span>
4008
+ </button>
4009
+
4010
+ <button
4011
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
4012
+ type="button"
4013
+ aria-label="Upload circle variant"
4014
+ >
4015
+ <span class="pf-v6-c-button__icon">
4016
+ <svg
4017
+ class="pf-v6-svg"
4018
+ viewBox="0 0 32 32"
4019
+ fill="currentColor"
4020
+ aria-hidden="true"
4021
+ role="img"
4022
+ width="1em"
4023
+ height="1em"
4024
+ >
4025
+ <path
4026
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
4027
+ />
4028
+ </svg>
4029
+ </span>
4030
+ </button>
4031
+
4032
+ <button
4033
+ class="pf-v6-c-button pf-m-circle pf-m-in-progress pf-m-plain"
4034
+ type="button"
4035
+ >
4036
+ <span class="pf-v6-c-button__progress">
4037
+ <svg
4038
+ class="pf-v6-c-spinner pf-m-md"
4039
+ role="progressbar"
4040
+ viewBox="0 0 100 100"
4041
+ aria-label="Uploading circle variant..."
4042
+ >
4043
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
4044
+ </svg>
4045
+ </span>
4046
+
4047
+ <span class="pf-v6-c-button__icon">
4048
+ <svg
4049
+ class="pf-v6-svg"
4050
+ viewBox="0 0 32 32"
4051
+ fill="currentColor"
4052
+ aria-hidden="true"
4053
+ role="img"
4054
+ width="1em"
4055
+ height="1em"
4056
+ >
4057
+ <path
4058
+ d="M30 29a1 1 0 0 1-1 1H3a1 1 0 1 1 0-2h26a1 1 0 0 1 1 1ZM7.707 12.707 15 5.414V24a1 1 0 1 0 2 0V5.414l7.293 7.293a.997.997 0 0 0 1.414 0 .999.999 0 0 0 0-1.414l-8.646-8.647a1.5 1.5 0 0 0-2.121 0l-8.647 8.647a.999.999 0 1 0 1.414 1.414Z"
4059
+ />
4060
+ </svg>
4061
+ </span>
4062
+ </button>
4063
+
4064
+ ```
4065
+
4066
+ ### Counts
4067
+
4068
+ ```html
4069
+ <button class="pf-v6-c-button pf-m-primary" type="button">
4070
+ <span class="pf-v6-c-button__text">View issues</span>
4071
+ <span class="pf-v6-c-button__count">
4072
+ <span class="pf-v6-c-badge pf-m-unread">
4073
+ 7
4074
+ <span class="pf-v6-screen-reader">unread messages</span>
4075
+ </span>
4076
+ </span>
4077
+ </button>
4078
+ <button class="pf-v6-c-button pf-m-primary" type="button">
4079
+ <span class="pf-v6-c-button__text">View issues</span>
4080
+ <span class="pf-v6-c-button__count">
4081
+ <span class="pf-v6-c-badge pf-m-read">7</span>
4082
+ </span>
4083
+ </button>
4084
+ <button class="pf-v6-c-button pf-m-link" type="button">
4085
+ <span class="pf-v6-c-button__text">View issues</span>
4086
+ <span class="pf-v6-c-button__count">
4087
+ <span class="pf-v6-c-badge pf-m-unread">
4088
+ 7
4089
+ <span class="pf-v6-screen-reader">unread messages</span>
4090
+ </span>
4091
+ </span>
4092
+ </button>
4093
+ <button class="pf-v6-c-button pf-m-link" type="button">
4094
+ <span class="pf-v6-c-button__text">View issues</span>
4095
+ <span class="pf-v6-c-button__count">
4096
+ <span class="pf-v6-c-badge pf-m-read">7</span>
4097
+ </span>
4098
+ </button>
4099
+ <br />
4100
+ <strong>disabled</strong>
4101
+ <br />
4102
+ <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
4103
+ <span class="pf-v6-c-button__text">View issues</span>
4104
+ <span class="pf-v6-c-button__count">
4105
+ <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">7</span>
4106
+ </span>
4107
+ </button>
4108
+ <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
4109
+ <span class="pf-v6-c-button__text">View issues</span>
4110
+ <span class="pf-v6-c-button__count">
4111
+ <span class="pf-v6-c-badge pf-m-read pf-m-disabled">7</span>
4112
+ </span>
4113
+ </button>
4114
+ <button class="pf-v6-c-button pf-m-link" type="button" disabled>
4115
+ <span class="pf-v6-c-button__text">View issues</span>
4116
+ <span class="pf-v6-c-button__count">
4117
+ <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">7</span>
4118
+ </span>
4119
+ </button>
4120
+ <button class="pf-v6-c-button pf-m-link" type="button" disabled>
4121
+ <span class="pf-v6-c-button__text">View issues</span>
4122
+ <span class="pf-v6-c-button__count">
4123
+ <span class="pf-v6-c-badge pf-m-read pf-m-disabled">7</span>
4124
+ </span>
4125
+ </button>
4126
+
4127
+ ```
4128
+
4129
+ ### Plain with no padding
4130
+
4131
+ ```html
4132
+ For when a plain/icon button is placed inline with text
4133
+ <button
4134
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4135
+ type="button"
4136
+ aria-label="More info"
4137
+ >
4138
+ <span class="pf-v6-c-button__icon">
4139
+ <svg
4140
+ class="pf-v6-svg"
4141
+ viewBox="0 0 32 32"
4142
+ fill="currentColor"
4143
+ aria-hidden="true"
4144
+ role="img"
4145
+ width="1em"
4146
+ height="1em"
4147
+ >
4148
+ <path
4149
+ d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm0 28C8.832 29 3 23.168 3 16S8.832 3 16 3s13 5.832 13 13-5.832 13-13 13Zm5-17a5.008 5.008 0 0 1-4 4.899V19a1 1 0 0 1-2 0v-3a1 1 0 0 1 1-1c1.654 0 3-1.346 3-3s-1.346-3-3-3-3 1.346-3 3a1 1 0 0 1-2 0c0-2.757 2.243-5 5-5s5 2.243 5 5Zm-3.25 12a1.75 1.75 0 1 1-3.501-.001A1.75 1.75 0 0 1 17.75 24Z"
4150
+ />
4151
+ </svg>
4152
+ </span>
4153
+ </button>
4154
+ .
4155
+
4156
+ ```
4157
+
4158
+ ### Stateful
4159
+
4160
+ ```html
4161
+ <strong>Read</strong>
4162
+ <br />
4163
+ <button class="pf-v6-c-button pf-m-read pf-m-stateful" type="button">
4164
+ <span class="pf-v6-c-button__icon pf-m-start">
4165
+ <svg
4166
+ class="pf-v6-svg"
4167
+ viewBox="0 0 32 32"
4168
+ fill="currentColor"
4169
+ aria-hidden="true"
4170
+ role="img"
4171
+ width="1em"
4172
+ height="1em"
4173
+ >
4174
+ <path
4175
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4176
+ />
4177
+ </svg>
4178
+ </span>
4179
+ <span class="pf-v6-c-button__text">
4180
+ 10
4181
+ <span class="pf-v6-screen-reader">items</span>
4182
+ </span>
4183
+ </button>
4184
+
4185
+ <button
4186
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked"
4187
+ type="button"
4188
+ >
4189
+ <span class="pf-v6-c-button__icon pf-m-start">
4190
+ <svg
4191
+ class="pf-v6-svg"
4192
+ viewBox="0 0 32 32"
4193
+ fill="currentColor"
4194
+ aria-hidden="true"
4195
+ role="img"
4196
+ width="1em"
4197
+ height="1em"
4198
+ >
4199
+ <path
4200
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4201
+ />
4202
+ </svg>
4203
+ </span>
4204
+ <span class="pf-v6-c-button__text">
4205
+ 10
4206
+ <span class="pf-v6-screen-reader">items</span>
4207
+ </span>
4208
+ </button>
4209
+
4210
+ <br />
4211
+ <br />
4212
+
4213
+ <strong>Unread</strong>
4214
+ <br />
4215
+ <button class="pf-v6-c-button pf-m-unread pf-m-stateful" type="button">
4216
+ <span class="pf-v6-c-button__icon pf-m-start">
4217
+ <svg
4218
+ class="pf-v6-svg"
4219
+ viewBox="0 0 32 32"
4220
+ fill="currentColor"
4221
+ aria-hidden="true"
4222
+ role="img"
4223
+ width="1em"
4224
+ height="1em"
4225
+ >
4226
+ <path
4227
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4228
+ />
4229
+ </svg>
4230
+ </span>
4231
+ <span class="pf-v6-c-button__text">
4232
+ 10
4233
+ <span class="pf-v6-screen-reader">unread items</span>
4234
+ </span>
4235
+ </button>
4236
+
4237
+ <button
4238
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked"
4239
+ type="button"
4240
+ >
4241
+ <span class="pf-v6-c-button__icon pf-m-start">
4242
+ <svg
4243
+ class="pf-v6-svg"
4244
+ viewBox="0 0 32 32"
4245
+ fill="currentColor"
4246
+ aria-hidden="true"
4247
+ role="img"
4248
+ width="1em"
4249
+ height="1em"
4250
+ >
4251
+ <path
4252
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4253
+ />
4254
+ </svg>
4255
+ </span>
4256
+ <span class="pf-v6-c-button__text">
4257
+ 10
4258
+ <span class="pf-v6-screen-reader">unread items</span>
4259
+ </span>
4260
+ </button>
4261
+
4262
+ <br />
4263
+ <br />
4264
+
4265
+ <strong>Attention</strong>
4266
+ <br />
4267
+ <button class="pf-v6-c-button pf-m-attention pf-m-stateful" type="button">
4268
+ <span class="pf-v6-c-button__icon pf-m-start">
4269
+ <svg
4270
+ class="pf-v6-svg"
4271
+ viewBox="0 0 32 32"
4272
+ fill="currentColor"
4273
+ aria-hidden="true"
4274
+ role="img"
4275
+ width="1em"
4276
+ height="1em"
4277
+ >
4278
+ <path
4279
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4280
+ />
4281
+ </svg>
4282
+ </span>
4283
+ <span class="pf-v6-c-button__text">
4284
+ 10
4285
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
4286
+ </span>
4287
+ </button>
4288
+
4289
+ <button
4290
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked"
4291
+ type="button"
4292
+ >
4293
+ <span class="pf-v6-c-button__icon pf-m-start">
4294
+ <svg
4295
+ class="pf-v6-svg"
4296
+ viewBox="0 0 32 32"
4297
+ fill="currentColor"
4298
+ aria-hidden="true"
4299
+ role="img"
4300
+ width="1em"
4301
+ height="1em"
4302
+ >
4303
+ <path
4304
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4305
+ />
4306
+ </svg>
4307
+ </span>
4308
+ <span class="pf-v6-c-button__text">
4309
+ 10
4310
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
4311
+ </span>
4312
+ </button>
4313
+
4314
+ <br />
4315
+ <br />
4316
+
4317
+ <strong>Plain</strong>
4318
+ <br />
4319
+ <button
4320
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-plain"
1891
4321
  type="button"
1892
- aria-label="Add link circle variant"
4322
+ aria-label="all items read"
1893
4323
  >
1894
4324
  <span class="pf-v6-c-button__icon pf-m-start">
1895
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
4325
+ <svg
4326
+ class="pf-v6-svg"
4327
+ viewBox="0 0 32 32"
4328
+ fill="currentColor"
4329
+ aria-hidden="true"
4330
+ role="img"
4331
+ width="1em"
4332
+ height="1em"
4333
+ >
4334
+ <path
4335
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4336
+ />
4337
+ </svg>
1896
4338
  </span>
1897
4339
  </button>
1898
4340
 
1899
4341
  <button
1900
- class="pf-v6-c-button pf-m-circle pf-m-plain"
4342
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-plain"
1901
4343
  type="button"
1902
- aria-label="Remove plain circle variant"
4344
+ aria-label="all items read"
1903
4345
  >
1904
4346
  <span class="pf-v6-c-button__icon pf-m-start">
1905
- <i class="fas fa-times" aria-hidden="true"></i>
4347
+ <svg
4348
+ class="pf-v6-svg"
4349
+ viewBox="0 0 32 32"
4350
+ fill="currentColor"
4351
+ aria-hidden="true"
4352
+ role="img"
4353
+ width="1em"
4354
+ height="1em"
4355
+ >
4356
+ <path
4357
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4358
+ />
4359
+ </svg>
1906
4360
  </span>
1907
4361
  </button>
1908
4362
 
4363
+ <br />
4364
+
1909
4365
  <button
1910
- class="pf-v6-c-button pf-m-circle pf-m-control"
4366
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-plain"
1911
4367
  type="button"
1912
- aria-label="Copy control circle variant"
4368
+ aria-label="unread items"
1913
4369
  >
1914
4370
  <span class="pf-v6-c-button__icon pf-m-start">
1915
- <i class="fas fa-copy" aria-hidden="true"></i>
4371
+ <svg
4372
+ class="pf-v6-svg"
4373
+ viewBox="0 0 32 32"
4374
+ fill="currentColor"
4375
+ aria-hidden="true"
4376
+ role="img"
4377
+ width="1em"
4378
+ height="1em"
4379
+ >
4380
+ <path
4381
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4382
+ />
4383
+ </svg>
1916
4384
  </span>
1917
4385
  </button>
1918
4386
 
1919
4387
  <button
1920
- class="pf-v6-c-button pf-m-circle pf-m-plain"
4388
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-plain"
1921
4389
  type="button"
1922
- aria-label="Upload circle variant"
4390
+ aria-label="unread items"
1923
4391
  >
1924
- <span class="pf-v6-c-button__icon">
1925
- <i class="fas fa-upload" aria-hidden="true"></i>
4392
+ <span class="pf-v6-c-button__icon pf-m-start">
4393
+ <svg
4394
+ class="pf-v6-svg"
4395
+ viewBox="0 0 32 32"
4396
+ fill="currentColor"
4397
+ aria-hidden="true"
4398
+ role="img"
4399
+ width="1em"
4400
+ height="1em"
4401
+ >
4402
+ <path
4403
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4404
+ />
4405
+ </svg>
1926
4406
  </span>
1927
4407
  </button>
1928
4408
 
4409
+ <br />
4410
+
1929
4411
  <button
1930
- class="pf-v6-c-button pf-m-circle pf-m-in-progress pf-m-plain"
4412
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-plain"
1931
4413
  type="button"
4414
+ aria-label="unread items, needs attention"
1932
4415
  >
1933
- <span class="pf-v6-c-button__progress">
4416
+ <span class="pf-v6-c-button__icon pf-m-start">
1934
4417
  <svg
1935
- class="pf-v6-c-spinner pf-m-md"
1936
- role="progressbar"
1937
- viewBox="0 0 100 100"
1938
- aria-label="Uploading circle variant..."
4418
+ class="pf-v6-svg"
4419
+ viewBox="0 0 32 32"
4420
+ fill="currentColor"
4421
+ aria-hidden="true"
4422
+ role="img"
4423
+ width="1em"
4424
+ height="1em"
1939
4425
  >
1940
- <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
4426
+ <path
4427
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4428
+ />
1941
4429
  </svg>
1942
4430
  </span>
1943
-
1944
- <span class="pf-v6-c-button__icon">
1945
- <i class="fas fa-upload" aria-hidden="true"></i>
1946
- </span>
1947
- </button>
1948
-
1949
- ```
1950
-
1951
- ### Counts
1952
-
1953
- ```html
1954
- <button class="pf-v6-c-button pf-m-primary" type="button">
1955
- <span class="pf-v6-c-button__text">View issues</span>
1956
- <span class="pf-v6-c-button__count">
1957
- <span class="pf-v6-c-badge pf-m-unread">
1958
- 7
1959
- <span class="pf-v6-screen-reader">unread messages</span>
1960
- </span>
1961
- </span>
1962
- </button>
1963
- <button class="pf-v6-c-button pf-m-primary" type="button">
1964
- <span class="pf-v6-c-button__text">View issues</span>
1965
- <span class="pf-v6-c-button__count">
1966
- <span class="pf-v6-c-badge pf-m-read">7</span>
1967
- </span>
1968
- </button>
1969
- <button class="pf-v6-c-button pf-m-link" type="button">
1970
- <span class="pf-v6-c-button__text">View issues</span>
1971
- <span class="pf-v6-c-button__count">
1972
- <span class="pf-v6-c-badge pf-m-unread">
1973
- 7
1974
- <span class="pf-v6-screen-reader">unread messages</span>
1975
- </span>
1976
- </span>
1977
- </button>
1978
- <button class="pf-v6-c-button pf-m-link" type="button">
1979
- <span class="pf-v6-c-button__text">View issues</span>
1980
- <span class="pf-v6-c-button__count">
1981
- <span class="pf-v6-c-badge pf-m-read">7</span>
1982
- </span>
1983
- </button>
1984
- <br />
1985
- <strong>disabled</strong>
1986
- <br />
1987
- <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
1988
- <span class="pf-v6-c-button__text">View issues</span>
1989
- <span class="pf-v6-c-button__count">
1990
- <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">7</span>
1991
- </span>
1992
- </button>
1993
- <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
1994
- <span class="pf-v6-c-button__text">View issues</span>
1995
- <span class="pf-v6-c-button__count">
1996
- <span class="pf-v6-c-badge pf-m-read pf-m-disabled">7</span>
1997
- </span>
1998
- </button>
1999
- <button class="pf-v6-c-button pf-m-link" type="button" disabled>
2000
- <span class="pf-v6-c-button__text">View issues</span>
2001
- <span class="pf-v6-c-button__count">
2002
- <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">7</span>
2003
- </span>
2004
- </button>
2005
- <button class="pf-v6-c-button pf-m-link" type="button" disabled>
2006
- <span class="pf-v6-c-button__text">View issues</span>
2007
- <span class="pf-v6-c-button__count">
2008
- <span class="pf-v6-c-badge pf-m-read pf-m-disabled">7</span>
2009
- </span>
2010
4431
  </button>
2011
4432
 
2012
- ```
2013
-
2014
- ### Plain with no padding
2015
-
2016
- ```html
2017
- For when a plain/icon button is placed inline with text
2018
4433
  <button
2019
- class="pf-v6-c-button pf-m-no-padding pf-m-plain"
4434
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-plain"
2020
4435
  type="button"
2021
- aria-label="More info"
4436
+ aria-label="unread items, needs attention"
2022
4437
  >
2023
- <span class="pf-v6-c-button__icon">
4438
+ <span class="pf-v6-c-button__icon pf-m-start">
2024
4439
  <svg
2025
4440
  class="pf-v6-svg"
2026
- viewBox="0 0 1024 1024"
4441
+ viewBox="0 0 32 32"
2027
4442
  fill="currentColor"
2028
4443
  aria-hidden="true"
2029
4444
  role="img"
@@ -2031,23 +4446,32 @@ For when a plain/icon button is placed inline with text
2031
4446
  height="1em"
2032
4447
  >
2033
4448
  <path
2034
- d="M521.3,576 C627.5,576 713.7,502 713.7,413.7 C713.7,325.4 627.6,253.6 521.3,253.6 C366,253.6 334.5,337.7 329.2,407.2 C329.2,414.3 335.2,416 343.5,416 L445,416 C450.5,416 458,415.5 460.8,406.5 C460.8,362.6 582.9,357.1 582.9,413.6 C582.9,441.9 556.2,470.9 521.3,473 C486.4,475.1 447.3,479.8 447.3,521.7 L447.3,553.8 C447.3,570.8 456.1,576 472,576 C487.9,576 521.3,576 521.3,576 M575.3,751.3 L575.3,655.3 C575.313862,651.055109 573.620137,646.982962 570.6,644 C567.638831,640.947672 563.552355,639.247987 559.3,639.29884 L463.3,639.29884 C459.055109,639.286138 454.982962,640.979863 452,644 C448.947672,646.961169 447.247987,651.047645 447.29884,655.3 L447.29884,751.3 C447.286138,755.544891 448.979863,759.617038 452,762.6 C454.961169,765.652328 459.047645,767.352013 463.3,767.30116 L559.3,767.30116 C563.544891,767.313862 567.617038,765.620137 570.6,762.6 C573.659349,759.643612 575.360354,755.553963 575.3,751.3 M512,896 C300.2,896 128,723.9 128,512 C128,300.3 300.2,128 512,128 C723.8,128 896,300.2 896,512 C896,723.8 723.7,896 512,896 M512.1,0 C229.7,0 0,229.8 0,512 C0,794.2 229.8,1024 512.1,1024 C794.4,1024 1024,794.3 1024,512 C1024,229.7 794.4,0 512.1,0"
4449
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
2035
4450
  />
2036
4451
  </svg>
2037
4452
  </span>
2038
4453
  </button>
2039
- .
2040
-
2041
- ```
2042
4454
 
2043
- ### Stateful
4455
+ <br />
4456
+ <br />
2044
4457
 
2045
- ```html
2046
- <strong>Read</strong>
4458
+ <strong>Plain with count</strong>
2047
4459
  <br />
2048
- <button class="pf-v6-c-button pf-m-read pf-m-stateful" type="button">
4460
+ <button class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-plain" type="button">
2049
4461
  <span class="pf-v6-c-button__icon pf-m-start">
2050
- <i class="fas fa-bell" aria-hidden="true"></i>
4462
+ <svg
4463
+ class="pf-v6-svg"
4464
+ viewBox="0 0 32 32"
4465
+ fill="currentColor"
4466
+ aria-hidden="true"
4467
+ role="img"
4468
+ width="1em"
4469
+ height="1em"
4470
+ >
4471
+ <path
4472
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4473
+ />
4474
+ </svg>
2051
4475
  </span>
2052
4476
  <span class="pf-v6-c-button__text">
2053
4477
  10
@@ -2056,11 +4480,23 @@ For when a plain/icon button is placed inline with text
2056
4480
  </button>
2057
4481
 
2058
4482
  <button
2059
- class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked"
4483
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked pf-m-plain"
2060
4484
  type="button"
2061
4485
  >
2062
4486
  <span class="pf-v6-c-button__icon pf-m-start">
2063
- <i class="fas fa-bell" aria-hidden="true"></i>
4487
+ <svg
4488
+ class="pf-v6-svg"
4489
+ viewBox="0 0 32 32"
4490
+ fill="currentColor"
4491
+ aria-hidden="true"
4492
+ role="img"
4493
+ width="1em"
4494
+ height="1em"
4495
+ >
4496
+ <path
4497
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4498
+ />
4499
+ </svg>
2064
4500
  </span>
2065
4501
  <span class="pf-v6-c-button__text">
2066
4502
  10
@@ -2068,14 +4504,26 @@ For when a plain/icon button is placed inline with text
2068
4504
  </span>
2069
4505
  </button>
2070
4506
 
2071
- <br />
2072
4507
  <br />
2073
4508
 
2074
- <strong>Unread</strong>
2075
- <br />
2076
- <button class="pf-v6-c-button pf-m-unread pf-m-stateful" type="button">
4509
+ <button
4510
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-plain"
4511
+ type="button"
4512
+ >
2077
4513
  <span class="pf-v6-c-button__icon pf-m-start">
2078
- <i class="fas fa-bell" aria-hidden="true"></i>
4514
+ <svg
4515
+ class="pf-v6-svg"
4516
+ viewBox="0 0 32 32"
4517
+ fill="currentColor"
4518
+ aria-hidden="true"
4519
+ role="img"
4520
+ width="1em"
4521
+ height="1em"
4522
+ >
4523
+ <path
4524
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4525
+ />
4526
+ </svg>
2079
4527
  </span>
2080
4528
  <span class="pf-v6-c-button__text">
2081
4529
  10
@@ -2084,11 +4532,23 @@ For when a plain/icon button is placed inline with text
2084
4532
  </button>
2085
4533
 
2086
4534
  <button
2087
- class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked"
4535
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked pf-m-plain"
2088
4536
  type="button"
2089
4537
  >
2090
4538
  <span class="pf-v6-c-button__icon pf-m-start">
2091
- <i class="fas fa-bell" aria-hidden="true"></i>
4539
+ <svg
4540
+ class="pf-v6-svg"
4541
+ viewBox="0 0 32 32"
4542
+ fill="currentColor"
4543
+ aria-hidden="true"
4544
+ role="img"
4545
+ width="1em"
4546
+ height="1em"
4547
+ >
4548
+ <path
4549
+ d="M28.75 22v3.5c0 .689-.561 1.25-1.25 1.25h-7.521c.005.084.021.166.021.25 0 2.206-1.794 4-4 4s-4-1.794-4-4c0-.084.016-.166.021-.25H4.5c-.689 0-1.25-.561-1.25-1.25V22a.75.75 0 0 1 .75-.75c1.24 0 2.25-1.009 2.25-2.25v-4c0-4.826 3.528-8.833 8.138-9.605A2.482 2.482 0 0 1 13.5 3.5C13.5 2.122 14.621 1 16 1s2.5 1.122 2.5 2.5c0 .761-.349 1.436-.888 1.895 4.61.772 8.138 4.779 8.138 9.605v4c0 1.241 1.01 2.25 2.25 2.25a.75.75 0 0 1 .75.75Z"
4550
+ />
4551
+ </svg>
2092
4552
  </span>
2093
4553
  <span class="pf-v6-c-button__text">
2094
4554
  10
@@ -2096,14 +4556,26 @@ For when a plain/icon button is placed inline with text
2096
4556
  </span>
2097
4557
  </button>
2098
4558
 
2099
- <br />
2100
4559
  <br />
2101
4560
 
2102
- <strong>Attention</strong>
2103
- <br />
2104
- <button class="pf-v6-c-button pf-m-attention pf-m-stateful" type="button">
4561
+ <button
4562
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-plain"
4563
+ type="button"
4564
+ >
2105
4565
  <span class="pf-v6-c-button__icon pf-m-start">
2106
- <i class="fas fa-bell" aria-hidden="true"></i>
4566
+ <svg
4567
+ class="pf-v6-svg"
4568
+ viewBox="0 0 32 32"
4569
+ fill="currentColor"
4570
+ aria-hidden="true"
4571
+ role="img"
4572
+ width="1em"
4573
+ height="1em"
4574
+ >
4575
+ <path
4576
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4577
+ />
4578
+ </svg>
2107
4579
  </span>
2108
4580
  <span class="pf-v6-c-button__text">
2109
4581
  10
@@ -2112,11 +4584,23 @@ For when a plain/icon button is placed inline with text
2112
4584
  </button>
2113
4585
 
2114
4586
  <button
2115
- class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked"
4587
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked pf-m-plain"
2116
4588
  type="button"
2117
4589
  >
2118
4590
  <span class="pf-v6-c-button__icon pf-m-start">
2119
- <i class="fas fa-bell" aria-hidden="true"></i>
4591
+ <svg
4592
+ class="pf-v6-svg"
4593
+ viewBox="0 0 32 32"
4594
+ fill="currentColor"
4595
+ aria-hidden="true"
4596
+ role="img"
4597
+ width="1em"
4598
+ height="1em"
4599
+ >
4600
+ <path
4601
+ d="M28 21c-1.103 0-2-.897-2-2v-4c0-4.884-3.523-8.955-8.159-9.823.405-.444.659-1.03.659-1.677C18.5 2.121 17.379 1 16 1s-2.5 1.121-2.5 2.5c0 .648.254 1.233.659 1.677C9.523 6.045 6 10.116 6 15v4c0 1.103-.897 2-2 2a1 1 0 0 0-1 1v3.5c0 .827.673 1.5 1.5 1.5H12c0 2.206 1.794 4 4 4s4-1.794 4-4h7.5c.827 0 1.5-.673 1.5-1.5V22a1 1 0 0 0-1-1ZM14.5 11a1.5 1.5 0 0 1 3 0v5a1.5 1.5 0 0 1-3 0v-5ZM16 24.014a2 2 0 1 1-.001-3.999A2 2 0 0 1 16 24.014Z"
4602
+ />
4603
+ </svg>
2120
4604
  </span>
2121
4605
  <span class="pf-v6-c-button__text">
2122
4606
  10
@@ -2219,7 +4703,19 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2219
4703
  aria-label="Settings"
2220
4704
  >
2221
4705
  <span class="pf-v6-c-button__icon">
2222
- <i class="fas fa-cog" aria-hidden="true"></i>
4706
+ <svg
4707
+ class="pf-v6-svg"
4708
+ viewBox="0 0 32 32"
4709
+ fill="currentColor"
4710
+ aria-hidden="true"
4711
+ role="img"
4712
+ width="1em"
4713
+ height="1em"
4714
+ >
4715
+ <path
4716
+ d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
4717
+ />
4718
+ </svg>
2223
4719
  </span>
2224
4720
  </button>
2225
4721
 
@@ -2329,7 +4825,7 @@ Semantic buttons and links are important for usability as well as accessibility.
2329
4825
  | `.pf-m-danger` | `.pf-v6-c-button` | Modifies for danger styles. |
2330
4826
  | `.pf-m-warning` | `.pf-v6-c-button` | Modifies for warning styles. |
2331
4827
  | `.pf-m-link` | `.pf-v6-c-button` | Modifies for link styles. This button has no background or border and is styled as a link. This button would commonly appear in a form and may include an icon. |
2332
- | `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, etc. |
4828
+ | `.pf-m-plain` | `.pf-v6-c-button` | Modifies for icon styles. This button has no background or border, uses a standard text color, and is used for `.pf-m-plain` icon buttons such as close, expand, kebab, stateful, etc. |
2333
4829
  | `.pf-m-no-padding` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to remove padding. This modifier should only be used when the button is inline within a sentence or block of text. Adjacent plain buttons without padding should always have spacing between them. |
2334
4830
  | `.pf-m-inline` | `.pf-v6-c-button.pf-m-link` | Modifies for inline styles. This button is presented similar to a normal link and has no padding and is displayed inline with other inline content. When used as a `<span>`, the text will flow inline with text around it. |
2335
4831
  | `.pf-m-block` | `.pf-v6-c-button` | Creates a block level button. |