@patternfly/patternfly 6.5.0-prerelease.5 → 6.5.0-prerelease.50

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 (376) hide show
  1. package/README.md +1 -1
  2. package/assets/fontawesome/_variables.scss +2 -1
  3. package/assets/images/RHAiExperienceIcon.svg +27 -0
  4. package/assets/images/RHAutomationsLogo.svg +96 -0
  5. package/assets/images/RHServerStackIcon.svg +16 -0
  6. package/assets/images/compass--hero-bg.png +0 -0
  7. package/assets/images/compass--rh-wallpaper-dark.png +0 -0
  8. package/assets/images/compass--rh-wallpaper-light.png +0 -0
  9. package/assets/images/compass--wallpaper-dark.png +0 -0
  10. package/assets/images/compass--wallpaper-light.png +0 -0
  11. package/base/normalize.scss +7 -0
  12. package/base/patternfly-common.css +50 -0
  13. package/base/patternfly-common.scss +59 -0
  14. package/base/patternfly-svg-icons.css +11 -0
  15. package/base/patternfly-svg-icons.scss +14 -0
  16. package/base/patternfly-variables.css +345 -14
  17. package/base/patternfly-variables.scss +40 -0
  18. package/base/tokens/tokens-dark.scss +51 -3
  19. package/base/tokens/tokens-default.scss +67 -13
  20. package/base/tokens/tokens-glass-dark.scss +9 -0
  21. package/base/tokens/tokens-glass.scss +9 -0
  22. package/base/tokens/tokens-local.scss +16 -0
  23. package/base/tokens/tokens-palette.scss +3 -1
  24. package/base/tokens/tokens-redhat-dark.scss +14 -0
  25. package/base/tokens/tokens-redhat-glass-dark.scss +16 -0
  26. package/base/tokens/tokens-redhat-glass.scss +15 -0
  27. package/base/tokens/tokens-redhat-highcontrast-dark.scss +47 -0
  28. package/base/tokens/tokens-redhat-highcontrast.scss +127 -0
  29. package/base/tokens/tokens-redhat.scss +15 -0
  30. package/components/AboutModalBox/about-modal-box.css +36 -26
  31. package/components/Accordion/accordion.css +17 -14
  32. package/components/Accordion/accordion.scss +1 -2
  33. package/components/ActionList/action-list.css +2 -0
  34. package/components/ActionList/action-list.scss +2 -0
  35. package/components/Alert/alert.css +7 -5
  36. package/components/Alert/alert.scss +2 -1
  37. package/components/Avatar/avatar.css +12 -4
  38. package/components/BackgroundImage/background-image.css +6 -3
  39. package/components/Banner/banner.css +8 -6
  40. package/components/Brand/brand.css +3 -1
  41. package/components/Breadcrumb/breadcrumb.css +4 -3
  42. package/components/Button/button.css +117 -14
  43. package/components/Button/button.scss +127 -10
  44. package/components/CalendarMonth/calendar-month.css +4 -3
  45. package/components/Card/card.css +20 -7
  46. package/components/Card/card.scss +16 -2
  47. package/components/ClipboardCopy/clipboard-copy.css +7 -6
  48. package/components/ClipboardCopy/clipboard-copy.scss +3 -3
  49. package/components/CodeEditor/code-editor.css +1 -1
  50. package/components/CodeEditor/code-editor.scss +1 -1
  51. package/components/Compass/compass.css +320 -0
  52. package/components/Compass/compass.scss +350 -0
  53. package/components/DataList/data-list.css +34 -23
  54. package/components/DataList/data-list.scss +7 -2
  55. package/components/DescriptionList/description-list-order.scss +5 -1
  56. package/components/DescriptionList/description-list.css +7 -5
  57. package/components/DescriptionList/description-list.scss +5 -1
  58. package/components/Divider/divider.css +7 -5
  59. package/components/Drawer/drawer.css +110 -56
  60. package/components/Drawer/drawer.scss +69 -9
  61. package/components/DualListSelector/dual-list-selector.css +18 -12
  62. package/components/DualListSelector/dual-list-selector.scss +1 -1
  63. package/components/ExpandableSection/expandable-section.css +21 -16
  64. package/components/ExpandableSection/expandable-section.scss +6 -3
  65. package/components/Form/form.css +2 -2
  66. package/components/Form/form.scss +2 -2
  67. package/components/FormControl/form-control.css +3 -3
  68. package/components/FormControl/form-control.scss +3 -3
  69. package/components/Hero/hero.css +74 -0
  70. package/components/Hero/hero.scss +86 -0
  71. package/components/JumpLinks/jump-links.css +5 -4
  72. package/components/JumpLinks/jump-links.scss +6 -2
  73. package/components/Label/label-group.css +2 -2
  74. package/components/Label/label-group.scss +2 -2
  75. package/components/Label/label.css +4 -3
  76. package/components/Login/login.css +51 -37
  77. package/components/Masthead/masthead.css +70 -16
  78. package/components/Masthead/masthead.scss +54 -1
  79. package/components/Menu/menu.css +23 -14
  80. package/components/MenuToggle/menu-toggle.css +5 -1
  81. package/components/MenuToggle/menu-toggle.scss +6 -1
  82. package/components/ModalBox/modal-box.css +9 -7
  83. package/components/ModalBox/modal-box.scss +2 -2
  84. package/components/Nav/nav.css +74 -11
  85. package/components/Nav/nav.scss +77 -5
  86. package/components/NotificationDrawer/notification-drawer.css +19 -9
  87. package/components/NotificationDrawer/notification-drawer.scss +14 -5
  88. package/components/Page/page.css +55 -29
  89. package/components/Page/page.scss +44 -5
  90. package/components/Pagination/pagination.scss +5 -1
  91. package/components/ProgressStepper/progress-stepper.scss +5 -1
  92. package/components/Sidebar/sidebar.css +1 -1
  93. package/components/Sidebar/sidebar.scss +7 -3
  94. package/components/Skeleton/skeleton.css +16 -15
  95. package/components/Slider/slider.css +32 -18
  96. package/components/Switch/switch.css +4 -2
  97. package/components/Switch/switch.scss +1 -1
  98. package/components/Table/table-grid.css +28 -36
  99. package/components/Table/table-grid.scss +4 -4
  100. package/components/Table/table-tree-view.css +4 -2
  101. package/components/Table/table.css +33 -29
  102. package/components/Table/table.scss +2 -2
  103. package/components/Tabs/tabs.css +35 -18
  104. package/components/Tabs/tabs.scss +35 -7
  105. package/components/TextInputGroup/text-input-group.css +2 -2
  106. package/components/TextInputGroup/text-input-group.scss +2 -2
  107. package/components/ToggleGroup/toggle-group.css +34 -17
  108. package/components/ToggleGroup/toggle-group.scss +36 -20
  109. package/components/Toolbar/toolbar.css +47 -15
  110. package/components/Toolbar/toolbar.scss +34 -6
  111. package/components/TreeView/tree-view.css +45 -14
  112. package/components/TreeView/tree-view.scss +32 -1
  113. package/components/Wizard/wizard.css +21 -17
  114. package/components/Wizard/wizard.scss +4 -4
  115. package/components/_index.css +1602 -676
  116. package/components/_index.scss +3 -1
  117. package/docs/components/AboutModalBox/examples/AboutModalBox.md +13 -1
  118. package/docs/components/Accordion/examples/Accordion.md +390 -30
  119. package/docs/components/ActionList/examples/ActionList.md +143 -11
  120. package/docs/components/Alert/examples/Alert.md +678 -54
  121. package/docs/components/Avatar/examples/Avatar.md +4 -4
  122. package/docs/components/BackToTop/examples/BackToTop.md +13 -1
  123. package/docs/components/Banner/examples/Banner.md +65 -5
  124. package/docs/components/Brand/examples/Brand.md +2 -2
  125. package/docs/components/Breadcrumb/examples/Breadcrumb.md +299 -23
  126. package/docs/components/Button/examples/Button.md +2217 -241
  127. package/docs/components/CalendarMonth/examples/CalendarMonth.md +104 -8
  128. package/docs/components/Card/examples/Card.md +206 -4
  129. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +286 -22
  130. package/docs/components/CodeBlock/examples/CodeBlock.md +104 -8
  131. package/docs/components/CodeEditor/examples/CodeEditor.md +195 -15
  132. package/docs/components/Compass/examples/Compass.css +17 -0
  133. package/docs/components/Compass/examples/Compass.md +119 -0
  134. package/docs/components/DataList/examples/DataList.md +405 -205
  135. package/docs/components/DatePicker/examples/DatePicker.md +78 -6
  136. package/docs/components/DescriptionList/examples/DescriptionList.md +327 -27
  137. package/docs/components/Divider/examples/Divider.md +2 -2
  138. package/docs/components/Drawer/examples/Drawer.md +353 -35
  139. package/docs/components/DualListSelector/examples/DualListSelector.md +1013 -143
  140. package/docs/components/ExpandableSection/examples/ExpandableSection.md +91 -7
  141. package/docs/components/Form/examples/Form.md +78 -6
  142. package/docs/components/Hero/examples/Hero.md +25 -0
  143. package/docs/components/Icon/examples/Icon.md +92 -8
  144. package/docs/components/InlineEdit/examples/InlineEdit.md +312 -24
  145. package/docs/components/InputGroup/examples/InputGroup.md +27 -3
  146. package/docs/components/JumpLinks/examples/JumpLinks.md +54 -6
  147. package/docs/components/Label/examples/Label.md +2834 -218
  148. package/docs/components/Login/examples/Login.md +26 -2
  149. package/docs/components/Masthead/examples/masthead.md +80 -1
  150. package/docs/components/Menu/examples/Menu.md +1458 -114
  151. package/docs/components/MenuToggle/examples/MenuToggle.md +53 -1
  152. package/docs/components/ModalBox/examples/ModalBox.md +287 -23
  153. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +156 -12
  154. package/docs/components/Nav/examples/Navigation.md +798 -58
  155. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +598 -46
  156. package/docs/components/OverflowMenu/examples/overflow-menu.md +78 -6
  157. package/docs/components/Page/examples/Page.md +51 -2
  158. package/docs/components/Pagination/examples/Pagination.md +627 -51
  159. package/docs/components/Popover/examples/Popover.md +286 -22
  160. package/docs/components/ProgressStepper/examples/ProgressStepper.md +275 -23
  161. package/docs/components/Sidebar/examples/Sidebar.md +1 -1
  162. package/docs/components/Slider/examples/Slider.md +52 -4
  163. package/docs/components/Table/examples/Table.md +875 -70
  164. package/docs/components/Tabs/examples/Tabs.md +4127 -320
  165. package/docs/components/TextInputGroup/examples/TextInputGroup.md +600 -48
  166. package/docs/components/ToggleGroup/examples/toggle-group.md +195 -15
  167. package/docs/components/Toolbar/examples/Toolbar.md +490 -42
  168. package/docs/components/TreeView/examples/TreeView.md +1390 -130
  169. package/docs/components/Wizard/examples/Wizard.md +492 -72
  170. package/docs/demos/AboutModal/examples/AboutModal.md +57 -9
  171. package/docs/demos/Alert/examples/Alert.md +236 -32
  172. package/docs/demos/BackToTop/examples/BackToTop.md +57 -9
  173. package/docs/demos/Banner/examples/Banner.md +88 -16
  174. package/docs/demos/Button/examples/Button.md +13 -1
  175. package/docs/demos/Card/examples/Card.md +399 -42
  176. package/docs/demos/CardView/examples/CardView.md +161 -17
  177. package/docs/demos/Compass/examples/Compass.md +6836 -0
  178. package/docs/demos/Dashboard/examples/Dashboard.md +173 -26
  179. package/docs/demos/DataList/examples/DataList.md +566 -65
  180. package/docs/demos/DescriptionList/examples/DescriptionList.md +156 -27
  181. package/docs/demos/Drawer/examples/Drawer.md +216 -45
  182. package/docs/demos/Form/examples/BasicForms.md +273 -21
  183. package/docs/demos/JumpLinks/examples/JumpLinks.md +272 -59
  184. package/docs/demos/Masthead/examples/Masthead.md +458 -89
  185. package/docs/demos/Modal/examples/Modal.md +342 -57
  186. package/docs/demos/Nav/examples/Nav.md +660 -87
  187. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1088 -140
  188. package/docs/demos/Page/examples/Page.md +618 -123
  189. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +13 -1
  190. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +52 -4
  191. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +691 -113
  192. package/docs/demos/Skeleton/examples/Skeleton.md +44 -8
  193. package/docs/demos/Table/examples/Table.md +3924 -256
  194. package/docs/demos/Tabs/examples/Tabs.md +407 -65
  195. package/docs/demos/Toolbar/examples/Toolbar.md +502 -52
  196. package/docs/demos/Wizard/examples/Wizard.md +796 -130
  197. package/docs/layouts/Bullseye/examples/Bullseye.css +2 -2
  198. package/docs/layouts/Bullseye/examples/Bullseye.md +2 -1
  199. package/docs/layouts/Flex/examples/Flex.css +3 -3
  200. package/docs/layouts/Flex/examples/Flex.md +3 -2
  201. package/docs/layouts/Gallery/examples/Gallery.css +2 -2
  202. package/docs/layouts/Gallery/examples/Gallery.md +4 -3
  203. package/docs/layouts/Grid/examples/Grid.css +1 -1
  204. package/docs/layouts/Grid/examples/Grid.md +6 -5
  205. package/docs/layouts/Level/examples/Level.css +3 -3
  206. package/docs/layouts/Level/examples/Level.md +2 -1
  207. package/docs/layouts/Split/examples/Split.css +1 -1
  208. package/docs/layouts/Split/examples/Split.md +2 -1
  209. package/docs/layouts/Stack/examples/Stack.css +3 -3
  210. package/docs/layouts/Stack/examples/Stack.md +2 -1
  211. package/docs/utilities/Accessibility/examples/Accessibility.md +3 -2
  212. package/docs/utilities/Alignment/examples/Alignment.css +4 -4
  213. package/docs/utilities/Alignment/examples/Alignment.md +3 -2
  214. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +5 -4
  215. package/docs/utilities/BoxShadow/examples/box-shadow.css +2 -2
  216. package/docs/utilities/BoxShadow/examples/box-shadow.md +2 -1
  217. package/docs/utilities/Display/examples/Display.css +1 -1
  218. package/docs/utilities/Display/examples/Display.md +3 -2
  219. package/docs/utilities/Flex/examples/Flex.css +7 -7
  220. package/docs/utilities/Flex/examples/Flex.md +3 -2
  221. package/docs/utilities/Float/examples/Float.css +2 -2
  222. package/docs/utilities/Float/examples/Float.md +3 -2
  223. package/docs/utilities/Sizing/examples/Sizing.md +8 -7
  224. package/docs/utilities/Spacing/examples/Spacing.css +2 -2
  225. package/docs/utilities/Spacing/examples/Spacing.md +3 -2
  226. package/docs/utilities/Text/examples/Text.md +5 -4
  227. package/icons/PfIcons/add-circle-o.svg +4 -0
  228. package/icons/PfIcons/ansible-tower.svg +4 -0
  229. package/icons/PfIcons/applications.svg +4 -0
  230. package/icons/PfIcons/arrow.svg +4 -0
  231. package/icons/PfIcons/asleep.svg +4 -0
  232. package/icons/PfIcons/attention-bell.svg +4 -0
  233. package/icons/PfIcons/automation.svg +4 -0
  234. package/icons/PfIcons/bell.svg +4 -0
  235. package/icons/PfIcons/blueprint.svg +4 -0
  236. package/icons/PfIcons/build.svg +4 -0
  237. package/icons/PfIcons/builder-image.svg +4 -0
  238. package/icons/PfIcons/bundle.svg +4 -0
  239. package/icons/PfIcons/catalog.svg +4 -0
  240. package/icons/PfIcons/chat.svg +4 -0
  241. package/icons/PfIcons/close.svg +4 -0
  242. package/icons/PfIcons/cloud-security.svg +4 -0
  243. package/icons/PfIcons/cloud-tenant.svg +4 -0
  244. package/icons/PfIcons/cluster.svg +4 -0
  245. package/icons/PfIcons/connected.svg +4 -0
  246. package/icons/PfIcons/container-node.svg +4 -0
  247. package/icons/PfIcons/cpu.svg +4 -0
  248. package/icons/PfIcons/critical-risk.svg +4 -0
  249. package/icons/PfIcons/data-processor.svg +4 -0
  250. package/icons/PfIcons/data-sink.svg +4 -0
  251. package/icons/PfIcons/data-source.svg +4 -0
  252. package/icons/PfIcons/degraded.svg +4 -0
  253. package/icons/PfIcons/disconnected.svg +4 -0
  254. package/icons/PfIcons/domain.svg +4 -0
  255. package/icons/PfIcons/edit.svg +4 -0
  256. package/icons/PfIcons/enhancement.svg +4 -0
  257. package/icons/PfIcons/enterprise.svg +4 -0
  258. package/icons/PfIcons/equalizer.svg +4 -0
  259. package/icons/PfIcons/error-circle-o.svg +4 -0
  260. package/icons/PfIcons/export.svg +4 -0
  261. package/icons/PfIcons/filter.svg +4 -0
  262. package/icons/PfIcons/flavor.svg +4 -0
  263. package/icons/PfIcons/folder-close.svg +4 -0
  264. package/icons/PfIcons/folder-open.svg +4 -0
  265. package/icons/PfIcons/globe-route.svg +4 -0
  266. package/icons/PfIcons/help.svg +4 -0
  267. package/icons/PfIcons/history.svg +4 -0
  268. package/icons/PfIcons/home.svg +4 -0
  269. package/icons/PfIcons/import.svg +4 -0
  270. package/icons/PfIcons/in-progress.svg +4 -0
  271. package/icons/PfIcons/info.svg +4 -0
  272. package/icons/PfIcons/infrastructure.svg +4 -0
  273. package/icons/PfIcons/integration.svg +4 -0
  274. package/icons/PfIcons/key.svg +4 -0
  275. package/icons/PfIcons/locked.svg +4 -0
  276. package/icons/PfIcons/maintenance.svg +4 -0
  277. package/icons/PfIcons/memory.svg +4 -0
  278. package/icons/PfIcons/messages.svg +4 -0
  279. package/icons/PfIcons/middleware.svg +4 -0
  280. package/icons/PfIcons/migration.svg +4 -0
  281. package/icons/PfIcons/module.svg +4 -0
  282. package/icons/PfIcons/monitoring.svg +4 -0
  283. package/icons/PfIcons/multicluster.svg +4 -0
  284. package/icons/PfIcons/namespaces.svg +4 -0
  285. package/icons/PfIcons/network.svg +4 -0
  286. package/icons/PfIcons/new-process.svg +4 -0
  287. package/icons/PfIcons/not-started.svg +4 -0
  288. package/icons/PfIcons/off.svg +4 -0
  289. package/icons/PfIcons/ok.svg +4 -0
  290. package/icons/PfIcons/on-running.svg +4 -0
  291. package/icons/PfIcons/on.svg +4 -0
  292. package/icons/PfIcons/open-drawer-right.svg +4 -0
  293. package/icons/PfIcons/openshift.svg +4 -0
  294. package/icons/PfIcons/openstack.svg +4 -0
  295. package/icons/PfIcons/optimize.svg +4 -0
  296. package/icons/PfIcons/orders.svg +4 -0
  297. package/icons/PfIcons/os-image.svg +4 -0
  298. package/icons/PfIcons/package.svg +4 -0
  299. package/icons/PfIcons/panel-close.svg +4 -0
  300. package/icons/PfIcons/panel-open.svg +4 -0
  301. package/icons/PfIcons/paused.svg +4 -0
  302. package/icons/PfIcons/pending.svg +4 -0
  303. package/icons/PfIcons/pficon-dragdrop.svg +4 -0
  304. package/icons/PfIcons/pficon-history.svg +4 -0
  305. package/icons/PfIcons/pficon-network-range.svg +4 -0
  306. package/icons/PfIcons/pficon-satellite.svg +4 -0
  307. package/icons/PfIcons/pficon-sort-common-asc.svg +4 -0
  308. package/icons/PfIcons/pficon-sort-common-desc.svg +4 -0
  309. package/icons/PfIcons/pficon-template.svg +4 -0
  310. package/icons/PfIcons/pficon-vcenter.svg +4 -0
  311. package/icons/PfIcons/plugged.svg +4 -0
  312. package/icons/PfIcons/port.svg +4 -0
  313. package/icons/PfIcons/print.svg +4 -0
  314. package/icons/PfIcons/private.svg +4 -0
  315. package/icons/PfIcons/process-automation.svg +4 -0
  316. package/icons/PfIcons/project.svg +4 -0
  317. package/icons/PfIcons/rebalance.svg +4 -0
  318. package/icons/PfIcons/rebooting.svg +4 -0
  319. package/icons/PfIcons/regions.svg +4 -0
  320. package/icons/PfIcons/registry.svg +4 -0
  321. package/icons/PfIcons/remove2.svg +4 -0
  322. package/icons/PfIcons/replicator.svg +4 -0
  323. package/icons/PfIcons/repository.svg +4 -0
  324. package/icons/PfIcons/resource-pool.svg +4 -0
  325. package/icons/PfIcons/resources-almost-empty.svg +4 -0
  326. package/icons/PfIcons/resources-almost-full.svg +4 -0
  327. package/icons/PfIcons/resources-empty.svg +4 -0
  328. package/icons/PfIcons/resources-full.svg +4 -0
  329. package/icons/PfIcons/running.svg +4 -0
  330. package/icons/PfIcons/save.svg +4 -0
  331. package/icons/PfIcons/screen.svg +4 -0
  332. package/icons/PfIcons/security.svg +4 -0
  333. package/icons/PfIcons/server-group.svg +4 -0
  334. package/icons/PfIcons/server.svg +4 -0
  335. package/icons/PfIcons/service-catalog.svg +4 -0
  336. package/icons/PfIcons/service.svg +4 -0
  337. package/icons/PfIcons/services.svg +4 -0
  338. package/icons/PfIcons/severity-critical.svg +4 -0
  339. package/icons/PfIcons/severity-important.svg +4 -0
  340. package/icons/PfIcons/severity-minor.svg +4 -0
  341. package/icons/PfIcons/severity-moderate.svg +4 -0
  342. package/icons/PfIcons/severity-none.svg +4 -0
  343. package/icons/PfIcons/severity-undefined.svg +4 -0
  344. package/icons/PfIcons/spinner.svg +4 -0
  345. package/icons/PfIcons/spinner2.svg +4 -0
  346. package/icons/PfIcons/storage-domain.svg +4 -0
  347. package/icons/PfIcons/task.svg +4 -0
  348. package/icons/PfIcons/tenant.svg +4 -0
  349. package/icons/PfIcons/thumb-tack.svg +4 -0
  350. package/icons/PfIcons/topology.svg +4 -0
  351. package/icons/PfIcons/treeview.svg +4 -0
  352. package/icons/PfIcons/trend-down.svg +4 -0
  353. package/icons/PfIcons/trend-up.svg +4 -0
  354. package/icons/PfIcons/unknown.svg +4 -0
  355. package/icons/PfIcons/unlocked.svg +4 -0
  356. package/icons/PfIcons/unplugged.svg +4 -0
  357. package/icons/PfIcons/user.svg +4 -0
  358. package/icons/PfIcons/users.svg +4 -0
  359. package/icons/PfIcons/virtual-machine.svg +4 -0
  360. package/icons/PfIcons/volume.svg +4 -0
  361. package/icons/PfIcons/warning-triangle.svg +4 -0
  362. package/icons/PfIcons/zone.svg +4 -0
  363. package/layouts/Flex/flex.scss +83 -19
  364. package/layouts/Gallery/gallery.css +6 -2
  365. package/layouts/_index.css +6 -2
  366. package/package.json +34 -16
  367. package/patternfly-base-no-globals.css +406 -14
  368. package/patternfly-base.css +413 -14
  369. package/patternfly-charts.css +3 -3
  370. package/patternfly-no-globals.css +1947 -625
  371. package/patternfly.css +1954 -625
  372. package/patternfly.min.css +1 -1
  373. package/patternfly.min.css.map +1 -1
  374. package/sass-utilities/functions.scss +32 -25
  375. package/sass-utilities/mixins.scss +36 -20
  376. package/sass-utilities/namespaces-components.scss +6 -0
package/docs/components/Button/examples/Button.md CHANGED
@@ -50,7 +50,19 @@ 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>
54
66
  </span>
55
67
  </button>
56
68
 
@@ -67,7 +79,19 @@ cssPrefix: pf-v6-c-button
67
79
  aria-label="Copy input"
68
80
  >
69
81
  <span class="pf-v6-c-button__icon">
70
- <i class="fas fa-copy" aria-hidden="true"></i>
82
+ <svg
83
+ class="pf-v6-svg"
84
+ viewBox="0 0 32 32"
85
+ fill="currentColor"
86
+ aria-hidden="true"
87
+ role="img"
88
+ width="1em"
89
+ height="1em"
90
+ >
91
+ <path
92
+ 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"
93
+ />
94
+ </svg>
71
95
  </span>
72
96
  </button>
73
97
 
@@ -79,42 +103,114 @@ cssPrefix: pf-v6-c-button
79
103
  </div>
80
104
  <button class="pf-v6-c-button pf-m-primary" type="button">
81
105
  <span class="pf-v6-c-button__icon pf-m-start">
82
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
106
+ <svg
107
+ class="pf-v6-svg"
108
+ viewBox="0 0 32 32"
109
+ fill="currentColor"
110
+ aria-hidden="true"
111
+ role="img"
112
+ width="1em"
113
+ height="1em"
114
+ >
115
+ <path
116
+ 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"
117
+ />
118
+ </svg>
83
119
  </span>
84
120
  <span class="pf-v6-c-button__text">Primary</span>
85
121
  </button>
86
122
 
87
123
  <button class="pf-v6-c-button pf-m-secondary" type="button">
88
124
  <span class="pf-v6-c-button__icon pf-m-start">
89
- <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>
90
138
  </span>
91
139
  <span class="pf-v6-c-button__text">Secondary</span>
92
140
  </button>
93
141
 
94
142
  <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
95
143
  <span class="pf-v6-c-button__icon pf-m-start">
96
- <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>
97
157
  </span>
98
158
  <span class="pf-v6-c-button__text">Secondary danger</span>
99
159
  </button>
100
160
 
101
161
  <button class="pf-v6-c-button pf-m-tertiary" type="button">
102
162
  <span class="pf-v6-c-button__icon pf-m-start">
103
- <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>
104
176
  </span>
105
177
  <span class="pf-v6-c-button__text">Tertiary</span>
106
178
  </button>
107
179
 
108
180
  <button class="pf-v6-c-button pf-m-danger" type="button">
109
181
  <span class="pf-v6-c-button__icon pf-m-start">
110
- <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>
111
195
  </span>
112
196
  <span class="pf-v6-c-button__text">Danger</span>
113
197
  </button>
114
198
 
115
199
  <button class="pf-v6-c-button pf-m-warning" type="button">
116
200
  <span class="pf-v6-c-button__icon pf-m-start">
117
- <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>
118
214
  </span>
119
215
  <span class="pf-v6-c-button__text">Warning</span>
120
216
  </button>
@@ -124,28 +220,76 @@ cssPrefix: pf-v6-c-button
124
220
 
125
221
  <button class="pf-v6-c-button pf-m-link" type="button">
126
222
  <span class="pf-v6-c-button__icon pf-m-start">
127
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
223
+ <svg
224
+ class="pf-v6-svg"
225
+ viewBox="0 0 32 32"
226
+ fill="currentColor"
227
+ aria-hidden="true"
228
+ role="img"
229
+ width="1em"
230
+ height="1em"
231
+ >
232
+ <path
233
+ 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"
234
+ />
235
+ </svg>
128
236
  </span>
129
237
  <span class="pf-v6-c-button__text">Link</span>
130
238
  </button>
131
239
 
132
240
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
133
241
  <span class="pf-v6-c-button__icon pf-m-start">
134
- <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>
135
255
  </span>
136
256
  <span class="pf-v6-c-button__text">Link danger</span>
137
257
  </button>
138
258
 
139
259
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
140
260
  <span class="pf-v6-c-button__icon pf-m-start">
141
- <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>
142
274
  </span>
143
275
  <span class="pf-v6-c-button__text">Inline link</span>
144
276
  </button>
145
277
 
146
278
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
147
279
  <span class="pf-v6-c-button__icon">
148
- <i class="fas fa-times" aria-hidden="true"></i>
280
+ <svg
281
+ class="pf-v6-svg"
282
+ viewBox="0 0 20 20"
283
+ fill="currentColor"
284
+ aria-hidden="true"
285
+ role="img"
286
+ width="1em"
287
+ height="1em"
288
+ >
289
+ <path
290
+ 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"
291
+ />
292
+ </svg>
149
293
  </span>
150
294
  </button>
151
295
 
@@ -154,7 +298,19 @@ cssPrefix: pf-v6-c-button
154
298
 
155
299
  <button class="pf-v6-c-button pf-m-control" type="button">
156
300
  <span class="pf-v6-c-button__icon pf-m-start">
157
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
301
+ <svg
302
+ class="pf-v6-svg"
303
+ viewBox="0 0 32 32"
304
+ fill="currentColor"
305
+ aria-hidden="true"
306
+ role="img"
307
+ width="1em"
308
+ height="1em"
309
+ >
310
+ <path
311
+ 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"
312
+ />
313
+ </svg>
158
314
  </span>
159
315
  <span class="pf-v6-c-button__text">Control</span>
160
316
  </button>
@@ -165,7 +321,19 @@ cssPrefix: pf-v6-c-button
165
321
  aria-label="Copy input"
166
322
  >
167
323
  <span class="pf-v6-c-button__icon">
168
- <i class="fas fa-copy" aria-hidden="true"></i>
324
+ <svg
325
+ class="pf-v6-svg"
326
+ viewBox="0 0 32 32"
327
+ fill="currentColor"
328
+ aria-hidden="true"
329
+ role="img"
330
+ width="1em"
331
+ height="1em"
332
+ >
333
+ <path
334
+ 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"
335
+ />
336
+ </svg>
169
337
  </span>
170
338
  </button>
171
339
 
@@ -178,42 +346,114 @@ cssPrefix: pf-v6-c-button
178
346
  <button class="pf-v6-c-button pf-m-primary" type="button">
179
347
  <span class="pf-v6-c-button__text">Primary</span>
180
348
  <span class="pf-v6-c-button__icon pf-m-end">
181
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
349
+ <svg
350
+ class="pf-v6-svg"
351
+ viewBox="0 0 32 32"
352
+ fill="currentColor"
353
+ aria-hidden="true"
354
+ role="img"
355
+ width="1em"
356
+ height="1em"
357
+ >
358
+ <path
359
+ 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"
360
+ />
361
+ </svg>
182
362
  </span>
183
363
  </button>
184
364
 
185
365
  <button class="pf-v6-c-button pf-m-secondary" type="button">
186
366
  <span class="pf-v6-c-button__text">Secondary</span>
187
367
  <span class="pf-v6-c-button__icon pf-m-end">
188
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
368
+ <svg
369
+ class="pf-v6-svg"
370
+ viewBox="0 0 32 32"
371
+ fill="currentColor"
372
+ aria-hidden="true"
373
+ role="img"
374
+ width="1em"
375
+ height="1em"
376
+ >
377
+ <path
378
+ 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"
379
+ />
380
+ </svg>
189
381
  </span>
190
382
  </button>
191
383
 
192
384
  <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
193
385
  <span class="pf-v6-c-button__text">Secondary danger</span>
194
386
  <span class="pf-v6-c-button__icon pf-m-end">
195
- <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>
196
400
  </span>
197
401
  </button>
198
402
 
199
403
  <button class="pf-v6-c-button pf-m-tertiary" type="button">
200
404
  <span class="pf-v6-c-button__text">Tertiary</span>
201
405
  <span class="pf-v6-c-button__icon pf-m-end">
202
- <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>
203
419
  </span>
204
420
  </button>
205
421
 
206
422
  <button class="pf-v6-c-button pf-m-danger" type="button">
207
423
  <span class="pf-v6-c-button__text">Danger</span>
208
424
  <span class="pf-v6-c-button__icon pf-m-end">
209
- <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>
210
438
  </span>
211
439
  </button>
212
440
 
213
441
  <button class="pf-v6-c-button pf-m-warning" type="button">
214
442
  <span class="pf-v6-c-button__text">Warning</span>
215
443
  <span class="pf-v6-c-button__icon pf-m-end">
216
- <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>
217
457
  </span>
218
458
  </button>
219
459
 
@@ -223,37 +463,97 @@ cssPrefix: pf-v6-c-button
223
463
  <button class="pf-v6-c-button pf-m-link" type="button">
224
464
  <span class="pf-v6-c-button__text">Link</span>
225
465
  <span class="pf-v6-c-button__icon pf-m-end">
226
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
466
+ <svg
467
+ class="pf-v6-svg"
468
+ viewBox="0 0 32 32"
469
+ fill="currentColor"
470
+ aria-hidden="true"
471
+ role="img"
472
+ width="1em"
473
+ height="1em"
474
+ >
475
+ <path
476
+ 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"
477
+ />
478
+ </svg>
227
479
  </span>
228
480
  </button>
229
481
 
230
482
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
231
483
  <span class="pf-v6-c-button__text">Link danger</span>
232
484
  <span class="pf-v6-c-button__icon pf-m-end">
233
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
485
+ <svg
486
+ class="pf-v6-svg"
487
+ viewBox="0 0 32 32"
488
+ fill="currentColor"
489
+ aria-hidden="true"
490
+ role="img"
491
+ width="1em"
492
+ height="1em"
493
+ >
494
+ <path
495
+ 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"
496
+ />
497
+ </svg>
234
498
  </span>
235
499
  </button>
236
500
 
237
501
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
238
502
  <span class="pf-v6-c-button__text">Inline link</span>
239
503
  <span class="pf-v6-c-button__icon pf-m-end">
240
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
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>
241
517
  </span>
242
518
  </button>
243
519
 
244
520
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
245
521
  <span class="pf-v6-c-button__icon">
246
- <i class="fas fa-times" aria-hidden="true"></i>
247
- </span>
248
- </button>
249
-
522
+ <svg
523
+ class="pf-v6-svg"
524
+ viewBox="0 0 20 20"
525
+ fill="currentColor"
526
+ aria-hidden="true"
527
+ role="img"
528
+ width="1em"
529
+ height="1em"
530
+ >
531
+ <path
532
+ 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"
533
+ />
534
+ </svg>
535
+ </span>
536
+ </button>
537
+
250
538
  <br />
251
539
  <br />
252
540
 
253
541
  <button class="pf-v6-c-button pf-m-control" type="button">
254
542
  <span class="pf-v6-c-button__text">Control</span>
255
543
  <span class="pf-v6-c-button__icon pf-m-end">
256
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
544
+ <svg
545
+ class="pf-v6-svg"
546
+ viewBox="0 0 32 32"
547
+ fill="currentColor"
548
+ aria-hidden="true"
549
+ role="img"
550
+ width="1em"
551
+ height="1em"
552
+ >
553
+ <path
554
+ 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"
555
+ />
556
+ </svg>
257
557
  </span>
258
558
  </button>
259
559
 
@@ -263,7 +563,19 @@ cssPrefix: pf-v6-c-button
263
563
  aria-label="Copy input"
264
564
  >
265
565
  <span class="pf-v6-c-button__icon">
266
- <i class="fas fa-copy" aria-hidden="true"></i>
566
+ <svg
567
+ class="pf-v6-svg"
568
+ viewBox="0 0 32 32"
569
+ fill="currentColor"
570
+ aria-hidden="true"
571
+ role="img"
572
+ width="1em"
573
+ height="1em"
574
+ >
575
+ <path
576
+ 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"
577
+ />
578
+ </svg>
267
579
  </span>
268
580
  </button>
269
581
 
@@ -320,7 +632,19 @@ cssPrefix: pf-v6-c-button
320
632
  aria-label="Remove"
321
633
  >
322
634
  <span class="pf-v6-c-button__icon">
323
- <i class="fas fa-times" aria-hidden="true"></i>
635
+ <svg
636
+ class="pf-v6-svg"
637
+ viewBox="0 0 20 20"
638
+ fill="currentColor"
639
+ aria-hidden="true"
640
+ role="img"
641
+ width="1em"
642
+ height="1em"
643
+ >
644
+ <path
645
+ 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"
646
+ />
647
+ </svg>
324
648
  </span>
325
649
  </button>
326
650
 
@@ -337,7 +661,19 @@ cssPrefix: pf-v6-c-button
337
661
  aria-label="Copy input"
338
662
  >
339
663
  <span class="pf-v6-c-button__icon">
340
- <i class="fas fa-copy" aria-hidden="true"></i>
664
+ <svg
665
+ class="pf-v6-svg"
666
+ viewBox="0 0 32 32"
667
+ fill="currentColor"
668
+ aria-hidden="true"
669
+ role="img"
670
+ width="1em"
671
+ height="1em"
672
+ >
673
+ <path
674
+ 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"
675
+ />
676
+ </svg>
341
677
  </span>
342
678
  </button>
343
679
 
@@ -349,14 +685,38 @@ cssPrefix: pf-v6-c-button
349
685
  </div>
350
686
  <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
351
687
  <span class="pf-v6-c-button__icon pf-m-start">
352
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
688
+ <svg
689
+ class="pf-v6-svg"
690
+ viewBox="0 0 32 32"
691
+ fill="currentColor"
692
+ aria-hidden="true"
693
+ role="img"
694
+ width="1em"
695
+ height="1em"
696
+ >
697
+ <path
698
+ 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"
699
+ />
700
+ </svg>
353
701
  </span>
354
702
  <span class="pf-v6-c-button__text">Primary</span>
355
703
  </button>
356
704
 
357
705
  <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
358
706
  <span class="pf-v6-c-button__icon pf-m-start">
359
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
707
+ <svg
708
+ class="pf-v6-svg"
709
+ viewBox="0 0 32 32"
710
+ fill="currentColor"
711
+ aria-hidden="true"
712
+ role="img"
713
+ width="1em"
714
+ height="1em"
715
+ >
716
+ <path
717
+ 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"
718
+ />
719
+ </svg>
360
720
  </span>
361
721
  <span class="pf-v6-c-button__text">Secondary</span>
362
722
  </button>
@@ -366,28 +726,76 @@ cssPrefix: pf-v6-c-button
366
726
  type="button"
367
727
  >
368
728
  <span class="pf-v6-c-button__icon pf-m-start">
369
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
729
+ <svg
730
+ class="pf-v6-svg"
731
+ viewBox="0 0 32 32"
732
+ fill="currentColor"
733
+ aria-hidden="true"
734
+ role="img"
735
+ width="1em"
736
+ height="1em"
737
+ >
738
+ <path
739
+ 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"
740
+ />
741
+ </svg>
370
742
  </span>
371
743
  <span class="pf-v6-c-button__text">Secondary danger</span>
372
744
  </button>
373
745
 
374
746
  <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
375
747
  <span class="pf-v6-c-button__icon pf-m-start">
376
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
748
+ <svg
749
+ class="pf-v6-svg"
750
+ viewBox="0 0 32 32"
751
+ fill="currentColor"
752
+ aria-hidden="true"
753
+ role="img"
754
+ width="1em"
755
+ height="1em"
756
+ >
757
+ <path
758
+ 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"
759
+ />
760
+ </svg>
377
761
  </span>
378
762
  <span class="pf-v6-c-button__text">Tertiary</span>
379
763
  </button>
380
764
 
381
765
  <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
382
766
  <span class="pf-v6-c-button__icon pf-m-start">
383
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
767
+ <svg
768
+ class="pf-v6-svg"
769
+ viewBox="0 0 32 32"
770
+ fill="currentColor"
771
+ aria-hidden="true"
772
+ role="img"
773
+ width="1em"
774
+ height="1em"
775
+ >
776
+ <path
777
+ 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"
778
+ />
779
+ </svg>
384
780
  </span>
385
781
  <span class="pf-v6-c-button__text">Danger</span>
386
782
  </button>
387
783
 
388
784
  <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
389
785
  <span class="pf-v6-c-button__icon pf-m-start">
390
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
786
+ <svg
787
+ class="pf-v6-svg"
788
+ viewBox="0 0 32 32"
789
+ fill="currentColor"
790
+ aria-hidden="true"
791
+ role="img"
792
+ width="1em"
793
+ height="1em"
794
+ >
795
+ <path
796
+ 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"
797
+ />
798
+ </svg>
391
799
  </span>
392
800
  <span class="pf-v6-c-button__text">Warning</span>
393
801
  </button>
@@ -397,21 +805,57 @@ cssPrefix: pf-v6-c-button
397
805
 
398
806
  <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
399
807
  <span class="pf-v6-c-button__icon pf-m-start">
400
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
808
+ <svg
809
+ class="pf-v6-svg"
810
+ viewBox="0 0 32 32"
811
+ fill="currentColor"
812
+ aria-hidden="true"
813
+ role="img"
814
+ width="1em"
815
+ height="1em"
816
+ >
817
+ <path
818
+ 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"
819
+ />
820
+ </svg>
401
821
  </span>
402
822
  <span class="pf-v6-c-button__text">Link</span>
403
823
  </button>
404
824
 
405
825
  <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
406
826
  <span class="pf-v6-c-button__icon pf-m-start">
407
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
827
+ <svg
828
+ class="pf-v6-svg"
829
+ viewBox="0 0 32 32"
830
+ fill="currentColor"
831
+ aria-hidden="true"
832
+ role="img"
833
+ width="1em"
834
+ height="1em"
835
+ >
836
+ <path
837
+ 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"
838
+ />
839
+ </svg>
408
840
  </span>
409
841
  <span class="pf-v6-c-button__text">Link danger</span>
410
842
  </button>
411
843
 
412
844
  <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
413
845
  <span class="pf-v6-c-button__icon pf-m-start">
414
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
846
+ <svg
847
+ class="pf-v6-svg"
848
+ viewBox="0 0 32 32"
849
+ fill="currentColor"
850
+ aria-hidden="true"
851
+ role="img"
852
+ width="1em"
853
+ height="1em"
854
+ >
855
+ <path
856
+ 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"
857
+ />
858
+ </svg>
415
859
  </span>
416
860
  <span class="pf-v6-c-button__text">Inline link</span>
417
861
  </button>
@@ -422,7 +866,19 @@ cssPrefix: pf-v6-c-button
422
866
  aria-label="Remove"
423
867
  >
424
868
  <span class="pf-v6-c-button__icon">
425
- <i class="fas fa-times" aria-hidden="true"></i>
869
+ <svg
870
+ class="pf-v6-svg"
871
+ viewBox="0 0 20 20"
872
+ fill="currentColor"
873
+ aria-hidden="true"
874
+ role="img"
875
+ width="1em"
876
+ height="1em"
877
+ >
878
+ <path
879
+ 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"
880
+ />
881
+ </svg>
426
882
  </span>
427
883
  </button>
428
884
 
@@ -431,7 +887,19 @@ cssPrefix: pf-v6-c-button
431
887
 
432
888
  <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
433
889
  <span class="pf-v6-c-button__icon pf-m-start">
434
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
890
+ <svg
891
+ class="pf-v6-svg"
892
+ viewBox="0 0 32 32"
893
+ fill="currentColor"
894
+ aria-hidden="true"
895
+ role="img"
896
+ width="1em"
897
+ height="1em"
898
+ >
899
+ <path
900
+ 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"
901
+ />
902
+ </svg>
435
903
  </span>
436
904
  <span class="pf-v6-c-button__text">Control</span>
437
905
  </button>
@@ -442,7 +910,19 @@ cssPrefix: pf-v6-c-button
442
910
  aria-label="Copy input"
443
911
  >
444
912
  <span class="pf-v6-c-button__icon">
445
- <i class="fas fa-copy" aria-hidden="true"></i>
913
+ <svg
914
+ class="pf-v6-svg"
915
+ viewBox="0 0 32 32"
916
+ fill="currentColor"
917
+ aria-hidden="true"
918
+ role="img"
919
+ width="1em"
920
+ height="1em"
921
+ >
922
+ <path
923
+ 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"
924
+ />
925
+ </svg>
446
926
  </span>
447
927
  </button>
448
928
 
@@ -455,14 +935,38 @@ cssPrefix: pf-v6-c-button
455
935
  <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
456
936
  <span class="pf-v6-c-button__text">Primary</span>
457
937
  <span class="pf-v6-c-button__icon pf-m-end">
458
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
938
+ <svg
939
+ class="pf-v6-svg"
940
+ viewBox="0 0 32 32"
941
+ fill="currentColor"
942
+ aria-hidden="true"
943
+ role="img"
944
+ width="1em"
945
+ height="1em"
946
+ >
947
+ <path
948
+ 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"
949
+ />
950
+ </svg>
459
951
  </span>
460
952
  </button>
461
953
 
462
954
  <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
463
955
  <span class="pf-v6-c-button__text">Secondary</span>
464
956
  <span class="pf-v6-c-button__icon pf-m-end">
465
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
957
+ <svg
958
+ class="pf-v6-svg"
959
+ viewBox="0 0 32 32"
960
+ fill="currentColor"
961
+ aria-hidden="true"
962
+ role="img"
963
+ width="1em"
964
+ height="1em"
965
+ >
966
+ <path
967
+ 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"
968
+ />
969
+ </svg>
466
970
  </span>
467
971
  </button>
468
972
 
@@ -472,28 +976,76 @@ cssPrefix: pf-v6-c-button
472
976
  >
473
977
  <span class="pf-v6-c-button__text">Secondary danger</span>
474
978
  <span class="pf-v6-c-button__icon pf-m-end">
475
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
979
+ <svg
980
+ class="pf-v6-svg"
981
+ viewBox="0 0 32 32"
982
+ fill="currentColor"
983
+ aria-hidden="true"
984
+ role="img"
985
+ width="1em"
986
+ height="1em"
987
+ >
988
+ <path
989
+ 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"
990
+ />
991
+ </svg>
476
992
  </span>
477
993
  </button>
478
994
 
479
995
  <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
480
996
  <span class="pf-v6-c-button__text">Tertiary</span>
481
997
  <span class="pf-v6-c-button__icon pf-m-end">
482
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
998
+ <svg
999
+ class="pf-v6-svg"
1000
+ viewBox="0 0 32 32"
1001
+ fill="currentColor"
1002
+ aria-hidden="true"
1003
+ role="img"
1004
+ width="1em"
1005
+ height="1em"
1006
+ >
1007
+ <path
1008
+ 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"
1009
+ />
1010
+ </svg>
483
1011
  </span>
484
1012
  </button>
485
1013
 
486
1014
  <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
487
1015
  <span class="pf-v6-c-button__text">Danger</span>
488
1016
  <span class="pf-v6-c-button__icon pf-m-end">
489
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1017
+ <svg
1018
+ class="pf-v6-svg"
1019
+ viewBox="0 0 32 32"
1020
+ fill="currentColor"
1021
+ aria-hidden="true"
1022
+ role="img"
1023
+ width="1em"
1024
+ height="1em"
1025
+ >
1026
+ <path
1027
+ 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"
1028
+ />
1029
+ </svg>
490
1030
  </span>
491
1031
  </button>
492
1032
 
493
1033
  <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
494
1034
  <span class="pf-v6-c-button__text">Warning</span>
495
1035
  <span class="pf-v6-c-button__icon pf-m-end">
496
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1036
+ <svg
1037
+ class="pf-v6-svg"
1038
+ viewBox="0 0 32 32"
1039
+ fill="currentColor"
1040
+ aria-hidden="true"
1041
+ role="img"
1042
+ width="1em"
1043
+ height="1em"
1044
+ >
1045
+ <path
1046
+ 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"
1047
+ />
1048
+ </svg>
497
1049
  </span>
498
1050
  </button>
499
1051
 
@@ -503,21 +1055,57 @@ cssPrefix: pf-v6-c-button
503
1055
  <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
504
1056
  <span class="pf-v6-c-button__text">Link</span>
505
1057
  <span class="pf-v6-c-button__icon pf-m-end">
506
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1058
+ <svg
1059
+ class="pf-v6-svg"
1060
+ viewBox="0 0 32 32"
1061
+ fill="currentColor"
1062
+ aria-hidden="true"
1063
+ role="img"
1064
+ width="1em"
1065
+ height="1em"
1066
+ >
1067
+ <path
1068
+ 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"
1069
+ />
1070
+ </svg>
507
1071
  </span>
508
1072
  </button>
509
1073
 
510
1074
  <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
511
1075
  <span class="pf-v6-c-button__text">Link danger</span>
512
1076
  <span class="pf-v6-c-button__icon pf-m-end">
513
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1077
+ <svg
1078
+ class="pf-v6-svg"
1079
+ viewBox="0 0 32 32"
1080
+ fill="currentColor"
1081
+ aria-hidden="true"
1082
+ role="img"
1083
+ width="1em"
1084
+ height="1em"
1085
+ >
1086
+ <path
1087
+ 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"
1088
+ />
1089
+ </svg>
514
1090
  </span>
515
1091
  </button>
516
1092
 
517
1093
  <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
518
1094
  <span class="pf-v6-c-button__text">Inline link</span>
519
1095
  <span class="pf-v6-c-button__icon pf-m-end">
520
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1096
+ <svg
1097
+ class="pf-v6-svg"
1098
+ viewBox="0 0 32 32"
1099
+ fill="currentColor"
1100
+ aria-hidden="true"
1101
+ role="img"
1102
+ width="1em"
1103
+ height="1em"
1104
+ >
1105
+ <path
1106
+ 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"
1107
+ />
1108
+ </svg>
521
1109
  </span>
522
1110
  </button>
523
1111
 
@@ -527,7 +1115,19 @@ cssPrefix: pf-v6-c-button
527
1115
  aria-label="Remove"
528
1116
  >
529
1117
  <span class="pf-v6-c-button__icon">
530
- <i class="fas fa-times" aria-hidden="true"></i>
1118
+ <svg
1119
+ class="pf-v6-svg"
1120
+ viewBox="0 0 20 20"
1121
+ fill="currentColor"
1122
+ aria-hidden="true"
1123
+ role="img"
1124
+ width="1em"
1125
+ height="1em"
1126
+ >
1127
+ <path
1128
+ 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"
1129
+ />
1130
+ </svg>
531
1131
  </span>
532
1132
  </button>
533
1133
 
@@ -537,7 +1137,19 @@ cssPrefix: pf-v6-c-button
537
1137
  <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
538
1138
  <span class="pf-v6-c-button__text">Control</span>
539
1139
  <span class="pf-v6-c-button__icon pf-m-end">
540
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1140
+ <svg
1141
+ class="pf-v6-svg"
1142
+ viewBox="0 0 32 32"
1143
+ fill="currentColor"
1144
+ aria-hidden="true"
1145
+ role="img"
1146
+ width="1em"
1147
+ height="1em"
1148
+ >
1149
+ <path
1150
+ 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"
1151
+ />
1152
+ </svg>
541
1153
  </span>
542
1154
  </button>
543
1155
 
@@ -547,7 +1159,19 @@ cssPrefix: pf-v6-c-button
547
1159
  aria-label="Copy input"
548
1160
  >
549
1161
  <span class="pf-v6-c-button__icon">
550
- <i class="fas fa-copy" aria-hidden="true"></i>
1162
+ <svg
1163
+ class="pf-v6-svg"
1164
+ viewBox="0 0 32 32"
1165
+ fill="currentColor"
1166
+ aria-hidden="true"
1167
+ role="img"
1168
+ width="1em"
1169
+ height="1em"
1170
+ >
1171
+ <path
1172
+ 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"
1173
+ />
1174
+ </svg>
551
1175
  </span>
552
1176
  </button>
553
1177
 
@@ -604,7 +1228,19 @@ cssPrefix: pf-v6-c-button
604
1228
  aria-label="Remove"
605
1229
  >
606
1230
  <span class="pf-v6-c-button__icon">
607
- <i class="fas fa-times" aria-hidden="true"></i>
1231
+ <svg
1232
+ class="pf-v6-svg"
1233
+ viewBox="0 0 20 20"
1234
+ fill="currentColor"
1235
+ aria-hidden="true"
1236
+ role="img"
1237
+ width="1em"
1238
+ height="1em"
1239
+ >
1240
+ <path
1241
+ 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"
1242
+ />
1243
+ </svg>
608
1244
  </span>
609
1245
  </button>
610
1246
 
@@ -621,7 +1257,19 @@ cssPrefix: pf-v6-c-button
621
1257
  aria-label="Copy input"
622
1258
  >
623
1259
  <span class="pf-v6-c-button__icon">
624
- <i class="fas fa-copy" aria-hidden="true"></i>
1260
+ <svg
1261
+ class="pf-v6-svg"
1262
+ viewBox="0 0 32 32"
1263
+ fill="currentColor"
1264
+ aria-hidden="true"
1265
+ role="img"
1266
+ width="1em"
1267
+ height="1em"
1268
+ >
1269
+ <path
1270
+ 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"
1271
+ />
1272
+ </svg>
625
1273
  </span>
626
1274
  </button>
627
1275
 
@@ -633,14 +1281,38 @@ cssPrefix: pf-v6-c-button
633
1281
  </div>
634
1282
  <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
635
1283
  <span class="pf-v6-c-button__icon pf-m-start">
636
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1284
+ <svg
1285
+ class="pf-v6-svg"
1286
+ viewBox="0 0 32 32"
1287
+ fill="currentColor"
1288
+ aria-hidden="true"
1289
+ role="img"
1290
+ width="1em"
1291
+ height="1em"
1292
+ >
1293
+ <path
1294
+ 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"
1295
+ />
1296
+ </svg>
637
1297
  </span>
638
1298
  <span class="pf-v6-c-button__text">Primary</span>
639
1299
  </button>
640
1300
 
641
1301
  <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
642
1302
  <span class="pf-v6-c-button__icon pf-m-start">
643
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1303
+ <svg
1304
+ class="pf-v6-svg"
1305
+ viewBox="0 0 32 32"
1306
+ fill="currentColor"
1307
+ aria-hidden="true"
1308
+ role="img"
1309
+ width="1em"
1310
+ height="1em"
1311
+ >
1312
+ <path
1313
+ 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"
1314
+ />
1315
+ </svg>
644
1316
  </span>
645
1317
  <span class="pf-v6-c-button__text">Secondary</span>
646
1318
  </button>
@@ -650,28 +1322,76 @@ cssPrefix: pf-v6-c-button
650
1322
  type="button"
651
1323
  >
652
1324
  <span class="pf-v6-c-button__icon pf-m-start">
653
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1325
+ <svg
1326
+ class="pf-v6-svg"
1327
+ viewBox="0 0 32 32"
1328
+ fill="currentColor"
1329
+ aria-hidden="true"
1330
+ role="img"
1331
+ width="1em"
1332
+ height="1em"
1333
+ >
1334
+ <path
1335
+ 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"
1336
+ />
1337
+ </svg>
654
1338
  </span>
655
1339
  <span class="pf-v6-c-button__text">Secondary danger</span>
656
1340
  </button>
657
1341
 
658
1342
  <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
659
1343
  <span class="pf-v6-c-button__icon pf-m-start">
660
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1344
+ <svg
1345
+ class="pf-v6-svg"
1346
+ viewBox="0 0 32 32"
1347
+ fill="currentColor"
1348
+ aria-hidden="true"
1349
+ role="img"
1350
+ width="1em"
1351
+ height="1em"
1352
+ >
1353
+ <path
1354
+ 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"
1355
+ />
1356
+ </svg>
661
1357
  </span>
662
1358
  <span class="pf-v6-c-button__text">Tertiary</span>
663
1359
  </button>
664
1360
 
665
1361
  <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
666
1362
  <span class="pf-v6-c-button__icon pf-m-start">
667
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1363
+ <svg
1364
+ class="pf-v6-svg"
1365
+ viewBox="0 0 32 32"
1366
+ fill="currentColor"
1367
+ aria-hidden="true"
1368
+ role="img"
1369
+ width="1em"
1370
+ height="1em"
1371
+ >
1372
+ <path
1373
+ 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"
1374
+ />
1375
+ </svg>
668
1376
  </span>
669
1377
  <span class="pf-v6-c-button__text">Danger</span>
670
1378
  </button>
671
1379
 
672
1380
  <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
673
1381
  <span class="pf-v6-c-button__icon pf-m-start">
674
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1382
+ <svg
1383
+ class="pf-v6-svg"
1384
+ viewBox="0 0 32 32"
1385
+ fill="currentColor"
1386
+ aria-hidden="true"
1387
+ role="img"
1388
+ width="1em"
1389
+ height="1em"
1390
+ >
1391
+ <path
1392
+ 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"
1393
+ />
1394
+ </svg>
675
1395
  </span>
676
1396
  <span class="pf-v6-c-button__text">Warning</span>
677
1397
  </button>
@@ -681,21 +1401,57 @@ cssPrefix: pf-v6-c-button
681
1401
 
682
1402
  <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
683
1403
  <span class="pf-v6-c-button__icon pf-m-start">
684
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1404
+ <svg
1405
+ class="pf-v6-svg"
1406
+ viewBox="0 0 32 32"
1407
+ fill="currentColor"
1408
+ aria-hidden="true"
1409
+ role="img"
1410
+ width="1em"
1411
+ height="1em"
1412
+ >
1413
+ <path
1414
+ 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"
1415
+ />
1416
+ </svg>
685
1417
  </span>
686
1418
  <span class="pf-v6-c-button__text">Link</span>
687
1419
  </button>
688
1420
 
689
1421
  <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
690
1422
  <span class="pf-v6-c-button__icon pf-m-start">
691
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1423
+ <svg
1424
+ class="pf-v6-svg"
1425
+ viewBox="0 0 32 32"
1426
+ fill="currentColor"
1427
+ aria-hidden="true"
1428
+ role="img"
1429
+ width="1em"
1430
+ height="1em"
1431
+ >
1432
+ <path
1433
+ 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"
1434
+ />
1435
+ </svg>
692
1436
  </span>
693
1437
  <span class="pf-v6-c-button__text">Link danger</span>
694
1438
  </button>
695
1439
 
696
1440
  <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
697
1441
  <span class="pf-v6-c-button__icon pf-m-start">
698
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1442
+ <svg
1443
+ class="pf-v6-svg"
1444
+ viewBox="0 0 32 32"
1445
+ fill="currentColor"
1446
+ aria-hidden="true"
1447
+ role="img"
1448
+ width="1em"
1449
+ height="1em"
1450
+ >
1451
+ <path
1452
+ 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"
1453
+ />
1454
+ </svg>
699
1455
  </span>
700
1456
  <span class="pf-v6-c-button__text">Inline link</span>
701
1457
  </button>
@@ -706,7 +1462,19 @@ cssPrefix: pf-v6-c-button
706
1462
  aria-label="Remove"
707
1463
  >
708
1464
  <span class="pf-v6-c-button__icon">
709
- <i class="fas fa-times" aria-hidden="true"></i>
1465
+ <svg
1466
+ class="pf-v6-svg"
1467
+ viewBox="0 0 20 20"
1468
+ fill="currentColor"
1469
+ aria-hidden="true"
1470
+ role="img"
1471
+ width="1em"
1472
+ height="1em"
1473
+ >
1474
+ <path
1475
+ 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"
1476
+ />
1477
+ </svg>
710
1478
  </span>
711
1479
  </button>
712
1480
 
@@ -715,7 +1483,19 @@ cssPrefix: pf-v6-c-button
715
1483
 
716
1484
  <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
717
1485
  <span class="pf-v6-c-button__icon pf-m-start">
718
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1486
+ <svg
1487
+ class="pf-v6-svg"
1488
+ viewBox="0 0 32 32"
1489
+ fill="currentColor"
1490
+ aria-hidden="true"
1491
+ role="img"
1492
+ width="1em"
1493
+ height="1em"
1494
+ >
1495
+ <path
1496
+ 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"
1497
+ />
1498
+ </svg>
719
1499
  </span>
720
1500
  <span class="pf-v6-c-button__text">Control</span>
721
1501
  </button>
@@ -726,7 +1506,19 @@ cssPrefix: pf-v6-c-button
726
1506
  aria-label="Copy input"
727
1507
  >
728
1508
  <span class="pf-v6-c-button__icon">
729
- <i class="fas fa-copy" aria-hidden="true"></i>
1509
+ <svg
1510
+ class="pf-v6-svg"
1511
+ viewBox="0 0 32 32"
1512
+ fill="currentColor"
1513
+ aria-hidden="true"
1514
+ role="img"
1515
+ width="1em"
1516
+ height="1em"
1517
+ >
1518
+ <path
1519
+ 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"
1520
+ />
1521
+ </svg>
730
1522
  </span>
731
1523
  </button>
732
1524
 
@@ -739,14 +1531,38 @@ cssPrefix: pf-v6-c-button
739
1531
  <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
740
1532
  <span class="pf-v6-c-button__text">Primary</span>
741
1533
  <span class="pf-v6-c-button__icon pf-m-end">
742
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1534
+ <svg
1535
+ class="pf-v6-svg"
1536
+ viewBox="0 0 32 32"
1537
+ fill="currentColor"
1538
+ aria-hidden="true"
1539
+ role="img"
1540
+ width="1em"
1541
+ height="1em"
1542
+ >
1543
+ <path
1544
+ 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"
1545
+ />
1546
+ </svg>
743
1547
  </span>
744
1548
  </button>
745
1549
 
746
1550
  <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
747
1551
  <span class="pf-v6-c-button__text">Secondary</span>
748
1552
  <span class="pf-v6-c-button__icon pf-m-end">
749
- <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>
750
1566
  </span>
751
1567
  </button>
752
1568
 
@@ -756,28 +1572,76 @@ cssPrefix: pf-v6-c-button
756
1572
  >
757
1573
  <span class="pf-v6-c-button__text">Secondary danger</span>
758
1574
  <span class="pf-v6-c-button__icon pf-m-end">
759
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1575
+ <svg
1576
+ class="pf-v6-svg"
1577
+ viewBox="0 0 32 32"
1578
+ fill="currentColor"
1579
+ aria-hidden="true"
1580
+ role="img"
1581
+ width="1em"
1582
+ height="1em"
1583
+ >
1584
+ <path
1585
+ 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"
1586
+ />
1587
+ </svg>
760
1588
  </span>
761
1589
  </button>
762
1590
 
763
1591
  <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
764
1592
  <span class="pf-v6-c-button__text">Tertiary</span>
765
1593
  <span class="pf-v6-c-button__icon pf-m-end">
766
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
767
- </span>
768
- </button>
769
-
1594
+ <svg
1595
+ class="pf-v6-svg"
1596
+ viewBox="0 0 32 32"
1597
+ fill="currentColor"
1598
+ aria-hidden="true"
1599
+ role="img"
1600
+ width="1em"
1601
+ height="1em"
1602
+ >
1603
+ <path
1604
+ 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"
1605
+ />
1606
+ </svg>
1607
+ </span>
1608
+ </button>
1609
+
770
1610
  <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
771
1611
  <span class="pf-v6-c-button__text">Danger</span>
772
1612
  <span class="pf-v6-c-button__icon pf-m-end">
773
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1613
+ <svg
1614
+ class="pf-v6-svg"
1615
+ viewBox="0 0 32 32"
1616
+ fill="currentColor"
1617
+ aria-hidden="true"
1618
+ role="img"
1619
+ width="1em"
1620
+ height="1em"
1621
+ >
1622
+ <path
1623
+ 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"
1624
+ />
1625
+ </svg>
774
1626
  </span>
775
1627
  </button>
776
1628
 
777
1629
  <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
778
1630
  <span class="pf-v6-c-button__text">Warning</span>
779
1631
  <span class="pf-v6-c-button__icon pf-m-end">
780
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1632
+ <svg
1633
+ class="pf-v6-svg"
1634
+ viewBox="0 0 32 32"
1635
+ fill="currentColor"
1636
+ aria-hidden="true"
1637
+ role="img"
1638
+ width="1em"
1639
+ height="1em"
1640
+ >
1641
+ <path
1642
+ 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"
1643
+ />
1644
+ </svg>
781
1645
  </span>
782
1646
  </button>
783
1647
 
@@ -787,21 +1651,57 @@ cssPrefix: pf-v6-c-button
787
1651
  <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
788
1652
  <span class="pf-v6-c-button__text">Link</span>
789
1653
  <span class="pf-v6-c-button__icon pf-m-end">
790
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1654
+ <svg
1655
+ class="pf-v6-svg"
1656
+ viewBox="0 0 32 32"
1657
+ fill="currentColor"
1658
+ aria-hidden="true"
1659
+ role="img"
1660
+ width="1em"
1661
+ height="1em"
1662
+ >
1663
+ <path
1664
+ 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"
1665
+ />
1666
+ </svg>
791
1667
  </span>
792
1668
  </button>
793
1669
 
794
1670
  <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
795
1671
  <span class="pf-v6-c-button__text">Link danger</span>
796
1672
  <span class="pf-v6-c-button__icon pf-m-end">
797
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1673
+ <svg
1674
+ class="pf-v6-svg"
1675
+ viewBox="0 0 32 32"
1676
+ fill="currentColor"
1677
+ aria-hidden="true"
1678
+ role="img"
1679
+ width="1em"
1680
+ height="1em"
1681
+ >
1682
+ <path
1683
+ 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"
1684
+ />
1685
+ </svg>
798
1686
  </span>
799
1687
  </button>
800
1688
 
801
1689
  <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
802
1690
  <span class="pf-v6-c-button__text">Inline link</span>
803
1691
  <span class="pf-v6-c-button__icon pf-m-end">
804
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1692
+ <svg
1693
+ class="pf-v6-svg"
1694
+ viewBox="0 0 32 32"
1695
+ fill="currentColor"
1696
+ aria-hidden="true"
1697
+ role="img"
1698
+ width="1em"
1699
+ height="1em"
1700
+ >
1701
+ <path
1702
+ 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"
1703
+ />
1704
+ </svg>
805
1705
  </span>
806
1706
  </button>
807
1707
 
@@ -811,7 +1711,19 @@ cssPrefix: pf-v6-c-button
811
1711
  aria-label="Remove"
812
1712
  >
813
1713
  <span class="pf-v6-c-button__icon">
814
- <i class="fas fa-times" aria-hidden="true"></i>
1714
+ <svg
1715
+ class="pf-v6-svg"
1716
+ viewBox="0 0 20 20"
1717
+ fill="currentColor"
1718
+ aria-hidden="true"
1719
+ role="img"
1720
+ width="1em"
1721
+ height="1em"
1722
+ >
1723
+ <path
1724
+ 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"
1725
+ />
1726
+ </svg>
815
1727
  </span>
816
1728
  </button>
817
1729
 
@@ -821,7 +1733,19 @@ cssPrefix: pf-v6-c-button
821
1733
  <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
822
1734
  <span class="pf-v6-c-button__text">Control</span>
823
1735
  <span class="pf-v6-c-button__icon pf-m-end">
824
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1736
+ <svg
1737
+ class="pf-v6-svg"
1738
+ viewBox="0 0 32 32"
1739
+ fill="currentColor"
1740
+ aria-hidden="true"
1741
+ role="img"
1742
+ width="1em"
1743
+ height="1em"
1744
+ >
1745
+ <path
1746
+ 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"
1747
+ />
1748
+ </svg>
825
1749
  </span>
826
1750
  </button>
827
1751
 
@@ -831,7 +1755,19 @@ cssPrefix: pf-v6-c-button
831
1755
  aria-label="Copy input"
832
1756
  >
833
1757
  <span class="pf-v6-c-button__icon">
834
- <i class="fas fa-copy" aria-hidden="true"></i>
1758
+ <svg
1759
+ class="pf-v6-svg"
1760
+ viewBox="0 0 32 32"
1761
+ fill="currentColor"
1762
+ aria-hidden="true"
1763
+ role="img"
1764
+ width="1em"
1765
+ height="1em"
1766
+ >
1767
+ <path
1768
+ 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"
1769
+ />
1770
+ </svg>
835
1771
  </span>
836
1772
  </button>
837
1773
 
@@ -890,7 +1826,19 @@ cssPrefix: pf-v6-c-button
890
1826
  disabled
891
1827
  >
892
1828
  <span class="pf-v6-c-button__icon">
893
- <i class="fas fa-times" aria-hidden="true"></i>
1829
+ <svg
1830
+ class="pf-v6-svg"
1831
+ viewBox="0 0 20 20"
1832
+ fill="currentColor"
1833
+ aria-hidden="true"
1834
+ role="img"
1835
+ width="1em"
1836
+ height="1em"
1837
+ >
1838
+ <path
1839
+ 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"
1840
+ />
1841
+ </svg>
894
1842
  </span>
895
1843
  </button>
896
1844
 
@@ -908,7 +1856,19 @@ cssPrefix: pf-v6-c-button
908
1856
  disabled
909
1857
  >
910
1858
  <span class="pf-v6-c-button__icon">
911
- <i class="fas fa-copy" aria-hidden="true"></i>
1859
+ <svg
1860
+ class="pf-v6-svg"
1861
+ viewBox="0 0 32 32"
1862
+ fill="currentColor"
1863
+ aria-hidden="true"
1864
+ role="img"
1865
+ width="1em"
1866
+ height="1em"
1867
+ >
1868
+ <path
1869
+ 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"
1870
+ />
1871
+ </svg>
912
1872
  </span>
913
1873
  </button>
914
1874
 
@@ -920,14 +1880,38 @@ cssPrefix: pf-v6-c-button
920
1880
  </div>
921
1881
  <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
922
1882
  <span class="pf-v6-c-button__icon pf-m-start">
923
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1883
+ <svg
1884
+ class="pf-v6-svg"
1885
+ viewBox="0 0 32 32"
1886
+ fill="currentColor"
1887
+ aria-hidden="true"
1888
+ role="img"
1889
+ width="1em"
1890
+ height="1em"
1891
+ >
1892
+ <path
1893
+ 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"
1894
+ />
1895
+ </svg>
924
1896
  </span>
925
1897
  <span class="pf-v6-c-button__text">Primary</span>
926
1898
  </button>
927
1899
 
928
1900
  <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
929
1901
  <span class="pf-v6-c-button__icon pf-m-start">
930
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1902
+ <svg
1903
+ class="pf-v6-svg"
1904
+ viewBox="0 0 32 32"
1905
+ fill="currentColor"
1906
+ aria-hidden="true"
1907
+ role="img"
1908
+ width="1em"
1909
+ height="1em"
1910
+ >
1911
+ <path
1912
+ 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"
1913
+ />
1914
+ </svg>
931
1915
  </span>
932
1916
  <span class="pf-v6-c-button__text">Secondary</span>
933
1917
  </button>
@@ -938,28 +1922,76 @@ cssPrefix: pf-v6-c-button
938
1922
  disabled
939
1923
  >
940
1924
  <span class="pf-v6-c-button__icon pf-m-start">
941
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1925
+ <svg
1926
+ class="pf-v6-svg"
1927
+ viewBox="0 0 32 32"
1928
+ fill="currentColor"
1929
+ aria-hidden="true"
1930
+ role="img"
1931
+ width="1em"
1932
+ height="1em"
1933
+ >
1934
+ <path
1935
+ 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"
1936
+ />
1937
+ </svg>
942
1938
  </span>
943
1939
  <span class="pf-v6-c-button__text">Secondary danger</span>
944
1940
  </button>
945
1941
 
946
1942
  <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
947
1943
  <span class="pf-v6-c-button__icon pf-m-start">
948
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1944
+ <svg
1945
+ class="pf-v6-svg"
1946
+ viewBox="0 0 32 32"
1947
+ fill="currentColor"
1948
+ aria-hidden="true"
1949
+ role="img"
1950
+ width="1em"
1951
+ height="1em"
1952
+ >
1953
+ <path
1954
+ 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"
1955
+ />
1956
+ </svg>
949
1957
  </span>
950
1958
  <span class="pf-v6-c-button__text">Tertiary</span>
951
1959
  </button>
952
1960
 
953
1961
  <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
954
1962
  <span class="pf-v6-c-button__icon pf-m-start">
955
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1963
+ <svg
1964
+ class="pf-v6-svg"
1965
+ viewBox="0 0 32 32"
1966
+ fill="currentColor"
1967
+ aria-hidden="true"
1968
+ role="img"
1969
+ width="1em"
1970
+ height="1em"
1971
+ >
1972
+ <path
1973
+ 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"
1974
+ />
1975
+ </svg>
956
1976
  </span>
957
1977
  <span class="pf-v6-c-button__text">Danger</span>
958
1978
  </button>
959
1979
 
960
1980
  <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
961
1981
  <span class="pf-v6-c-button__icon pf-m-start">
962
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
1982
+ <svg
1983
+ class="pf-v6-svg"
1984
+ viewBox="0 0 32 32"
1985
+ fill="currentColor"
1986
+ aria-hidden="true"
1987
+ role="img"
1988
+ width="1em"
1989
+ height="1em"
1990
+ >
1991
+ <path
1992
+ 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"
1993
+ />
1994
+ </svg>
963
1995
  </span>
964
1996
  <span class="pf-v6-c-button__text">Warning</span>
965
1997
  </button>
@@ -969,21 +2001,57 @@ cssPrefix: pf-v6-c-button
969
2001
 
970
2002
  <button class="pf-v6-c-button pf-m-link" type="button" disabled>
971
2003
  <span class="pf-v6-c-button__icon pf-m-start">
972
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2004
+ <svg
2005
+ class="pf-v6-svg"
2006
+ viewBox="0 0 32 32"
2007
+ fill="currentColor"
2008
+ aria-hidden="true"
2009
+ role="img"
2010
+ width="1em"
2011
+ height="1em"
2012
+ >
2013
+ <path
2014
+ 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"
2015
+ />
2016
+ </svg>
973
2017
  </span>
974
2018
  <span class="pf-v6-c-button__text">Link</span>
975
2019
  </button>
976
2020
 
977
2021
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
978
2022
  <span class="pf-v6-c-button__icon pf-m-start">
979
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2023
+ <svg
2024
+ class="pf-v6-svg"
2025
+ viewBox="0 0 32 32"
2026
+ fill="currentColor"
2027
+ aria-hidden="true"
2028
+ role="img"
2029
+ width="1em"
2030
+ height="1em"
2031
+ >
2032
+ <path
2033
+ 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"
2034
+ />
2035
+ </svg>
980
2036
  </span>
981
2037
  <span class="pf-v6-c-button__text">Link danger</span>
982
2038
  </button>
983
2039
 
984
2040
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
985
2041
  <span class="pf-v6-c-button__icon pf-m-start">
986
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2042
+ <svg
2043
+ class="pf-v6-svg"
2044
+ viewBox="0 0 32 32"
2045
+ fill="currentColor"
2046
+ aria-hidden="true"
2047
+ role="img"
2048
+ width="1em"
2049
+ height="1em"
2050
+ >
2051
+ <path
2052
+ 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"
2053
+ />
2054
+ </svg>
987
2055
  </span>
988
2056
  <span class="pf-v6-c-button__text">Inline link</span>
989
2057
  </button>
@@ -995,7 +2063,19 @@ cssPrefix: pf-v6-c-button
995
2063
  disabled
996
2064
  >
997
2065
  <span class="pf-v6-c-button__icon">
998
- <i class="fas fa-times" aria-hidden="true"></i>
2066
+ <svg
2067
+ class="pf-v6-svg"
2068
+ viewBox="0 0 20 20"
2069
+ fill="currentColor"
2070
+ aria-hidden="true"
2071
+ role="img"
2072
+ width="1em"
2073
+ height="1em"
2074
+ >
2075
+ <path
2076
+ 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"
2077
+ />
2078
+ </svg>
999
2079
  </span>
1000
2080
  </button>
1001
2081
 
@@ -1004,7 +2084,19 @@ cssPrefix: pf-v6-c-button
1004
2084
 
1005
2085
  <button class="pf-v6-c-button pf-m-control" type="button" disabled>
1006
2086
  <span class="pf-v6-c-button__icon pf-m-start">
1007
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2087
+ <svg
2088
+ class="pf-v6-svg"
2089
+ viewBox="0 0 32 32"
2090
+ fill="currentColor"
2091
+ aria-hidden="true"
2092
+ role="img"
2093
+ width="1em"
2094
+ height="1em"
2095
+ >
2096
+ <path
2097
+ 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"
2098
+ />
2099
+ </svg>
1008
2100
  </span>
1009
2101
  <span class="pf-v6-c-button__text">Control</span>
1010
2102
  </button>
@@ -1016,7 +2108,19 @@ cssPrefix: pf-v6-c-button
1016
2108
  disabled
1017
2109
  >
1018
2110
  <span class="pf-v6-c-button__icon">
1019
- <i class="fas fa-copy" aria-hidden="true"></i>
2111
+ <svg
2112
+ class="pf-v6-svg"
2113
+ viewBox="0 0 32 32"
2114
+ fill="currentColor"
2115
+ aria-hidden="true"
2116
+ role="img"
2117
+ width="1em"
2118
+ height="1em"
2119
+ >
2120
+ <path
2121
+ 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"
2122
+ />
2123
+ </svg>
1020
2124
  </span>
1021
2125
  </button>
1022
2126
 
@@ -1029,14 +2133,38 @@ cssPrefix: pf-v6-c-button
1029
2133
  <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
1030
2134
  <span class="pf-v6-c-button__text">Primary</span>
1031
2135
  <span class="pf-v6-c-button__icon pf-m-end">
1032
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2136
+ <svg
2137
+ class="pf-v6-svg"
2138
+ viewBox="0 0 32 32"
2139
+ fill="currentColor"
2140
+ aria-hidden="true"
2141
+ role="img"
2142
+ width="1em"
2143
+ height="1em"
2144
+ >
2145
+ <path
2146
+ 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"
2147
+ />
2148
+ </svg>
1033
2149
  </span>
1034
2150
  </button>
1035
2151
 
1036
2152
  <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
1037
2153
  <span class="pf-v6-c-button__text">Secondary</span>
1038
2154
  <span class="pf-v6-c-button__icon pf-m-end">
1039
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2155
+ <svg
2156
+ class="pf-v6-svg"
2157
+ viewBox="0 0 32 32"
2158
+ fill="currentColor"
2159
+ aria-hidden="true"
2160
+ role="img"
2161
+ width="1em"
2162
+ height="1em"
2163
+ >
2164
+ <path
2165
+ 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"
2166
+ />
2167
+ </svg>
1040
2168
  </span>
1041
2169
  </button>
1042
2170
 
@@ -1047,28 +2175,76 @@ cssPrefix: pf-v6-c-button
1047
2175
  >
1048
2176
  <span class="pf-v6-c-button__text">Secondary danger</span>
1049
2177
  <span class="pf-v6-c-button__icon pf-m-end">
1050
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2178
+ <svg
2179
+ class="pf-v6-svg"
2180
+ viewBox="0 0 32 32"
2181
+ fill="currentColor"
2182
+ aria-hidden="true"
2183
+ role="img"
2184
+ width="1em"
2185
+ height="1em"
2186
+ >
2187
+ <path
2188
+ 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"
2189
+ />
2190
+ </svg>
1051
2191
  </span>
1052
2192
  </button>
1053
2193
 
1054
2194
  <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
1055
2195
  <span class="pf-v6-c-button__text">Tertiary</span>
1056
2196
  <span class="pf-v6-c-button__icon pf-m-end">
1057
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2197
+ <svg
2198
+ class="pf-v6-svg"
2199
+ viewBox="0 0 32 32"
2200
+ fill="currentColor"
2201
+ aria-hidden="true"
2202
+ role="img"
2203
+ width="1em"
2204
+ height="1em"
2205
+ >
2206
+ <path
2207
+ 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"
2208
+ />
2209
+ </svg>
1058
2210
  </span>
1059
2211
  </button>
1060
2212
 
1061
2213
  <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
1062
2214
  <span class="pf-v6-c-button__text">Danger</span>
1063
2215
  <span class="pf-v6-c-button__icon pf-m-end">
1064
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2216
+ <svg
2217
+ class="pf-v6-svg"
2218
+ viewBox="0 0 32 32"
2219
+ fill="currentColor"
2220
+ aria-hidden="true"
2221
+ role="img"
2222
+ width="1em"
2223
+ height="1em"
2224
+ >
2225
+ <path
2226
+ 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"
2227
+ />
2228
+ </svg>
1065
2229
  </span>
1066
2230
  </button>
1067
2231
 
1068
2232
  <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
1069
2233
  <span class="pf-v6-c-button__text">Warning</span>
1070
2234
  <span class="pf-v6-c-button__icon pf-m-end">
1071
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2235
+ <svg
2236
+ class="pf-v6-svg"
2237
+ viewBox="0 0 32 32"
2238
+ fill="currentColor"
2239
+ aria-hidden="true"
2240
+ role="img"
2241
+ width="1em"
2242
+ height="1em"
2243
+ >
2244
+ <path
2245
+ 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"
2246
+ />
2247
+ </svg>
1072
2248
  </span>
1073
2249
  </button>
1074
2250
 
@@ -1078,21 +2254,57 @@ cssPrefix: pf-v6-c-button
1078
2254
  <button class="pf-v6-c-button pf-m-link" type="button" disabled>
1079
2255
  <span class="pf-v6-c-button__text">Link</span>
1080
2256
  <span class="pf-v6-c-button__icon pf-m-end">
1081
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2257
+ <svg
2258
+ class="pf-v6-svg"
2259
+ viewBox="0 0 32 32"
2260
+ fill="currentColor"
2261
+ aria-hidden="true"
2262
+ role="img"
2263
+ width="1em"
2264
+ height="1em"
2265
+ >
2266
+ <path
2267
+ 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"
2268
+ />
2269
+ </svg>
1082
2270
  </span>
1083
2271
  </button>
1084
2272
 
1085
2273
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
1086
2274
  <span class="pf-v6-c-button__text">Link danger</span>
1087
2275
  <span class="pf-v6-c-button__icon pf-m-end">
1088
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2276
+ <svg
2277
+ class="pf-v6-svg"
2278
+ viewBox="0 0 32 32"
2279
+ fill="currentColor"
2280
+ aria-hidden="true"
2281
+ role="img"
2282
+ width="1em"
2283
+ height="1em"
2284
+ >
2285
+ <path
2286
+ 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"
2287
+ />
2288
+ </svg>
1089
2289
  </span>
1090
2290
  </button>
1091
2291
 
1092
2292
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
1093
2293
  <span class="pf-v6-c-button__text">Inline link</span>
1094
2294
  <span class="pf-v6-c-button__icon pf-m-end">
1095
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2295
+ <svg
2296
+ class="pf-v6-svg"
2297
+ viewBox="0 0 32 32"
2298
+ fill="currentColor"
2299
+ aria-hidden="true"
2300
+ role="img"
2301
+ width="1em"
2302
+ height="1em"
2303
+ >
2304
+ <path
2305
+ 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"
2306
+ />
2307
+ </svg>
1096
2308
  </span>
1097
2309
  </button>
1098
2310
 
@@ -1103,7 +2315,19 @@ cssPrefix: pf-v6-c-button
1103
2315
  disabled
1104
2316
  >
1105
2317
  <span class="pf-v6-c-button__icon">
1106
- <i class="fas fa-times" aria-hidden="true"></i>
2318
+ <svg
2319
+ class="pf-v6-svg"
2320
+ viewBox="0 0 20 20"
2321
+ fill="currentColor"
2322
+ aria-hidden="true"
2323
+ role="img"
2324
+ width="1em"
2325
+ height="1em"
2326
+ >
2327
+ <path
2328
+ 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"
2329
+ />
2330
+ </svg>
1107
2331
  </span>
1108
2332
  </button>
1109
2333
 
@@ -1113,7 +2337,19 @@ cssPrefix: pf-v6-c-button
1113
2337
  <button class="pf-v6-c-button pf-m-control" type="button" disabled>
1114
2338
  <span class="pf-v6-c-button__text">Control</span>
1115
2339
  <span class="pf-v6-c-button__icon pf-m-end">
1116
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2340
+ <svg
2341
+ class="pf-v6-svg"
2342
+ viewBox="0 0 32 32"
2343
+ fill="currentColor"
2344
+ aria-hidden="true"
2345
+ role="img"
2346
+ width="1em"
2347
+ height="1em"
2348
+ >
2349
+ <path
2350
+ 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"
2351
+ />
2352
+ </svg>
1117
2353
  </span>
1118
2354
  </button>
1119
2355
 
@@ -1124,7 +2360,19 @@ cssPrefix: pf-v6-c-button
1124
2360
  disabled
1125
2361
  >
1126
2362
  <span class="pf-v6-c-button__icon">
1127
- <i class="fas fa-copy" aria-hidden="true"></i>
2363
+ <svg
2364
+ class="pf-v6-svg"
2365
+ viewBox="0 0 32 32"
2366
+ fill="currentColor"
2367
+ aria-hidden="true"
2368
+ role="img"
2369
+ width="1em"
2370
+ height="1em"
2371
+ >
2372
+ <path
2373
+ 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"
2374
+ />
2375
+ </svg>
1128
2376
  </span>
1129
2377
  </button>
1130
2378
 
@@ -1215,7 +2463,19 @@ cssPrefix: pf-v6-c-button
1215
2463
  aria-disabled="true"
1216
2464
  >
1217
2465
  <span class="pf-v6-c-button__icon">
1218
- <i class="fas fa-times" aria-hidden="true"></i>
2466
+ <svg
2467
+ class="pf-v6-svg"
2468
+ viewBox="0 0 20 20"
2469
+ fill="currentColor"
2470
+ aria-hidden="true"
2471
+ role="img"
2472
+ width="1em"
2473
+ height="1em"
2474
+ >
2475
+ <path
2476
+ 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"
2477
+ />
2478
+ </svg>
1219
2479
  </span>
1220
2480
  </button>
1221
2481
 
@@ -1237,7 +2497,19 @@ cssPrefix: pf-v6-c-button
1237
2497
  aria-disabled="true"
1238
2498
  >
1239
2499
  <span class="pf-v6-c-button__icon">
1240
- <i class="fas fa-copy" 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="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"
2511
+ />
2512
+ </svg>
1241
2513
  </span>
1242
2514
  </button>
1243
2515
 
@@ -1253,7 +2525,19 @@ cssPrefix: pf-v6-c-button
1253
2525
  aria-disabled="true"
1254
2526
  >
1255
2527
  <span class="pf-v6-c-button__icon pf-m-start">
1256
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2528
+ <svg
2529
+ class="pf-v6-svg"
2530
+ viewBox="0 0 32 32"
2531
+ fill="currentColor"
2532
+ aria-hidden="true"
2533
+ role="img"
2534
+ width="1em"
2535
+ height="1em"
2536
+ >
2537
+ <path
2538
+ 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"
2539
+ />
2540
+ </svg>
1257
2541
  </span>
1258
2542
  <span class="pf-v6-c-button__text">Primary</span>
1259
2543
  </button>
@@ -1264,7 +2548,19 @@ cssPrefix: pf-v6-c-button
1264
2548
  aria-disabled="true"
1265
2549
  >
1266
2550
  <span class="pf-v6-c-button__icon pf-m-start">
1267
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2551
+ <svg
2552
+ class="pf-v6-svg"
2553
+ viewBox="0 0 32 32"
2554
+ fill="currentColor"
2555
+ aria-hidden="true"
2556
+ role="img"
2557
+ width="1em"
2558
+ height="1em"
2559
+ >
2560
+ <path
2561
+ 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"
2562
+ />
2563
+ </svg>
1268
2564
  </span>
1269
2565
  <span class="pf-v6-c-button__text">Secondary</span>
1270
2566
  </button>
@@ -1275,7 +2571,19 @@ cssPrefix: pf-v6-c-button
1275
2571
  aria-disabled="true"
1276
2572
  >
1277
2573
  <span class="pf-v6-c-button__icon pf-m-start">
1278
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2574
+ <svg
2575
+ class="pf-v6-svg"
2576
+ viewBox="0 0 32 32"
2577
+ fill="currentColor"
2578
+ aria-hidden="true"
2579
+ role="img"
2580
+ width="1em"
2581
+ height="1em"
2582
+ >
2583
+ <path
2584
+ 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"
2585
+ />
2586
+ </svg>
1279
2587
  </span>
1280
2588
  <span class="pf-v6-c-button__text">Secondary danger</span>
1281
2589
  </button>
@@ -1286,7 +2594,19 @@ cssPrefix: pf-v6-c-button
1286
2594
  aria-disabled="true"
1287
2595
  >
1288
2596
  <span class="pf-v6-c-button__icon pf-m-start">
1289
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2597
+ <svg
2598
+ class="pf-v6-svg"
2599
+ viewBox="0 0 32 32"
2600
+ fill="currentColor"
2601
+ aria-hidden="true"
2602
+ role="img"
2603
+ width="1em"
2604
+ height="1em"
2605
+ >
2606
+ <path
2607
+ 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"
2608
+ />
2609
+ </svg>
1290
2610
  </span>
1291
2611
  <span class="pf-v6-c-button__text">Tertiary</span>
1292
2612
  </button>
@@ -1297,7 +2617,19 @@ cssPrefix: pf-v6-c-button
1297
2617
  aria-disabled="true"
1298
2618
  >
1299
2619
  <span class="pf-v6-c-button__icon pf-m-start">
1300
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2620
+ <svg
2621
+ class="pf-v6-svg"
2622
+ viewBox="0 0 32 32"
2623
+ fill="currentColor"
2624
+ aria-hidden="true"
2625
+ role="img"
2626
+ width="1em"
2627
+ height="1em"
2628
+ >
2629
+ <path
2630
+ 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"
2631
+ />
2632
+ </svg>
1301
2633
  </span>
1302
2634
  <span class="pf-v6-c-button__text">Danger</span>
1303
2635
  </button>
@@ -1308,7 +2640,19 @@ cssPrefix: pf-v6-c-button
1308
2640
  aria-disabled="true"
1309
2641
  >
1310
2642
  <span class="pf-v6-c-button__icon pf-m-start">
1311
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2643
+ <svg
2644
+ class="pf-v6-svg"
2645
+ viewBox="0 0 32 32"
2646
+ fill="currentColor"
2647
+ aria-hidden="true"
2648
+ role="img"
2649
+ width="1em"
2650
+ height="1em"
2651
+ >
2652
+ <path
2653
+ 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"
2654
+ />
2655
+ </svg>
1312
2656
  </span>
1313
2657
  <span class="pf-v6-c-button__text">Warning</span>
1314
2658
  </button>
@@ -1322,7 +2666,19 @@ cssPrefix: pf-v6-c-button
1322
2666
  aria-disabled="true"
1323
2667
  >
1324
2668
  <span class="pf-v6-c-button__icon pf-m-start">
1325
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2669
+ <svg
2670
+ class="pf-v6-svg"
2671
+ viewBox="0 0 32 32"
2672
+ fill="currentColor"
2673
+ aria-hidden="true"
2674
+ role="img"
2675
+ width="1em"
2676
+ height="1em"
2677
+ >
2678
+ <path
2679
+ 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"
2680
+ />
2681
+ </svg>
1326
2682
  </span>
1327
2683
  <span class="pf-v6-c-button__text">Link</span>
1328
2684
  </button>
@@ -1333,7 +2689,19 @@ cssPrefix: pf-v6-c-button
1333
2689
  aria-disabled="true"
1334
2690
  >
1335
2691
  <span class="pf-v6-c-button__icon pf-m-start">
1336
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2692
+ <svg
2693
+ class="pf-v6-svg"
2694
+ viewBox="0 0 32 32"
2695
+ fill="currentColor"
2696
+ aria-hidden="true"
2697
+ role="img"
2698
+ width="1em"
2699
+ height="1em"
2700
+ >
2701
+ <path
2702
+ 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"
2703
+ />
2704
+ </svg>
1337
2705
  </span>
1338
2706
  <span class="pf-v6-c-button__text">Link danger</span>
1339
2707
  </button>
@@ -1344,7 +2712,19 @@ cssPrefix: pf-v6-c-button
1344
2712
  aria-disabled="true"
1345
2713
  >
1346
2714
  <span class="pf-v6-c-button__icon pf-m-start">
1347
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2715
+ <svg
2716
+ class="pf-v6-svg"
2717
+ viewBox="0 0 32 32"
2718
+ fill="currentColor"
2719
+ aria-hidden="true"
2720
+ role="img"
2721
+ width="1em"
2722
+ height="1em"
2723
+ >
2724
+ <path
2725
+ 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"
2726
+ />
2727
+ </svg>
1348
2728
  </span>
1349
2729
  <span class="pf-v6-c-button__text">Inline link</span>
1350
2730
  </button>
@@ -1356,10 +2736,22 @@ cssPrefix: pf-v6-c-button
1356
2736
  aria-disabled="true"
1357
2737
  >
1358
2738
  <span class="pf-v6-c-button__icon">
1359
- <i class="fas fa-times" aria-hidden="true"></i>
1360
- </span>
1361
- </button>
1362
-
2739
+ <svg
2740
+ class="pf-v6-svg"
2741
+ viewBox="0 0 20 20"
2742
+ fill="currentColor"
2743
+ aria-hidden="true"
2744
+ role="img"
2745
+ width="1em"
2746
+ height="1em"
2747
+ >
2748
+ <path
2749
+ 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"
2750
+ />
2751
+ </svg>
2752
+ </span>
2753
+ </button>
2754
+
1363
2755
  <br />
1364
2756
  <br />
1365
2757
 
@@ -1369,7 +2761,19 @@ cssPrefix: pf-v6-c-button
1369
2761
  aria-disabled="true"
1370
2762
  >
1371
2763
  <span class="pf-v6-c-button__icon pf-m-start">
1372
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2764
+ <svg
2765
+ class="pf-v6-svg"
2766
+ viewBox="0 0 32 32"
2767
+ fill="currentColor"
2768
+ aria-hidden="true"
2769
+ role="img"
2770
+ width="1em"
2771
+ height="1em"
2772
+ >
2773
+ <path
2774
+ 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"
2775
+ />
2776
+ </svg>
1373
2777
  </span>
1374
2778
  <span class="pf-v6-c-button__text">Control</span>
1375
2779
  </button>
@@ -1381,7 +2785,19 @@ cssPrefix: pf-v6-c-button
1381
2785
  aria-disabled="true"
1382
2786
  >
1383
2787
  <span class="pf-v6-c-button__icon">
1384
- <i class="fas fa-copy" aria-hidden="true"></i>
2788
+ <svg
2789
+ class="pf-v6-svg"
2790
+ viewBox="0 0 32 32"
2791
+ fill="currentColor"
2792
+ aria-hidden="true"
2793
+ role="img"
2794
+ width="1em"
2795
+ height="1em"
2796
+ >
2797
+ <path
2798
+ 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"
2799
+ />
2800
+ </svg>
1385
2801
  </span>
1386
2802
  </button>
1387
2803
 
@@ -1398,7 +2814,19 @@ cssPrefix: pf-v6-c-button
1398
2814
  >
1399
2815
  <span class="pf-v6-c-button__text">Primary</span>
1400
2816
  <span class="pf-v6-c-button__icon pf-m-end">
1401
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2817
+ <svg
2818
+ class="pf-v6-svg"
2819
+ viewBox="0 0 32 32"
2820
+ fill="currentColor"
2821
+ aria-hidden="true"
2822
+ role="img"
2823
+ width="1em"
2824
+ height="1em"
2825
+ >
2826
+ <path
2827
+ 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"
2828
+ />
2829
+ </svg>
1402
2830
  </span>
1403
2831
  </button>
1404
2832
 
@@ -1409,7 +2837,19 @@ cssPrefix: pf-v6-c-button
1409
2837
  >
1410
2838
  <span class="pf-v6-c-button__text">Secondary</span>
1411
2839
  <span class="pf-v6-c-button__icon pf-m-end">
1412
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2840
+ <svg
2841
+ class="pf-v6-svg"
2842
+ viewBox="0 0 32 32"
2843
+ fill="currentColor"
2844
+ aria-hidden="true"
2845
+ role="img"
2846
+ width="1em"
2847
+ height="1em"
2848
+ >
2849
+ <path
2850
+ 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"
2851
+ />
2852
+ </svg>
1413
2853
  </span>
1414
2854
  </button>
1415
2855
 
@@ -1420,7 +2860,19 @@ cssPrefix: pf-v6-c-button
1420
2860
  >
1421
2861
  <span class="pf-v6-c-button__text">Secondary danger</span>
1422
2862
  <span class="pf-v6-c-button__icon pf-m-end">
1423
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2863
+ <svg
2864
+ class="pf-v6-svg"
2865
+ viewBox="0 0 32 32"
2866
+ fill="currentColor"
2867
+ aria-hidden="true"
2868
+ role="img"
2869
+ width="1em"
2870
+ height="1em"
2871
+ >
2872
+ <path
2873
+ 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"
2874
+ />
2875
+ </svg>
1424
2876
  </span>
1425
2877
  </button>
1426
2878
 
@@ -1431,7 +2883,19 @@ cssPrefix: pf-v6-c-button
1431
2883
  >
1432
2884
  <span class="pf-v6-c-button__text">Tertiary</span>
1433
2885
  <span class="pf-v6-c-button__icon pf-m-end">
1434
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2886
+ <svg
2887
+ class="pf-v6-svg"
2888
+ viewBox="0 0 32 32"
2889
+ fill="currentColor"
2890
+ aria-hidden="true"
2891
+ role="img"
2892
+ width="1em"
2893
+ height="1em"
2894
+ >
2895
+ <path
2896
+ 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"
2897
+ />
2898
+ </svg>
1435
2899
  </span>
1436
2900
  </button>
1437
2901
 
@@ -1442,7 +2906,19 @@ cssPrefix: pf-v6-c-button
1442
2906
  >
1443
2907
  <span class="pf-v6-c-button__text">Danger</span>
1444
2908
  <span class="pf-v6-c-button__icon pf-m-end">
1445
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2909
+ <svg
2910
+ class="pf-v6-svg"
2911
+ viewBox="0 0 32 32"
2912
+ fill="currentColor"
2913
+ aria-hidden="true"
2914
+ role="img"
2915
+ width="1em"
2916
+ height="1em"
2917
+ >
2918
+ <path
2919
+ 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"
2920
+ />
2921
+ </svg>
1446
2922
  </span>
1447
2923
  </button>
1448
2924
 
@@ -1453,7 +2929,19 @@ cssPrefix: pf-v6-c-button
1453
2929
  >
1454
2930
  <span class="pf-v6-c-button__text">Warning</span>
1455
2931
  <span class="pf-v6-c-button__icon pf-m-end">
1456
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2932
+ <svg
2933
+ class="pf-v6-svg"
2934
+ viewBox="0 0 32 32"
2935
+ fill="currentColor"
2936
+ aria-hidden="true"
2937
+ role="img"
2938
+ width="1em"
2939
+ height="1em"
2940
+ >
2941
+ <path
2942
+ 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"
2943
+ />
2944
+ </svg>
1457
2945
  </span>
1458
2946
  </button>
1459
2947
 
@@ -1467,7 +2955,19 @@ cssPrefix: pf-v6-c-button
1467
2955
  >
1468
2956
  <span class="pf-v6-c-button__text">Link</span>
1469
2957
  <span class="pf-v6-c-button__icon pf-m-end">
1470
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2958
+ <svg
2959
+ class="pf-v6-svg"
2960
+ viewBox="0 0 32 32"
2961
+ fill="currentColor"
2962
+ aria-hidden="true"
2963
+ role="img"
2964
+ width="1em"
2965
+ height="1em"
2966
+ >
2967
+ <path
2968
+ 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"
2969
+ />
2970
+ </svg>
1471
2971
  </span>
1472
2972
  </button>
1473
2973
 
@@ -1478,7 +2978,19 @@ cssPrefix: pf-v6-c-button
1478
2978
  >
1479
2979
  <span class="pf-v6-c-button__text">Link danger</span>
1480
2980
  <span class="pf-v6-c-button__icon pf-m-end">
1481
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
2981
+ <svg
2982
+ class="pf-v6-svg"
2983
+ viewBox="0 0 32 32"
2984
+ fill="currentColor"
2985
+ aria-hidden="true"
2986
+ role="img"
2987
+ width="1em"
2988
+ height="1em"
2989
+ >
2990
+ <path
2991
+ 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"
2992
+ />
2993
+ </svg>
1482
2994
  </span>
1483
2995
  </button>
1484
2996
 
@@ -1489,7 +3001,19 @@ cssPrefix: pf-v6-c-button
1489
3001
  >
1490
3002
  <span class="pf-v6-c-button__text">Inline link</span>
1491
3003
  <span class="pf-v6-c-button__icon pf-m-end">
1492
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3004
+ <svg
3005
+ class="pf-v6-svg"
3006
+ viewBox="0 0 32 32"
3007
+ fill="currentColor"
3008
+ aria-hidden="true"
3009
+ role="img"
3010
+ width="1em"
3011
+ height="1em"
3012
+ >
3013
+ <path
3014
+ 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"
3015
+ />
3016
+ </svg>
1493
3017
  </span>
1494
3018
  </button>
1495
3019
 
@@ -1500,7 +3024,19 @@ cssPrefix: pf-v6-c-button
1500
3024
  aria-disabled="true"
1501
3025
  >
1502
3026
  <span class="pf-v6-c-button__icon">
1503
- <i class="fas fa-times" aria-hidden="true"></i>
3027
+ <svg
3028
+ class="pf-v6-svg"
3029
+ viewBox="0 0 20 20"
3030
+ fill="currentColor"
3031
+ aria-hidden="true"
3032
+ role="img"
3033
+ width="1em"
3034
+ height="1em"
3035
+ >
3036
+ <path
3037
+ 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"
3038
+ />
3039
+ </svg>
1504
3040
  </span>
1505
3041
  </button>
1506
3042
 
@@ -1514,7 +3050,19 @@ cssPrefix: pf-v6-c-button
1514
3050
  >
1515
3051
  <span class="pf-v6-c-button__text">Control</span>
1516
3052
  <span class="pf-v6-c-button__icon pf-m-end">
1517
- <i class="fas fa-plus-circle" aria-hidden="true"></i>
3053
+ <svg
3054
+ class="pf-v6-svg"
3055
+ viewBox="0 0 32 32"
3056
+ fill="currentColor"
3057
+ aria-hidden="true"
3058
+ role="img"
3059
+ width="1em"
3060
+ height="1em"
3061
+ >
3062
+ <path
3063
+ 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"
3064
+ />
3065
+ </svg>
1518
3066
  </span>
1519
3067
  </button>
1520
3068
 
@@ -1525,7 +3073,19 @@ cssPrefix: pf-v6-c-button
1525
3073
  aria-disabled="true"
1526
3074
  >
1527
3075
  <span class="pf-v6-c-button__icon">
1528
- <i class="fas fa-copy" aria-hidden="true"></i>
3076
+ <svg
3077
+ class="pf-v6-svg"
3078
+ viewBox="0 0 32 32"
3079
+ fill="currentColor"
3080
+ aria-hidden="true"
3081
+ role="img"
3082
+ width="1em"
3083
+ height="1em"
3084
+ >
3085
+ <path
3086
+ 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"
3087
+ />
3088
+ </svg>
1529
3089
  </span>
1530
3090
  </button>
1531
3091
 
@@ -1595,7 +3155,19 @@ cssPrefix: pf-v6-c-button
1595
3155
  aria-label="Remove"
1596
3156
  >
1597
3157
  <span class="pf-v6-c-button__icon">
1598
- <i class="fas fa-times" aria-hidden="true"></i>
3158
+ <svg
3159
+ class="pf-v6-svg"
3160
+ viewBox="0 0 20 20"
3161
+ fill="currentColor"
3162
+ aria-hidden="true"
3163
+ role="img"
3164
+ width="1em"
3165
+ height="1em"
3166
+ >
3167
+ <path
3168
+ 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"
3169
+ />
3170
+ </svg>
1599
3171
  </span>
1600
3172
  </span>
1601
3173
  <br />
@@ -1610,7 +3182,19 @@ cssPrefix: pf-v6-c-button
1610
3182
  aria-label="Remove"
1611
3183
  >
1612
3184
  <span class="pf-v6-c-button__icon">
1613
- <i class="fas fa-times" aria-hidden="true"></i>
3185
+ <svg
3186
+ class="pf-v6-svg"
3187
+ viewBox="0 0 20 20"
3188
+ fill="currentColor"
3189
+ aria-hidden="true"
3190
+ role="img"
3191
+ width="1em"
3192
+ height="1em"
3193
+ >
3194
+ <path
3195
+ 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"
3196
+ />
3197
+ </svg>
1614
3198
  </span>
1615
3199
  </span>
1616
3200
  <br />
@@ -1675,160 +3259,467 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1675
3259
  <button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button">
1676
3260
  <span class="pf-v6-c-button__text">Call to action</span>
1677
3261
  <span class="pf-v6-c-button__icon pf-m-end">
1678
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3262
+ <svg
3263
+ class="pf-v6-svg"
3264
+ viewBox="0 0 32 32"
3265
+ fill="currentColor"
3266
+ aria-hidden="true"
3267
+ role="img"
3268
+ width="1em"
3269
+ height="1em"
3270
+ >
3271
+ <path
3272
+ 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"
3273
+ />
3274
+ </svg>
3275
+ </span>
3276
+ </button>
3277
+
3278
+ <button
3279
+ class="pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link"
3280
+ type="button"
3281
+ >
3282
+ <span class="pf-v6-c-button__text">Call to action</span>
3283
+ <span class="pf-v6-c-button__icon pf-m-end">
3284
+ <svg
3285
+ class="pf-v6-svg"
3286
+ viewBox="0 0 32 32"
3287
+ fill="currentColor"
3288
+ aria-hidden="true"
3289
+ role="img"
3290
+ width="1em"
3291
+ height="1em"
3292
+ >
3293
+ <path
3294
+ 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"
3295
+ />
3296
+ </svg>
3297
+ </span>
3298
+ </button>
3299
+ <br />
3300
+ <br />
3301
+ <strong>disabled</strong>
3302
+ <br />
3303
+ <button
3304
+ class="pf-v6-c-button pf-m-display-lg pf-m-primary"
3305
+ type="button"
3306
+ disabled
3307
+ >
3308
+ <span class="pf-v6-c-button__text">Call to action</span>
3309
+ </button>
3310
+
3311
+ <button
3312
+ class="pf-v6-c-button pf-m-display-lg pf-m-secondary"
3313
+ type="button"
3314
+ disabled
3315
+ >
3316
+ <span class="pf-v6-c-button__text">Call to action</span>
3317
+ </button>
3318
+
3319
+ <button
3320
+ class="pf-v6-c-button pf-m-display-lg pf-m-tertiary"
3321
+ type="button"
3322
+ disabled
3323
+ >
3324
+ <span class="pf-v6-c-button__text">Call to action</span>
3325
+ </button>
3326
+
3327
+ <button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button" disabled>
3328
+ <span class="pf-v6-c-button__text">Call to action</span>
3329
+ <span class="pf-v6-c-button__icon pf-m-end">
3330
+ <svg
3331
+ class="pf-v6-svg"
3332
+ viewBox="0 0 32 32"
3333
+ fill="currentColor"
3334
+ aria-hidden="true"
3335
+ role="img"
3336
+ width="1em"
3337
+ height="1em"
3338
+ >
3339
+ <path
3340
+ 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"
3341
+ />
3342
+ </svg>
3343
+ </span>
3344
+ </button>
3345
+
3346
+ <button
3347
+ class="pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link"
3348
+ type="button"
3349
+ disabled
3350
+ >
3351
+ <span class="pf-v6-c-button__text">Call to action</span>
3352
+ <span class="pf-v6-c-button__icon pf-m-end">
3353
+ <svg
3354
+ class="pf-v6-svg"
3355
+ viewBox="0 0 32 32"
3356
+ fill="currentColor"
3357
+ aria-hidden="true"
3358
+ role="img"
3359
+ width="1em"
3360
+ height="1em"
3361
+ >
3362
+ <path
3363
+ 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"
3364
+ />
3365
+ </svg>
3366
+ </span>
3367
+ </button>
3368
+
3369
+ ```
3370
+
3371
+ ### Progress
3372
+
3373
+ ```html
3374
+ <button class="pf-v6-c-button pf-m-progress pf-m-primary" type="button">
3375
+ <span class="pf-v6-c-button__text">Primary loader</span>
3376
+ </button>
3377
+
3378
+ <button
3379
+ class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-primary"
3380
+ type="button"
3381
+ >
3382
+ <span class="pf-v6-c-button__progress">
3383
+ <svg
3384
+ class="pf-v6-c-spinner pf-m-md"
3385
+ role="progressbar"
3386
+ viewBox="0 0 100 100"
3387
+ aria-label="Loading..."
3388
+ >
3389
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
3390
+ </svg>
3391
+ </span>
3392
+
3393
+ <span class="pf-v6-c-button__text">Primary loading</span>
3394
+ </button>
3395
+ <br />
3396
+ <button class="pf-v6-c-button pf-m-progress pf-m-secondary" type="button">
3397
+ <span class="pf-v6-c-button__text">Secondary loader</span>
3398
+ </button>
3399
+
3400
+ <button
3401
+ class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-secondary"
3402
+ type="button"
3403
+ >
3404
+ <span class="pf-v6-c-button__progress">
3405
+ <svg
3406
+ class="pf-v6-c-spinner pf-m-md"
3407
+ role="progressbar"
3408
+ viewBox="0 0 100 100"
3409
+ aria-label="Loading..."
3410
+ >
3411
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
3412
+ </svg>
3413
+ </span>
3414
+
3415
+ <span class="pf-v6-c-button__text">Secondary loading</span>
3416
+ </button>
3417
+ <br />
3418
+ <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Upload">
3419
+ <span class="pf-v6-c-button__icon">
3420
+ <svg
3421
+ class="pf-v6-svg"
3422
+ viewBox="0 0 32 32"
3423
+ fill="currentColor"
3424
+ aria-hidden="true"
3425
+ role="img"
3426
+ width="1em"
3427
+ height="1em"
3428
+ >
3429
+ <path
3430
+ 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"
3431
+ />
3432
+ </svg>
3433
+ </span>
3434
+ </button>
3435
+
3436
+ <button class="pf-v6-c-button pf-m-in-progress pf-m-plain" type="button">
3437
+ <span class="pf-v6-c-button__progress">
3438
+ <svg
3439
+ class="pf-v6-c-spinner pf-m-md"
3440
+ role="progressbar"
3441
+ viewBox="0 0 100 100"
3442
+ aria-label="Uploading..."
3443
+ >
3444
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
3445
+ </svg>
3446
+ </span>
3447
+
3448
+ <span class="pf-v6-c-button__icon">
3449
+ <svg
3450
+ class="pf-v6-svg"
3451
+ viewBox="0 0 32 32"
3452
+ fill="currentColor"
3453
+ aria-hidden="true"
3454
+ role="img"
3455
+ width="1em"
3456
+ height="1em"
3457
+ >
3458
+ <path
3459
+ 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"
3460
+ />
3461
+ </svg>
3462
+ </span>
3463
+ </button>
3464
+ <br />
3465
+ <button
3466
+ class="pf-v6-c-button pf-m-progress pf-m-inline pf-m-link"
3467
+ type="button"
3468
+ >
3469
+ <span class="pf-v6-c-button__text">Inline loader</span>
3470
+ </button>
3471
+
3472
+ <button
3473
+ class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-inline pf-m-link"
3474
+ type="button"
3475
+ >
3476
+ <span class="pf-v6-c-button__progress">
3477
+ <svg
3478
+ class="pf-v6-c-spinner pf-m-inline"
3479
+ role="progressbar"
3480
+ viewBox="0 0 100 100"
3481
+ aria-label="Loading..."
3482
+ >
3483
+ <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
3484
+ </svg>
3485
+ </span>
3486
+
3487
+ <span class="pf-v6-c-button__text">Inline loading</span>
3488
+ </button>
3489
+
3490
+ ```
3491
+
3492
+ ### Circle buttons
3493
+
3494
+ ```html isBeta
3495
+ <button
3496
+ class="pf-v6-c-button pf-m-circle pf-m-primary"
3497
+ type="button"
3498
+ aria-label="Add primary circle variant"
3499
+ >
3500
+ <span class="pf-v6-c-button__icon pf-m-start">
3501
+ <svg
3502
+ class="pf-v6-svg"
3503
+ viewBox="0 0 32 32"
3504
+ fill="currentColor"
3505
+ aria-hidden="true"
3506
+ role="img"
3507
+ width="1em"
3508
+ height="1em"
3509
+ >
3510
+ <path
3511
+ 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"
3512
+ />
3513
+ </svg>
3514
+ </span>
3515
+ </button>
3516
+
3517
+ <button
3518
+ class="pf-v6-c-button pf-m-circle pf-m-secondary"
3519
+ type="button"
3520
+ aria-label="Add secondary circle variant"
3521
+ >
3522
+ <span class="pf-v6-c-button__icon pf-m-start">
3523
+ <svg
3524
+ class="pf-v6-svg"
3525
+ viewBox="0 0 32 32"
3526
+ fill="currentColor"
3527
+ aria-hidden="true"
3528
+ role="img"
3529
+ width="1em"
3530
+ height="1em"
3531
+ >
3532
+ <path
3533
+ 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"
3534
+ />
3535
+ </svg>
1679
3536
  </span>
1680
3537
  </button>
1681
3538
 
1682
3539
  <button
1683
- class="pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link"
3540
+ class="pf-v6-c-button pf-m-circle pf-m-tertiary"
1684
3541
  type="button"
3542
+ aria-label="Add tertiary circle variant"
1685
3543
  >
1686
- <span class="pf-v6-c-button__text">Call to action</span>
1687
- <span class="pf-v6-c-button__icon pf-m-end">
1688
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3544
+ <span class="pf-v6-c-button__icon pf-m-start">
3545
+ <svg
3546
+ class="pf-v6-svg"
3547
+ viewBox="0 0 32 32"
3548
+ fill="currentColor"
3549
+ aria-hidden="true"
3550
+ role="img"
3551
+ width="1em"
3552
+ height="1em"
3553
+ >
3554
+ <path
3555
+ 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"
3556
+ />
3557
+ </svg>
1689
3558
  </span>
1690
3559
  </button>
1691
- <br />
1692
- <br />
1693
- <strong>disabled</strong>
1694
- <br />
3560
+
1695
3561
  <button
1696
- class="pf-v6-c-button pf-m-display-lg pf-m-primary"
3562
+ class="pf-v6-c-button pf-m-circle pf-m-danger"
1697
3563
  type="button"
1698
- disabled
3564
+ aria-label="Add danger circle variant"
1699
3565
  >
1700
- <span class="pf-v6-c-button__text">Call to action</span>
3566
+ <span class="pf-v6-c-button__icon pf-m-start">
3567
+ <svg
3568
+ class="pf-v6-svg"
3569
+ viewBox="0 0 32 32"
3570
+ fill="currentColor"
3571
+ aria-hidden="true"
3572
+ role="img"
3573
+ width="1em"
3574
+ height="1em"
3575
+ >
3576
+ <path
3577
+ 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"
3578
+ />
3579
+ </svg>
3580
+ </span>
1701
3581
  </button>
1702
3582
 
1703
3583
  <button
1704
- class="pf-v6-c-button pf-m-display-lg pf-m-secondary"
3584
+ class="pf-v6-c-button pf-m-circle pf-m-warning"
1705
3585
  type="button"
1706
- disabled
3586
+ aria-label="Add warning circle variant"
1707
3587
  >
1708
- <span class="pf-v6-c-button__text">Call to action</span>
3588
+ <span class="pf-v6-c-button__icon pf-m-start">
3589
+ <svg
3590
+ class="pf-v6-svg"
3591
+ viewBox="0 0 32 32"
3592
+ fill="currentColor"
3593
+ aria-hidden="true"
3594
+ role="img"
3595
+ width="1em"
3596
+ height="1em"
3597
+ >
3598
+ <path
3599
+ 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"
3600
+ />
3601
+ </svg>
3602
+ </span>
1709
3603
  </button>
1710
3604
 
1711
3605
  <button
1712
- class="pf-v6-c-button pf-m-display-lg pf-m-tertiary"
3606
+ class="pf-v6-c-button pf-m-circle pf-m-link"
1713
3607
  type="button"
1714
- disabled
3608
+ aria-label="Add link circle variant"
1715
3609
  >
1716
- <span class="pf-v6-c-button__text">Call to action</span>
1717
- </button>
1718
-
1719
- <button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button" disabled>
1720
- <span class="pf-v6-c-button__text">Call to action</span>
1721
- <span class="pf-v6-c-button__icon pf-m-end">
1722
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3610
+ <span class="pf-v6-c-button__icon pf-m-start">
3611
+ <svg
3612
+ class="pf-v6-svg"
3613
+ viewBox="0 0 32 32"
3614
+ fill="currentColor"
3615
+ aria-hidden="true"
3616
+ role="img"
3617
+ width="1em"
3618
+ height="1em"
3619
+ >
3620
+ <path
3621
+ 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"
3622
+ />
3623
+ </svg>
1723
3624
  </span>
1724
3625
  </button>
1725
3626
 
1726
3627
  <button
1727
- class="pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link"
3628
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1728
3629
  type="button"
1729
- disabled
3630
+ aria-label="Remove plain circle variant"
1730
3631
  >
1731
- <span class="pf-v6-c-button__text">Call to action</span>
1732
- <span class="pf-v6-c-button__icon pf-m-end">
1733
- <i class="fas fa-arrow-right" aria-hidden="true"></i>
3632
+ <span class="pf-v6-c-button__icon pf-m-start">
3633
+ <svg
3634
+ class="pf-v6-svg"
3635
+ viewBox="0 0 20 20"
3636
+ fill="currentColor"
3637
+ aria-hidden="true"
3638
+ role="img"
3639
+ width="1em"
3640
+ height="1em"
3641
+ >
3642
+ <path
3643
+ 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"
3644
+ />
3645
+ </svg>
1734
3646
  </span>
1735
3647
  </button>
1736
3648
 
1737
- ```
1738
-
1739
- ### Progress
1740
-
1741
- ```html
1742
- <button class="pf-v6-c-button pf-m-progress pf-m-primary" type="button">
1743
- <span class="pf-v6-c-button__text">Primary loader</span>
1744
- </button>
1745
-
1746
3649
  <button
1747
- class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-primary"
3650
+ class="pf-v6-c-button pf-m-circle pf-m-control"
1748
3651
  type="button"
3652
+ aria-label="Copy control circle variant"
1749
3653
  >
1750
- <span class="pf-v6-c-button__progress">
3654
+ <span class="pf-v6-c-button__icon pf-m-start">
1751
3655
  <svg
1752
- class="pf-v6-c-spinner pf-m-md"
1753
- role="progressbar"
1754
- viewBox="0 0 100 100"
1755
- aria-label="Loading..."
3656
+ class="pf-v6-svg"
3657
+ viewBox="0 0 32 32"
3658
+ fill="currentColor"
3659
+ aria-hidden="true"
3660
+ role="img"
3661
+ width="1em"
3662
+ height="1em"
1756
3663
  >
1757
- <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
3664
+ <path
3665
+ 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"
3666
+ />
1758
3667
  </svg>
1759
3668
  </span>
1760
-
1761
- <span class="pf-v6-c-button__text">Primary loading</span>
1762
- </button>
1763
- <br />
1764
- <button class="pf-v6-c-button pf-m-progress pf-m-secondary" type="button">
1765
- <span class="pf-v6-c-button__text">Secondary loader</span>
1766
3669
  </button>
1767
3670
 
1768
3671
  <button
1769
- class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-secondary"
3672
+ class="pf-v6-c-button pf-m-circle pf-m-plain"
1770
3673
  type="button"
3674
+ aria-label="Upload circle variant"
1771
3675
  >
1772
- <span class="pf-v6-c-button__progress">
3676
+ <span class="pf-v6-c-button__icon">
1773
3677
  <svg
1774
- class="pf-v6-c-spinner pf-m-md"
1775
- role="progressbar"
1776
- viewBox="0 0 100 100"
1777
- aria-label="Loading..."
3678
+ class="pf-v6-svg"
3679
+ viewBox="0 0 32 32"
3680
+ fill="currentColor"
3681
+ aria-hidden="true"
3682
+ role="img"
3683
+ width="1em"
3684
+ height="1em"
1778
3685
  >
1779
- <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
3686
+ <path
3687
+ 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"
3688
+ />
1780
3689
  </svg>
1781
3690
  </span>
1782
-
1783
- <span class="pf-v6-c-button__text">Secondary loading</span>
1784
- </button>
1785
- <br />
1786
- <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Upload">
1787
- <span class="pf-v6-c-button__icon">
1788
- <i class="fas fa-upload" aria-hidden="true"></i>
1789
- </span>
1790
3691
  </button>
1791
3692
 
1792
- <button class="pf-v6-c-button pf-m-in-progress pf-m-plain" type="button">
3693
+ <button
3694
+ class="pf-v6-c-button pf-m-circle pf-m-in-progress pf-m-plain"
3695
+ type="button"
3696
+ >
1793
3697
  <span class="pf-v6-c-button__progress">
1794
3698
  <svg
1795
3699
  class="pf-v6-c-spinner pf-m-md"
1796
3700
  role="progressbar"
1797
3701
  viewBox="0 0 100 100"
1798
- aria-label="Uploading..."
3702
+ aria-label="Uploading circle variant..."
1799
3703
  >
1800
3704
  <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
1801
3705
  </svg>
1802
3706
  </span>
1803
3707
 
1804
3708
  <span class="pf-v6-c-button__icon">
1805
- <i class="fas fa-upload" aria-hidden="true"></i>
1806
- </span>
1807
- </button>
1808
- <br />
1809
- <button
1810
- class="pf-v6-c-button pf-m-progress pf-m-inline pf-m-link"
1811
- type="button"
1812
- >
1813
- <span class="pf-v6-c-button__text">Inline loader</span>
1814
- </button>
1815
-
1816
- <button
1817
- class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-inline pf-m-link"
1818
- type="button"
1819
- >
1820
- <span class="pf-v6-c-button__progress">
1821
3709
  <svg
1822
- class="pf-v6-c-spinner pf-m-inline"
1823
- role="progressbar"
1824
- viewBox="0 0 100 100"
1825
- aria-label="Loading..."
3710
+ class="pf-v6-svg"
3711
+ viewBox="0 0 32 32"
3712
+ fill="currentColor"
3713
+ aria-hidden="true"
3714
+ role="img"
3715
+ width="1em"
3716
+ height="1em"
1826
3717
  >
1827
- <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
3718
+ <path
3719
+ 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"
3720
+ />
1828
3721
  </svg>
1829
3722
  </span>
1830
-
1831
- <span class="pf-v6-c-button__text">Inline loading</span>
1832
3723
  </button>
1833
3724
 
1834
3725
  ```
@@ -1908,7 +3799,7 @@ For when a plain/icon button is placed inline with text
1908
3799
  <span class="pf-v6-c-button__icon">
1909
3800
  <svg
1910
3801
  class="pf-v6-svg"
1911
- viewBox="0 0 1024 1024"
3802
+ viewBox="0 0 32 32"
1912
3803
  fill="currentColor"
1913
3804
  aria-hidden="true"
1914
3805
  role="img"
@@ -1916,7 +3807,7 @@ For when a plain/icon button is placed inline with text
1916
3807
  height="1em"
1917
3808
  >
1918
3809
  <path
1919
- 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"
3810
+ 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"
1920
3811
  />
1921
3812
  </svg>
1922
3813
  </span>
@@ -1932,7 +3823,19 @@ For when a plain/icon button is placed inline with text
1932
3823
  <br />
1933
3824
  <button class="pf-v6-c-button pf-m-read pf-m-stateful" type="button">
1934
3825
  <span class="pf-v6-c-button__icon pf-m-start">
1935
- <i class="fas fa-bell" aria-hidden="true"></i>
3826
+ <svg
3827
+ class="pf-v6-svg"
3828
+ viewBox="0 0 32 32"
3829
+ fill="currentColor"
3830
+ aria-hidden="true"
3831
+ role="img"
3832
+ width="1em"
3833
+ height="1em"
3834
+ >
3835
+ <path
3836
+ 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"
3837
+ />
3838
+ </svg>
1936
3839
  </span>
1937
3840
  <span class="pf-v6-c-button__text">
1938
3841
  10
@@ -1945,7 +3848,19 @@ For when a plain/icon button is placed inline with text
1945
3848
  type="button"
1946
3849
  >
1947
3850
  <span class="pf-v6-c-button__icon pf-m-start">
1948
- <i class="fas fa-bell" aria-hidden="true"></i>
3851
+ <svg
3852
+ class="pf-v6-svg"
3853
+ viewBox="0 0 32 32"
3854
+ fill="currentColor"
3855
+ aria-hidden="true"
3856
+ role="img"
3857
+ width="1em"
3858
+ height="1em"
3859
+ >
3860
+ <path
3861
+ 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"
3862
+ />
3863
+ </svg>
1949
3864
  </span>
1950
3865
  <span class="pf-v6-c-button__text">
1951
3866
  10
@@ -1960,7 +3875,19 @@ For when a plain/icon button is placed inline with text
1960
3875
  <br />
1961
3876
  <button class="pf-v6-c-button pf-m-unread pf-m-stateful" type="button">
1962
3877
  <span class="pf-v6-c-button__icon pf-m-start">
1963
- <i class="fas fa-bell" aria-hidden="true"></i>
3878
+ <svg
3879
+ class="pf-v6-svg"
3880
+ viewBox="0 0 32 32"
3881
+ fill="currentColor"
3882
+ aria-hidden="true"
3883
+ role="img"
3884
+ width="1em"
3885
+ height="1em"
3886
+ >
3887
+ <path
3888
+ 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"
3889
+ />
3890
+ </svg>
1964
3891
  </span>
1965
3892
  <span class="pf-v6-c-button__text">
1966
3893
  10
@@ -1973,7 +3900,19 @@ For when a plain/icon button is placed inline with text
1973
3900
  type="button"
1974
3901
  >
1975
3902
  <span class="pf-v6-c-button__icon pf-m-start">
1976
- <i class="fas fa-bell" aria-hidden="true"></i>
3903
+ <svg
3904
+ class="pf-v6-svg"
3905
+ viewBox="0 0 32 32"
3906
+ fill="currentColor"
3907
+ aria-hidden="true"
3908
+ role="img"
3909
+ width="1em"
3910
+ height="1em"
3911
+ >
3912
+ <path
3913
+ 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"
3914
+ />
3915
+ </svg>
1977
3916
  </span>
1978
3917
  <span class="pf-v6-c-button__text">
1979
3918
  10
@@ -1988,7 +3927,19 @@ For when a plain/icon button is placed inline with text
1988
3927
  <br />
1989
3928
  <button class="pf-v6-c-button pf-m-attention pf-m-stateful" type="button">
1990
3929
  <span class="pf-v6-c-button__icon pf-m-start">
1991
- <i class="fas fa-bell" aria-hidden="true"></i>
3930
+ <svg
3931
+ class="pf-v6-svg"
3932
+ viewBox="0 0 32 32"
3933
+ fill="currentColor"
3934
+ aria-hidden="true"
3935
+ role="img"
3936
+ width="1em"
3937
+ height="1em"
3938
+ >
3939
+ <path
3940
+ 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"
3941
+ />
3942
+ </svg>
1992
3943
  </span>
1993
3944
  <span class="pf-v6-c-button__text">
1994
3945
  10
@@ -2001,7 +3952,19 @@ For when a plain/icon button is placed inline with text
2001
3952
  type="button"
2002
3953
  >
2003
3954
  <span class="pf-v6-c-button__icon pf-m-start">
2004
- <i class="fas fa-bell" aria-hidden="true"></i>
3955
+ <svg
3956
+ class="pf-v6-svg"
3957
+ viewBox="0 0 32 32"
3958
+ fill="currentColor"
3959
+ aria-hidden="true"
3960
+ role="img"
3961
+ width="1em"
3962
+ height="1em"
3963
+ >
3964
+ <path
3965
+ 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"
3966
+ />
3967
+ </svg>
2005
3968
  </span>
2006
3969
  <span class="pf-v6-c-button__text">
2007
3970
  10
@@ -2104,7 +4067,19 @@ A favorite button should use a plain button with the star icon. Applying `.pf-m-
2104
4067
  aria-label="Settings"
2105
4068
  >
2106
4069
  <span class="pf-v6-c-button__icon">
2107
- <i class="fas fa-cog" aria-hidden="true"></i>
4070
+ <svg
4071
+ class="pf-v6-svg"
4072
+ viewBox="0 0 32 32"
4073
+ fill="currentColor"
4074
+ aria-hidden="true"
4075
+ role="img"
4076
+ width="1em"
4077
+ height="1em"
4078
+ >
4079
+ <path
4080
+ d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
4081
+ />
4082
+ </svg>
2108
4083
  </span>
2109
4084
  </button>
2110
4085
 
@@ -2236,3 +4211,4 @@ Semantic buttons and links are important for usability as well as accessibility.
2236
4211
  | `.pf-m-hamburger` | `.pf-v6-c-button.pf-m-plain` | Modifies a plain button to be a hamburger button. |
2237
4212
  | `.pf-m-expand` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will expand a menu. |
2238
4213
  | `.pf-m-collapse` | `.pf-v6-c-button.pf-m-hamburger` | Modifies a hamburger button to indicate that it will collapse a menu. |
4214
+ | `.pf-m-circle` | `.pf-v6-c-button` | Modifies a button to have a circular shape, instead of only rounded corners or a pill shape. Intended for buttons that contain only an icon. |