@patternfly/patternfly 6.0.0-alpha.99 → 6.0.0-prerelease.2

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 (501) hide show
  1. package/README.md +1 -2
  2. package/assets/fontawesome/_animated.scss +1 -0
  3. package/assets/fontawesome/_bordered-pulled.scss +1 -0
  4. package/assets/fontawesome/_core.scss +2 -0
  5. package/assets/fontawesome/_fixed-width.scss +2 -0
  6. package/assets/fontawesome/_icons.scss +1 -0
  7. package/assets/fontawesome/_index.scss +12 -0
  8. package/assets/fontawesome/_larger.scss +4 -2
  9. package/assets/fontawesome/_list.scss +4 -2
  10. package/assets/fontawesome/_rotated-flipped.scss +2 -0
  11. package/assets/fontawesome/_screen-reader.scss +1 -0
  12. package/assets/fontawesome/_stacked.scss +3 -1
  13. package/assets/fontawesome/_variables.scss +3 -2
  14. package/assets/fontawesome/fontawesome.scss +12 -12
  15. package/assets/icons/iconUnicodes.json +6 -0
  16. package/assets/images/img_avatar-dark.svg +22 -16
  17. package/assets/images/img_avatar-light.svg +25 -18
  18. package/assets/images/pf-background.svg +21 -21
  19. package/assets/images/pf_logo.svg +11 -11
  20. package/assets/images/pf_logo_white.svg +16 -17
  21. package/assets/pficon/pf-v6-pficon.woff2 +0 -0
  22. package/assets/pficon/pficon.scss +310 -271
  23. package/base/_index.scss +10 -0
  24. package/base/{_globals.scss → normalize.scss} +15 -48
  25. package/base/patternfly-common.css +14 -0
  26. package/base/patternfly-common.scss +68 -2
  27. package/base/patternfly-fa-icons.css +1 -1
  28. package/base/patternfly-fa-icons.scss +35 -2
  29. package/base/patternfly-fonts.css +10 -80
  30. package/base/patternfly-fonts.scss +49 -2
  31. package/base/patternfly-pf-icons.css +158 -134
  32. package/base/patternfly-pf-icons.scss +1 -2
  33. package/base/patternfly-svg-icons.css +5 -0
  34. package/base/{_svg-icons.scss → patternfly-svg-icons.scss} +2 -0
  35. package/base/patternfly-variables.css +1082 -1206
  36. package/base/patternfly-variables.scss +20 -2
  37. package/base/reset.scss +33 -0
  38. package/base/tokens/_index.scss +6 -0
  39. package/base/tokens/tokens-charts-dark.scss +173 -0
  40. package/base/tokens/{_tokens-charts.scss → tokens-charts.scss} +162 -148
  41. package/base/tokens/{_tokens-dark.scss → tokens-dark.scss} +307 -294
  42. package/base/tokens/{_tokens-default.scss → tokens-default.scss} +574 -447
  43. package/base/tokens/{_tokens-font.scss → tokens-local.scss} +13 -34
  44. package/base/tokens/{_tokens-palette.scss → tokens-palette.scss} +69 -70
  45. package/components/AboutModalBox/about-modal-box.css +86 -81
  46. package/components/AboutModalBox/about-modal-box.scss +80 -82
  47. package/components/Accordion/accordion.css +44 -43
  48. package/components/Accordion/accordion.scss +52 -52
  49. package/components/ActionList/action-list.css +6 -5
  50. package/components/ActionList/action-list.scss +7 -5
  51. package/components/Alert/alert-group.css +72 -19
  52. package/components/Alert/alert-group.scss +105 -18
  53. package/components/Alert/alert.css +52 -59
  54. package/components/Alert/alert.scss +56 -65
  55. package/components/Avatar/avatar.css +42 -41
  56. package/components/Avatar/avatar.scss +8 -7
  57. package/components/BackToTop/back-to-top.css +19 -17
  58. package/components/BackToTop/back-to-top.scss +17 -17
  59. package/components/Backdrop/backdrop.css +1 -1
  60. package/components/Backdrop/backdrop.scss +3 -4
  61. package/components/BackgroundImage/background-image.scss +3 -4
  62. package/components/Badge/badge.css +29 -7
  63. package/components/Badge/badge.scss +33 -9
  64. package/components/Banner/banner.css +30 -37
  65. package/components/Banner/banner.scss +30 -43
  66. package/components/Brand/brand.css +14 -10
  67. package/components/Brand/brand.scss +8 -5
  68. package/components/Breadcrumb/breadcrumb.css +23 -24
  69. package/components/Breadcrumb/breadcrumb.scss +25 -28
  70. package/components/Button/button.css +150 -128
  71. package/components/Button/button.scss +155 -130
  72. package/components/CalendarMonth/calendar-month.css +46 -46
  73. package/components/CalendarMonth/calendar-month.scss +49 -50
  74. package/components/Card/card.css +110 -93
  75. package/components/Card/card.scss +118 -92
  76. package/components/Check/check.css +5 -5
  77. package/components/Check/check.scss +7 -8
  78. package/components/ClipboardCopy/clipboard-copy.css +33 -41
  79. package/components/ClipboardCopy/clipboard-copy.scss +35 -44
  80. package/components/CodeBlock/code-block.css +21 -20
  81. package/components/CodeBlock/code-block.scss +21 -21
  82. package/components/CodeEditor/code-editor.css +35 -34
  83. package/components/CodeEditor/code-editor.scss +35 -35
  84. package/components/Content/content.css +167 -153
  85. package/components/Content/content.scss +204 -145
  86. package/components/DataList/data-list-grid.css +117 -117
  87. package/components/DataList/data-list-grid.scss +22 -20
  88. package/components/DataList/data-list.css +308 -312
  89. package/components/DataList/data-list.scss +145 -152
  90. package/components/DatePicker/date-picker.css +17 -17
  91. package/components/DatePicker/date-picker.scss +17 -18
  92. package/components/DescriptionList/description-list-order.css +5 -5
  93. package/components/DescriptionList/description-list-order.scss +3 -1
  94. package/components/DescriptionList/description-list.css +46 -44
  95. package/components/DescriptionList/description-list.scss +26 -31
  96. package/components/Divider/divider.css +104 -107
  97. package/components/Divider/divider.scss +19 -19
  98. package/components/DragDrop/drag-drop.css +4 -2
  99. package/components/DragDrop/drag-drop.scss +3 -3
  100. package/components/Drawer/drawer.css +115 -114
  101. package/components/Drawer/drawer.scss +136 -134
  102. package/components/DualListSelector/dual-list-selector.css +64 -61
  103. package/components/DualListSelector/dual-list-selector.scss +54 -51
  104. package/components/EmptyState/empty-state.css +38 -37
  105. package/components/EmptyState/empty-state.scss +39 -39
  106. package/components/ExpandableSection/expandable-section.css +27 -86
  107. package/components/ExpandableSection/expandable-section.scss +32 -101
  108. package/components/FileUpload/file-upload.css +2 -2
  109. package/components/FileUpload/file-upload.scss +2 -3
  110. package/components/Form/form.css +173 -115
  111. package/components/Form/form.scss +117 -103
  112. package/components/FormControl/form-control.css +57 -57
  113. package/components/FormControl/form-control.scss +69 -67
  114. package/components/HelperText/helper-text.css +5 -4
  115. package/components/HelperText/helper-text.scss +8 -6
  116. package/components/Hint/hint.css +25 -25
  117. package/components/Hint/hint.scss +25 -27
  118. package/components/Icon/icon.css +10 -10
  119. package/components/Icon/icon.scss +11 -12
  120. package/components/InlineEdit/inline-edit.css +12 -12
  121. package/components/InlineEdit/inline-edit.scss +12 -13
  122. package/components/InputGroup/input-group.css +16 -16
  123. package/components/InputGroup/input-group.scss +18 -19
  124. package/components/JumpLinks/jump-links.css +80 -96
  125. package/components/JumpLinks/jump-links.scss +80 -100
  126. package/components/Label/label-group.css +28 -28
  127. package/components/Label/label-group.scss +29 -30
  128. package/components/Label/label.css +102 -87
  129. package/components/Label/label.scss +113 -94
  130. package/components/List/list.css +44 -47
  131. package/components/List/list.scss +51 -58
  132. package/components/Login/login.css +122 -118
  133. package/components/Login/login.scss +105 -112
  134. package/components/Masthead/masthead.css +273 -175
  135. package/components/Masthead/masthead.scss +102 -68
  136. package/components/Menu/menu.css +151 -95
  137. package/components/Menu/menu.scss +59 -40
  138. package/components/MenuToggle/menu-toggle.css +129 -108
  139. package/components/MenuToggle/menu-toggle.scss +150 -128
  140. package/components/ModalBox/modal-box.css +53 -45
  141. package/components/ModalBox/modal-box.scss +52 -46
  142. package/components/MultipleFileUpload/multiple-file-upload.css +37 -37
  143. package/components/MultipleFileUpload/multiple-file-upload.scss +38 -39
  144. package/components/Nav/nav.css +33 -9
  145. package/components/Nav/nav.scss +46 -13
  146. package/components/NotificationDrawer/notification-drawer.css +50 -51
  147. package/components/NotificationDrawer/notification-drawer.scss +58 -57
  148. package/components/NumberInput/number-input.css +7 -11
  149. package/components/NumberInput/number-input.scss +5 -7
  150. package/components/OverflowMenu/overflow-menu.css +2 -1
  151. package/components/OverflowMenu/overflow-menu.scss +3 -1
  152. package/components/Page/page.css +175 -519
  153. package/components/Page/page.scss +155 -386
  154. package/components/Pagination/pagination.css +82 -79
  155. package/components/Pagination/pagination.scss +43 -40
  156. package/components/Panel/panel.css +33 -30
  157. package/components/Panel/panel.scss +35 -33
  158. package/components/Popover/popover.css +54 -52
  159. package/components/Popover/popover.scss +55 -54
  160. package/components/Progress/progress.css +8 -4
  161. package/components/Progress/progress.scss +14 -11
  162. package/components/ProgressStepper/progress-stepper.css +246 -245
  163. package/components/ProgressStepper/progress-stepper.scss +118 -118
  164. package/components/Radio/radio.css +7 -7
  165. package/components/Radio/radio.scss +9 -10
  166. package/components/Sidebar/sidebar.css +139 -139
  167. package/components/Sidebar/sidebar.scss +61 -61
  168. package/components/SimpleList/simple-list.css +21 -20
  169. package/components/SimpleList/simple-list.scss +22 -23
  170. package/components/Skeleton/skeleton.css +4 -4
  171. package/components/Skeleton/skeleton.scss +7 -8
  172. package/components/SkipToContent/skip-to-content.css +7 -6
  173. package/components/SkipToContent/skip-to-content.scss +7 -7
  174. package/components/Slider/slider.css +31 -31
  175. package/components/Slider/slider.scss +54 -55
  176. package/components/Spinner/spinner.scss +4 -5
  177. package/components/Switch/switch.css +4 -10
  178. package/components/Switch/switch.scss +8 -17
  179. package/components/TabContent/tab-content.css +25 -25
  180. package/components/TabContent/tab-content.scss +28 -28
  181. package/components/Table/table-grid.css +434 -508
  182. package/components/Table/table-grid.scss +131 -150
  183. package/components/Table/table-scrollable.css +31 -34
  184. package/components/Table/table-scrollable.scss +44 -41
  185. package/components/Table/table-tree-view.css +287 -279
  186. package/components/Table/table-tree-view.scss +84 -84
  187. package/components/Table/table.css +316 -279
  188. package/components/Table/table.scss +346 -301
  189. package/components/Tabs/tabs.css +215 -240
  190. package/components/Tabs/tabs.scss +130 -162
  191. package/components/TextInputGroup/text-input-group.css +122 -64
  192. package/components/TextInputGroup/text-input-group.scss +144 -87
  193. package/components/Tile/tile.css +15 -15
  194. package/components/Tile/tile.scss +16 -17
  195. package/components/Timestamp/timestamp.css +13 -19
  196. package/components/Timestamp/timestamp.scss +16 -22
  197. package/components/Title/title.css +14 -13
  198. package/components/Title/title.scss +15 -15
  199. package/components/ToggleGroup/toggle-group.css +37 -37
  200. package/components/ToggleGroup/toggle-group.scss +38 -41
  201. package/components/Toolbar/toolbar.css +547 -1431
  202. package/components/Toolbar/toolbar.scss +159 -123
  203. package/components/Tooltip/tooltip.css +28 -27
  204. package/components/Tooltip/tooltip.scss +31 -30
  205. package/components/TreeView/tree-view.css +184 -184
  206. package/components/TreeView/tree-view.scss +133 -133
  207. package/components/Truncate/truncate.css +2 -2
  208. package/components/Truncate/truncate.scss +7 -8
  209. package/components/Wizard/wizard.css +190 -154
  210. package/components/Wizard/wizard.scss +211 -165
  211. package/components/_index.css +22378 -0
  212. package/components/_index.scss +82 -0
  213. package/docs/components/AboutModalBox/examples/AboutModalBox.md +3 -1
  214. package/docs/components/Accordion/examples/Accordion.md +1 -1
  215. package/docs/components/ActionList/examples/ActionList.md +64 -24
  216. package/docs/components/Alert/examples/Alert.md +116 -74
  217. package/docs/components/BackToTop/examples/BackToTop.md +1 -1
  218. package/docs/components/Badge/examples/Badge.md +6 -16
  219. package/docs/components/Banner/examples/Banner.md +16 -10
  220. package/docs/components/Brand/examples/Brand.md +2 -2
  221. package/docs/components/Breadcrumb/examples/Breadcrumb.md +19 -59
  222. package/docs/components/Button/examples/Button.md +537 -368
  223. package/docs/components/CalendarMonth/examples/CalendarMonth.md +24 -8
  224. package/docs/components/Card/examples/Card.md +372 -658
  225. package/docs/components/Check/examples/Check.md +10 -15
  226. package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +92 -47
  227. package/docs/components/CodeBlock/examples/CodeBlock.md +51 -28
  228. package/docs/components/CodeEditor/examples/CodeEditor.md +41 -22
  229. package/docs/components/Content/examples/Content.md +600 -60
  230. package/docs/components/DataList/examples/DataList.md +291 -1028
  231. package/docs/components/DatePicker/examples/DatePicker.md +18 -6
  232. package/docs/components/DescriptionList/examples/DescriptionList.md +80 -55
  233. package/docs/components/Drawer/examples/Drawer.md +60 -21
  234. package/docs/components/DualListSelector/examples/DualListSelector.md +364 -996
  235. package/docs/components/EmptyState/examples/EmptyState.md +123 -53
  236. package/docs/components/ExpandableSection/examples/ExpandableSection.md +96 -91
  237. package/docs/components/FileUpload/examples/FileUpload.md +42 -14
  238. package/docs/components/Form/examples/Form.md +100 -26
  239. package/docs/components/Hint/examples/Hint.md +54 -164
  240. package/docs/components/InlineEdit/examples/InlineEdit.md +132 -45
  241. package/docs/components/InputGroup/examples/InputGroup.md +38 -62
  242. package/docs/components/JumpLinks/examples/JumpLinks.md +189 -72
  243. package/docs/components/Label/examples/Label.md +2577 -406
  244. package/docs/components/Login/examples/Login.md +372 -334
  245. package/docs/components/Masthead/examples/masthead.md +515 -484
  246. package/docs/components/Menu/examples/Menu.md +77 -138
  247. package/docs/components/MenuToggle/examples/MenuToggle.md +289 -39
  248. package/docs/components/ModalBox/examples/ModalBox.md +158 -100
  249. package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +137 -97
  250. package/docs/components/Nav/examples/Navigation.css +2 -7
  251. package/docs/components/Nav/examples/Navigation.md +337 -270
  252. package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +515 -2076
  253. package/docs/components/NumberInput/examples/NumberInput.md +96 -48
  254. package/docs/components/OverflowMenu/examples/overflow-menu.css +4 -28
  255. package/docs/components/OverflowMenu/examples/overflow-menu.md +104 -159
  256. package/docs/components/Page/examples/Page.css +5 -9
  257. package/docs/components/Page/examples/Page.md +254 -181
  258. package/docs/components/Pagination/examples/Pagination.md +336 -756
  259. package/docs/components/Panel/examples/Panel.md +3 -2
  260. package/docs/components/Popover/examples/Popover.md +60 -15
  261. package/docs/components/ProgressStepper/examples/ProgressStepper.md +15 -15
  262. package/docs/components/Sidebar/examples/Sidebar.css +4 -2
  263. package/docs/components/Sidebar/examples/Sidebar.md +3 -3
  264. package/docs/components/Skeleton/examples/Skeleton.css +1 -1
  265. package/docs/components/SkipToContent/examples/SkipToContent.md +3 -1
  266. package/docs/components/Slider/examples/Slider.md +53 -45
  267. package/docs/components/Spinner/examples/Spinner.md +1 -1
  268. package/docs/components/Switch/examples/Switch.md +33 -148
  269. package/docs/components/Table/examples/Table.css +11 -6
  270. package/docs/components/Table/examples/Table.md +5302 -2464
  271. package/docs/components/Tabs/examples/Tabs.md +1267 -607
  272. package/docs/components/TextInputGroup/examples/TextInputGroup.css +8 -3
  273. package/docs/components/TextInputGroup/examples/TextInputGroup.md +469 -278
  274. package/docs/components/Tile/examples/Tile.css +5 -5
  275. package/docs/components/Timestamp/examples/Timestamp.md +7 -1
  276. package/docs/components/ToggleGroup/examples/toggle-group.md +1 -3
  277. package/docs/components/Toolbar/examples/Toolbar.css +50 -39
  278. package/docs/components/Toolbar/examples/Toolbar.md +1562 -1200
  279. package/docs/components/Tooltip/examples/Tooltip.css +1 -1
  280. package/docs/components/TreeView/examples/TreeView.md +627 -49
  281. package/docs/components/Truncate/examples/Truncate.css +1 -2
  282. package/docs/components/Wizard/examples/Wizard.md +1595 -126
  283. package/docs/demos/AboutModal/examples/AboutModal.md +191 -198
  284. package/docs/demos/Alert/examples/Alert.md +924 -909
  285. package/docs/demos/BackToTop/examples/BackToTop.md +318 -327
  286. package/docs/demos/Banner/examples/Banner.md +641 -659
  287. package/docs/demos/Button/examples/Button.md +8 -8
  288. package/docs/demos/Card/examples/Card.css +6 -6
  289. package/docs/demos/Card/examples/Card.md +419 -606
  290. package/docs/demos/CardView/examples/CardView.md +822 -1435
  291. package/docs/demos/Dashboard/examples/Dashboard.md +1308 -1442
  292. package/docs/demos/DataList/examples/DataList.md +3210 -3424
  293. package/docs/demos/DescriptionList/examples/DescriptionList.md +899 -937
  294. package/docs/demos/Drawer/examples/Drawer.md +1165 -1176
  295. package/docs/demos/Form/examples/BasicForms.md +153 -88
  296. package/docs/demos/JumpLinks/examples/JumpLinks.md +1710 -1602
  297. package/docs/demos/Masthead/examples/Masthead.md +1719 -1583
  298. package/docs/demos/Modal/examples/Modal.md +1231 -1235
  299. package/docs/demos/Nav/examples/Nav.md +1216 -1230
  300. package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1910 -4577
  301. package/docs/demos/Page/examples/Page.css +11 -0
  302. package/docs/demos/Page/examples/Page.md +3753 -2540
  303. package/docs/demos/Panel/Panel.md +88 -0
  304. package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +9 -3
  305. package/docs/demos/PasswordStrength/examples/PasswordStrength.md +16 -48
  306. package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +5150 -6255
  307. package/docs/demos/Skeleton/examples/Skeleton.md +297 -304
  308. package/docs/demos/Table/examples/Table.md +14272 -15154
  309. package/docs/demos/Tabs/examples/Tabs.md +2821 -2891
  310. package/docs/demos/Toolbar/examples/Toolbar.css +10 -18
  311. package/docs/demos/Toolbar/examples/Toolbar.md +2487 -2663
  312. package/docs/demos/Wizard/examples/Wizard.md +3021 -2784
  313. package/docs/layouts/Bullseye/examples/Bullseye.css +4 -4
  314. package/docs/layouts/Flex/examples/Flex.css +4 -4
  315. package/docs/layouts/Flex/examples/Flex.md +50 -50
  316. package/docs/layouts/Gallery/examples/Gallery.css +4 -4
  317. package/docs/layouts/Gallery/examples/Gallery.md +6 -6
  318. package/docs/layouts/Grid/examples/Grid.css +3 -3
  319. package/docs/layouts/Grid/examples/Grid.md +33 -33
  320. package/docs/layouts/Level/examples/Level.css +5 -5
  321. package/docs/layouts/Split/examples/Split.css +4 -4
  322. package/docs/layouts/Stack/examples/Stack.css +5 -5
  323. package/docs/utilities/Accessibility/examples/Accessibility.md +2 -2
  324. package/docs/utilities/Alignment/examples/Alignment.css +6 -6
  325. package/docs/utilities/Alignment/examples/Alignment.md +5 -5
  326. package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +7 -67
  327. package/docs/utilities/BoxShadow/examples/box-shadow.css +11 -11
  328. package/docs/utilities/BoxShadow/examples/box-shadow.md +15 -38
  329. package/docs/utilities/Display/examples/Display.css +3 -10
  330. package/docs/utilities/Display/examples/Display.md +21 -12
  331. package/docs/utilities/Flex/examples/Flex.css +7 -7
  332. package/docs/utilities/Flex/examples/Flex.md +82 -40
  333. package/docs/utilities/Float/examples/Float.css +5 -5
  334. package/docs/utilities/Float/examples/Float.md +6 -6
  335. package/docs/utilities/Sizing/examples/Sizing.css +6 -6
  336. package/docs/utilities/Sizing/examples/Sizing.md +60 -60
  337. package/docs/utilities/Spacing/examples/Spacing.css +3 -3
  338. package/docs/utilities/Spacing/examples/Spacing.md +37 -37
  339. package/docs/utilities/Text/examples/Text.md +78 -77
  340. package/icons/pficons.mjs +6 -0
  341. package/layouts/Bullseye/bullseye.css +4 -0
  342. package/layouts/Bullseye/bullseye.scss +5 -1
  343. package/layouts/Flex/flex.css +241 -237
  344. package/layouts/Flex/flex.scss +48 -44
  345. package/layouts/Gallery/gallery.css +15 -11
  346. package/layouts/Gallery/gallery.scss +9 -5
  347. package/layouts/Grid/grid.css +20 -16
  348. package/layouts/Grid/grid.scss +12 -8
  349. package/layouts/Level/level.css +5 -1
  350. package/layouts/Level/level.scss +6 -2
  351. package/layouts/Split/split.css +5 -1
  352. package/layouts/Split/split.scss +6 -2
  353. package/layouts/Stack/stack.css +5 -1
  354. package/layouts/Stack/stack.scss +6 -2
  355. package/layouts/_index.css +3461 -0
  356. package/layouts/_index.scss +8 -0
  357. package/package.json +39 -39
  358. package/patternfly-addons.css +2071 -2648
  359. package/patternfly-addons.scss +2 -12
  360. package/patternfly-base-no-globals.css +1429 -1645
  361. package/patternfly-base-no-globals.scss +5 -3
  362. package/patternfly-base.css +1511 -1723
  363. package/patternfly-base.scss +2 -6
  364. package/patternfly-charts.css +579 -240
  365. package/patternfly-charts.scss +352 -337
  366. package/patternfly-no-globals.css +19895 -23410
  367. package/patternfly-no-globals.scss +5 -4
  368. package/patternfly.css +19999 -23510
  369. package/patternfly.min.css +1 -1
  370. package/patternfly.min.css.map +1 -1
  371. package/patternfly.scss +3 -4
  372. package/sass-utilities/_index.scss +6 -0
  373. package/sass-utilities/functions.scss +25 -25
  374. package/sass-utilities/{_init.scss → init.scss} +6 -6
  375. package/sass-utilities/mixins.scss +108 -72
  376. package/sass-utilities/{component-namespaces.scss → namespaces-components.scss} +3 -27
  377. package/sass-utilities/{layout-namespaces.scss → namespaces-layouts.scss} +3 -1
  378. package/sass-utilities/scss-variables.scss +49 -261
  379. package/utilities/Accessibility/accessibility.css +15 -15
  380. package/utilities/Accessibility/accessibility.scss +8 -6
  381. package/utilities/Alignment/alignment.css +29 -29
  382. package/utilities/Alignment/alignment.scss +6 -4
  383. package/utilities/BackgroundColor/background-color.css +67 -0
  384. package/utilities/BackgroundColor/background-color.scss +16 -0
  385. package/utilities/BoxShadow/box-shadow.css +15 -39
  386. package/utilities/BoxShadow/box-shadow.scss +19 -28
  387. package/utilities/Display/display.css +43 -5
  388. package/utilities/Display/display.scss +7 -4
  389. package/utilities/Flex/flex.css +50 -50
  390. package/utilities/Flex/flex.scss +21 -20
  391. package/utilities/Float/float.css +29 -29
  392. package/utilities/Float/float.scss +6 -6
  393. package/utilities/Sizing/sizing.css +58 -58
  394. package/utilities/Sizing/sizing.scss +23 -21
  395. package/utilities/Spacing/spacing.css +1372 -1372
  396. package/utilities/Spacing/spacing.scss +6 -6
  397. package/utilities/Text/text.css +419 -662
  398. package/utilities/Text/text.scss +81 -107
  399. package/utilities/_index.css +7815 -0
  400. package/utilities/_index.scss +10 -0
  401. package/assets/images/pf-logo-small.svg +0 -23
  402. package/assets/images/pf_logo_white.hbs +0 -35
  403. package/assets/images/pfbg-icon.svg +0 -1
  404. package/assets/pficon/pf-v5-pficon.woff2 +0 -0
  405. package/base/_base.scss +0 -2
  406. package/base/_chart-globals.scss +0 -415
  407. package/base/_common.scss +0 -50
  408. package/base/_fa-icons.scss +0 -33
  409. package/base/_fonts.scss +0 -136
  410. package/base/_icons.scss +0 -3
  411. package/base/_pficons.scss +0 -2
  412. package/base/_themes.scss +0 -43
  413. package/base/_variables.scss +0 -299
  414. package/base/patternfly-globals.css +0 -120
  415. package/base/patternfly-globals.scss +0 -2
  416. package/base/patternfly-icons.css +0 -4728
  417. package/base/patternfly-icons.scss +0 -2
  418. package/base/patternfly-themes.css +0 -82
  419. package/base/patternfly-themes.scss +0 -2
  420. package/base/themes/dark/_chart-globals.scss +0 -42
  421. package/base/themes/dark/_globals.scss +0 -5
  422. package/base/tokens/_workspace-overrides.scss +0 -7
  423. package/components/AppLauncher/app-launcher.css +0 -244
  424. package/components/AppLauncher/app-launcher.scss +0 -308
  425. package/components/AppLauncher/themes/dark/app-launcher.scss +0 -13
  426. package/components/Chip/chip-group.css +0 -93
  427. package/components/Chip/chip-group.scss +0 -98
  428. package/components/Chip/chip.css +0 -122
  429. package/components/Chip/chip.scss +0 -140
  430. package/components/Chip/themes/dark/chip.scss +0 -9
  431. package/components/ContextSelector/context-selector.css +0 -336
  432. package/components/ContextSelector/context-selector.scss +0 -384
  433. package/components/ContextSelector/themes/dark/context-selector.scss +0 -24
  434. package/components/Dropdown/dropdown.css +0 -686
  435. package/components/Dropdown/dropdown.scss +0 -820
  436. package/components/Dropdown/themes/dark/dropdown.scss +0 -32
  437. package/components/LogViewer/log-viewer.css +0 -197
  438. package/components/LogViewer/log-viewer.scss +0 -226
  439. package/components/LogViewer/themes/dark/log-viewer.scss +0 -7
  440. package/components/NotificationBadge/notification-badge.css +0 -87
  441. package/components/NotificationBadge/notification-badge.scss +0 -108
  442. package/components/OptionsMenu/options-menu.css +0 -279
  443. package/components/OptionsMenu/options-menu.scss +0 -332
  444. package/components/OptionsMenu/themes/dark/options-menu.scss +0 -21
  445. package/components/Select/select.css +0 -599
  446. package/components/Select/select.scss +0 -713
  447. package/components/Select/themes/dark/select.scss +0 -23
  448. package/components/_all.scss +0 -91
  449. package/docs/components/AppLauncher/deprecated/application-launcher.css +0 -25
  450. package/docs/components/AppLauncher/deprecated/application-launcher.md +0 -792
  451. package/docs/components/Breadcrumb/examples/Breadcrumb.css +0 -3
  452. package/docs/components/Chip/examples/Chip.md +0 -846
  453. package/docs/components/ContextSelector/deprecated/context-selector.css +0 -7
  454. package/docs/components/ContextSelector/deprecated/context-selector.md +0 -909
  455. package/docs/components/Dropdown/deprecated/Dropdown.css +0 -64
  456. package/docs/components/Dropdown/deprecated/Dropdown.md +0 -2920
  457. package/docs/components/LogViewer/examples/LogViewer.css +0 -17
  458. package/docs/components/LogViewer/examples/LogViewer.md +0 -5936
  459. package/docs/components/NotificationBadge/examples/NotificationBadge.md +0 -222
  460. package/docs/components/OptionsMenu/deprecated/options-menu.css +0 -25
  461. package/docs/components/OptionsMenu/deprecated/options-menu.md +0 -1014
  462. package/docs/components/Page/deprecated/PageHeader.css +0 -17
  463. package/docs/components/Page/deprecated/PageHeader.md +0 -261
  464. package/docs/components/Pagination/examples/Pagination.css +0 -3
  465. package/docs/components/Select/deprecated/Select.css +0 -56
  466. package/docs/components/Select/deprecated/Select.md +0 -3525
  467. package/docs/components/Tabs/examples/Tabs.css +0 -10
  468. package/docs/components/ToggleGroup/examples/toggle-group.css +0 -4
  469. package/docs/demos/ContextSelector/examples/ContextSelector.md +0 -1712
  470. package/docs/demos/Page/examples/Penta.md +0 -821
  471. package/docs/utilities/Text/examples/Text.css +0 -0
  472. package/layouts/_all.scss +0 -7
  473. package/patternfly-base-no-globals-theme-dark-unversioned.css +0 -6276
  474. package/patternfly-base-no-globals-theme-dark-unversioned.scss +0 -11
  475. package/patternfly-base-theme-dark-unversioned.css +0 -6393
  476. package/patternfly-base-theme-dark-unversioned.scss +0 -5
  477. package/patternfly-charts-theme-dark-unversioned.css +0 -70
  478. package/patternfly-charts-theme-dark-unversioned.scss +0 -8
  479. package/patternfly-charts-theme-dark.css +0 -70
  480. package/patternfly-charts-theme-dark.scss +0 -8
  481. package/patternfly-theme-dark-unversioned.css +0 -35533
  482. package/patternfly-theme-dark-unversioned.scss +0 -6
  483. package/patternfly-theme-dark.css +0 -0
  484. package/patternfly-theme-dark.scss +0 -1
  485. package/sass-utilities/_all.scss +0 -9
  486. package/sass-utilities/colors.scss +0 -82
  487. package/sass-utilities/div.import.scss +0 -3
  488. package/sass-utilities/div.scss +0 -4
  489. package/sass-utilities/placeholders.scss +0 -72
  490. package/sass-utilities/themes/dark/_all.scss +0 -4
  491. package/sass-utilities/themes/dark/colors.scss +0 -16
  492. package/sass-utilities/themes/dark/mixins.scss +0 -7
  493. package/sass-utilities/themes/dark/placeholders.scss +0 -5
  494. package/sass-utilities/themes/dark/scss-variables.scss +0 -92
  495. package/themes/dark/_patternfly-charts-theme-dark.scss +0 -98
  496. package/utilities/BackgroundColor/BackgroundColor.css +0 -414
  497. package/utilities/BackgroundColor/BackgroundColor.scss +0 -64
  498. package/utilities/BackgroundColor/themes/dark/BackgroundColor.css +0 -0
  499. package/utilities/BackgroundColor/themes/dark/BackgroundColor.scss +0 -25
  500. package/utilities/Text/themes/dark/text.css +0 -0
  501. package/utilities/Text/themes/dark/text.scss +0 -33
package/docs/components/Button/examples/Button.md CHANGED
@@ -9,45 +9,66 @@ cssPrefix: pf-v6-c-button
9
9
  ### Variations
10
10
 
11
11
  ```html
12
- <button class="pf-v6-c-button pf-m-primary" type="button">Primary</button>
12
+ <button class="pf-v6-c-button pf-m-primary" type="button">
13
+ <span class="pf-v6-c-button__text">Primary</span>
14
+ </button>
13
15
 
14
- <button class="pf-v6-c-button pf-m-secondary" type="button">Secondary</button>
16
+ <button class="pf-v6-c-button pf-m-secondary" type="button">
17
+ <span class="pf-v6-c-button__text">Secondary</span>
18
+ </button>
15
19
 
16
- <button
17
- class="pf-v6-c-button pf-m-danger pf-m-secondary"
18
- type="button"
19
- >Secondary danger</button>
20
+ <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
21
+ <span class="pf-v6-c-button__text">Secondary danger</span>
22
+ </button>
20
23
 
21
- <button class="pf-v6-c-button pf-m-tertiary" type="button">Tertiary</button>
24
+ <button class="pf-v6-c-button pf-m-tertiary" type="button">
25
+ <span class="pf-v6-c-button__text">Tertiary</span>
26
+ </button>
22
27
 
23
- <button class="pf-v6-c-button pf-m-danger" type="button">Danger</button>
28
+ <button class="pf-v6-c-button pf-m-danger" type="button">
29
+ <span class="pf-v6-c-button__text">Danger</span>
30
+ </button>
24
31
 
25
- <button class="pf-v6-c-button pf-m-warning" type="button">Warning</button>
32
+ <button class="pf-v6-c-button pf-m-warning" type="button">
33
+ <span class="pf-v6-c-button__text">Warning</span>
34
+ </button>
26
35
 
27
36
  <br />
28
37
  <br />
29
38
 
30
- <button class="pf-v6-c-button pf-m-link" type="button">Link</button>
39
+ <button class="pf-v6-c-button pf-m-link" type="button">
40
+ <span class="pf-v6-c-button__text">Link</span>
41
+ </button>
31
42
 
32
- <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">Link danger</button>
43
+ <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
44
+ <span class="pf-v6-c-button__text">Link danger</span>
45
+ </button>
33
46
 
34
- <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">Inline link</button>
47
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
48
+ <span class="pf-v6-c-button__text">Inline link</span>
49
+ </button>
35
50
 
36
51
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
37
- <i class="fas fa-times" aria-hidden="true"></i>
52
+ <span class="pf-v6-c-button__icon">
53
+ <i class="fas fa-times" aria-hidden="true"></i>
54
+ </span>
38
55
  </button>
39
56
 
40
57
  <br />
41
58
  <br />
42
59
 
43
- <button class="pf-v6-c-button pf-m-control" type="button">Control</button>
60
+ <button class="pf-v6-c-button pf-m-control" type="button">
61
+ <span class="pf-v6-c-button__text">Control</span>
62
+ </button>
44
63
 
45
64
  <button
46
65
  class="pf-v6-c-button pf-m-control"
47
66
  type="button"
48
67
  aria-label="Copy input"
49
68
  >
50
- <i class="fas fa-copy" aria-hidden="true"></i>
69
+ <span class="pf-v6-c-button__icon">
70
+ <i class="fas fa-copy" aria-hidden="true"></i>
71
+ </span>
51
72
  </button>
52
73
 
53
74
  <br />
@@ -60,42 +81,42 @@ cssPrefix: pf-v6-c-button
60
81
  <span class="pf-v6-c-button__icon pf-m-start">
61
82
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
62
83
  </span>
63
- Primary
84
+ <span class="pf-v6-c-button__text">Primary</span>
64
85
  </button>
65
86
 
66
87
  <button class="pf-v6-c-button pf-m-secondary" type="button">
67
88
  <span class="pf-v6-c-button__icon pf-m-start">
68
89
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
69
90
  </span>
70
- Secondary
91
+ <span class="pf-v6-c-button__text">Secondary</span>
71
92
  </button>
72
93
 
73
94
  <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
74
95
  <span class="pf-v6-c-button__icon pf-m-start">
75
96
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
76
97
  </span>
77
- Secondary danger
98
+ <span class="pf-v6-c-button__text">Secondary danger</span>
78
99
  </button>
79
100
 
80
101
  <button class="pf-v6-c-button pf-m-tertiary" type="button">
81
102
  <span class="pf-v6-c-button__icon pf-m-start">
82
103
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
83
104
  </span>
84
- Tertiary
105
+ <span class="pf-v6-c-button__text">Tertiary</span>
85
106
  </button>
86
107
 
87
108
  <button class="pf-v6-c-button pf-m-danger" type="button">
88
109
  <span class="pf-v6-c-button__icon pf-m-start">
89
110
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
90
111
  </span>
91
- Danger
112
+ <span class="pf-v6-c-button__text">Danger</span>
92
113
  </button>
93
114
 
94
115
  <button class="pf-v6-c-button pf-m-warning" type="button">
95
116
  <span class="pf-v6-c-button__icon pf-m-start">
96
117
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
97
118
  </span>
98
- Warning
119
+ <span class="pf-v6-c-button__text">Warning</span>
99
120
  </button>
100
121
 
101
122
  <br />
@@ -105,25 +126,27 @@ cssPrefix: pf-v6-c-button
105
126
  <span class="pf-v6-c-button__icon pf-m-start">
106
127
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
107
128
  </span>
108
- Link
129
+ <span class="pf-v6-c-button__text">Link</span>
109
130
  </button>
110
131
 
111
132
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
112
133
  <span class="pf-v6-c-button__icon pf-m-start">
113
134
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
114
135
  </span>
115
- Link danger
136
+ <span class="pf-v6-c-button__text">Link danger</span>
116
137
  </button>
117
138
 
118
139
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
119
140
  <span class="pf-v6-c-button__icon pf-m-start">
120
141
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
121
142
  </span>
122
- Inline link
143
+ <span class="pf-v6-c-button__text">Inline link</span>
123
144
  </button>
124
145
 
125
146
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
126
- <i class="fas fa-times" aria-hidden="true"></i>
147
+ <span class="pf-v6-c-button__icon">
148
+ <i class="fas fa-times" aria-hidden="true"></i>
149
+ </span>
127
150
  </button>
128
151
 
129
152
  <br />
@@ -133,7 +156,7 @@ cssPrefix: pf-v6-c-button
133
156
  <span class="pf-v6-c-button__icon pf-m-start">
134
157
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
135
158
  </span>
136
- Control
159
+ <span class="pf-v6-c-button__text">Control</span>
137
160
  </button>
138
161
 
139
162
  <button
@@ -141,7 +164,9 @@ cssPrefix: pf-v6-c-button
141
164
  type="button"
142
165
  aria-label="Copy input"
143
166
  >
144
- <i class="fas fa-copy" aria-hidden="true"></i>
167
+ <span class="pf-v6-c-button__icon">
168
+ <i class="fas fa-copy" aria-hidden="true"></i>
169
+ </span>
145
170
  </button>
146
171
 
147
172
  <br />
@@ -151,42 +176,42 @@ cssPrefix: pf-v6-c-button
151
176
  <strong>Icon end</strong>
152
177
  </div>
153
178
  <button class="pf-v6-c-button pf-m-primary" type="button">
154
- Primary
179
+ <span class="pf-v6-c-button__text">Primary</span>
155
180
  <span class="pf-v6-c-button__icon pf-m-end">
156
181
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
157
182
  </span>
158
183
  </button>
159
184
 
160
185
  <button class="pf-v6-c-button pf-m-secondary" type="button">
161
- Secondary
186
+ <span class="pf-v6-c-button__text">Secondary</span>
162
187
  <span class="pf-v6-c-button__icon pf-m-end">
163
188
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
164
189
  </span>
165
190
  </button>
166
191
 
167
192
  <button class="pf-v6-c-button pf-m-danger pf-m-secondary" type="button">
168
- Secondary danger
193
+ <span class="pf-v6-c-button__text">Secondary danger</span>
169
194
  <span class="pf-v6-c-button__icon pf-m-end">
170
195
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
171
196
  </span>
172
197
  </button>
173
198
 
174
199
  <button class="pf-v6-c-button pf-m-tertiary" type="button">
175
- Tertiary
200
+ <span class="pf-v6-c-button__text">Tertiary</span>
176
201
  <span class="pf-v6-c-button__icon pf-m-end">
177
202
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
178
203
  </span>
179
204
  </button>
180
205
 
181
206
  <button class="pf-v6-c-button pf-m-danger" type="button">
182
- Danger
207
+ <span class="pf-v6-c-button__text">Danger</span>
183
208
  <span class="pf-v6-c-button__icon pf-m-end">
184
209
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
185
210
  </span>
186
211
  </button>
187
212
 
188
213
  <button class="pf-v6-c-button pf-m-warning" type="button">
189
- Warning
214
+ <span class="pf-v6-c-button__text">Warning</span>
190
215
  <span class="pf-v6-c-button__icon pf-m-end">
191
216
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
192
217
  </span>
@@ -196,35 +221,37 @@ cssPrefix: pf-v6-c-button
196
221
  <br />
197
222
 
198
223
  <button class="pf-v6-c-button pf-m-link" type="button">
199
- Link
224
+ <span class="pf-v6-c-button__text">Link</span>
200
225
  <span class="pf-v6-c-button__icon pf-m-end">
201
226
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
202
227
  </span>
203
228
  </button>
204
229
 
205
230
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button">
206
- Link danger
231
+ <span class="pf-v6-c-button__text">Link danger</span>
207
232
  <span class="pf-v6-c-button__icon pf-m-end">
208
233
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
209
234
  </span>
210
235
  </button>
211
236
 
212
237
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
213
- Inline link
238
+ <span class="pf-v6-c-button__text">Inline link</span>
214
239
  <span class="pf-v6-c-button__icon pf-m-end">
215
240
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
216
241
  </span>
217
242
  </button>
218
243
 
219
244
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Remove">
220
- <i class="fas fa-times" aria-hidden="true"></i>
245
+ <span class="pf-v6-c-button__icon">
246
+ <i class="fas fa-times" aria-hidden="true"></i>
247
+ </span>
221
248
  </button>
222
249
 
223
250
  <br />
224
251
  <br />
225
252
 
226
253
  <button class="pf-v6-c-button pf-m-control" type="button">
227
- Control
254
+ <span class="pf-v6-c-button__text">Control</span>
228
255
  <span class="pf-v6-c-button__icon pf-m-end">
229
256
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
230
257
  </span>
@@ -235,7 +262,9 @@ cssPrefix: pf-v6-c-button
235
262
  type="button"
236
263
  aria-label="Copy input"
237
264
  >
238
- <i class="fas fa-copy" aria-hidden="true"></i>
265
+ <span class="pf-v6-c-button__icon">
266
+ <i class="fas fa-copy" aria-hidden="true"></i>
267
+ </span>
239
268
  </button>
240
269
 
241
270
  ```
@@ -243,58 +272,73 @@ cssPrefix: pf-v6-c-button
243
272
  ### Clicked buttons
244
273
 
245
274
  ```html
246
- <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">Primary</button>
275
+ <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
276
+ <span class="pf-v6-c-button__text">Primary</span>
277
+ </button>
247
278
 
248
- <button
249
- class="pf-v6-c-button pf-m-clicked pf-m-secondary"
250
- type="button"
251
- >Secondary</button>
279
+ <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
280
+ <span class="pf-v6-c-button__text">Secondary</span>
281
+ </button>
252
282
 
253
283
  <button
254
284
  class="pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary"
255
285
  type="button"
256
- >Secondary danger</button>
286
+ >
287
+ <span class="pf-v6-c-button__text">Secondary danger</span>
288
+ </button>
257
289
 
258
- <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">Tertiary</button>
290
+ <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
291
+ <span class="pf-v6-c-button__text">Tertiary</span>
292
+ </button>
259
293
 
260
- <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">Danger</button>
294
+ <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
295
+ <span class="pf-v6-c-button__text">Danger</span>
296
+ </button>
261
297
 
262
- <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">Warning</button>
298
+ <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
299
+ <span class="pf-v6-c-button__text">Warning</span>
300
+ </button>
263
301
 
264
302
  <br />
265
303
  <br />
266
304
 
267
- <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">Link</button>
305
+ <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
306
+ <span class="pf-v6-c-button__text">Link</span>
307
+ </button>
268
308
 
269
- <button
270
- class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger"
271
- type="button"
272
- >Link danger</button>
309
+ <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
310
+ <span class="pf-v6-c-button__text">Link danger</span>
311
+ </button>
273
312
 
274
- <button
275
- class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link"
276
- type="button"
277
- >Inline link</button>
313
+ <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
314
+ <span class="pf-v6-c-button__text">Inline link</span>
315
+ </button>
278
316
 
279
317
  <button
280
318
  class="pf-v6-c-button pf-m-clicked pf-m-plain"
281
319
  type="button"
282
320
  aria-label="Remove"
283
321
  >
284
- <i class="fas fa-times" aria-hidden="true"></i>
322
+ <span class="pf-v6-c-button__icon">
323
+ <i class="fas fa-times" aria-hidden="true"></i>
324
+ </span>
285
325
  </button>
286
326
 
287
327
  <br />
288
328
  <br />
289
329
 
290
- <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">Control</button>
330
+ <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
331
+ <span class="pf-v6-c-button__text">Control</span>
332
+ </button>
291
333
 
292
334
  <button
293
335
  class="pf-v6-c-button pf-m-clicked pf-m-control"
294
336
  type="button"
295
337
  aria-label="Copy input"
296
338
  >
297
- <i class="fas fa-copy" aria-hidden="true"></i>
339
+ <span class="pf-v6-c-button__icon">
340
+ <i class="fas fa-copy" aria-hidden="true"></i>
341
+ </span>
298
342
  </button>
299
343
 
300
344
  <br />
@@ -307,14 +351,14 @@ cssPrefix: pf-v6-c-button
307
351
  <span class="pf-v6-c-button__icon pf-m-start">
308
352
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
309
353
  </span>
310
- Primary
354
+ <span class="pf-v6-c-button__text">Primary</span>
311
355
  </button>
312
356
 
313
357
  <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
314
358
  <span class="pf-v6-c-button__icon pf-m-start">
315
359
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
316
360
  </span>
317
- Secondary
361
+ <span class="pf-v6-c-button__text">Secondary</span>
318
362
  </button>
319
363
 
320
364
  <button
@@ -324,28 +368,28 @@ cssPrefix: pf-v6-c-button
324
368
  <span class="pf-v6-c-button__icon pf-m-start">
325
369
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
326
370
  </span>
327
- Secondary danger
371
+ <span class="pf-v6-c-button__text">Secondary danger</span>
328
372
  </button>
329
373
 
330
374
  <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
331
375
  <span class="pf-v6-c-button__icon pf-m-start">
332
376
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
333
377
  </span>
334
- Tertiary
378
+ <span class="pf-v6-c-button__text">Tertiary</span>
335
379
  </button>
336
380
 
337
381
  <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
338
382
  <span class="pf-v6-c-button__icon pf-m-start">
339
383
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
340
384
  </span>
341
- Danger
385
+ <span class="pf-v6-c-button__text">Danger</span>
342
386
  </button>
343
387
 
344
388
  <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
345
389
  <span class="pf-v6-c-button__icon pf-m-start">
346
390
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
347
391
  </span>
348
- Warning
392
+ <span class="pf-v6-c-button__text">Warning</span>
349
393
  </button>
350
394
 
351
395
  <br />
@@ -355,21 +399,21 @@ cssPrefix: pf-v6-c-button
355
399
  <span class="pf-v6-c-button__icon pf-m-start">
356
400
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
357
401
  </span>
358
- Link
402
+ <span class="pf-v6-c-button__text">Link</span>
359
403
  </button>
360
404
 
361
405
  <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
362
406
  <span class="pf-v6-c-button__icon pf-m-start">
363
407
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
364
408
  </span>
365
- Link danger
409
+ <span class="pf-v6-c-button__text">Link danger</span>
366
410
  </button>
367
411
 
368
412
  <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
369
413
  <span class="pf-v6-c-button__icon pf-m-start">
370
414
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
371
415
  </span>
372
- Inline link
416
+ <span class="pf-v6-c-button__text">Inline link</span>
373
417
  </button>
374
418
 
375
419
  <button
@@ -377,7 +421,9 @@ cssPrefix: pf-v6-c-button
377
421
  type="button"
378
422
  aria-label="Remove"
379
423
  >
380
- <i class="fas fa-times" aria-hidden="true"></i>
424
+ <span class="pf-v6-c-button__icon">
425
+ <i class="fas fa-times" aria-hidden="true"></i>
426
+ </span>
381
427
  </button>
382
428
 
383
429
  <br />
@@ -387,7 +433,7 @@ cssPrefix: pf-v6-c-button
387
433
  <span class="pf-v6-c-button__icon pf-m-start">
388
434
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
389
435
  </span>
390
- Control
436
+ <span class="pf-v6-c-button__text">Control</span>
391
437
  </button>
392
438
 
393
439
  <button
@@ -395,7 +441,9 @@ cssPrefix: pf-v6-c-button
395
441
  type="button"
396
442
  aria-label="Copy input"
397
443
  >
398
- <i class="fas fa-copy" aria-hidden="true"></i>
444
+ <span class="pf-v6-c-button__icon">
445
+ <i class="fas fa-copy" aria-hidden="true"></i>
446
+ </span>
399
447
  </button>
400
448
 
401
449
  <br />
@@ -405,14 +453,14 @@ cssPrefix: pf-v6-c-button
405
453
  <strong>Icon end</strong>
406
454
  </div>
407
455
  <button class="pf-v6-c-button pf-m-clicked pf-m-primary" type="button">
408
- Primary
456
+ <span class="pf-v6-c-button__text">Primary</span>
409
457
  <span class="pf-v6-c-button__icon pf-m-end">
410
458
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
411
459
  </span>
412
460
  </button>
413
461
 
414
462
  <button class="pf-v6-c-button pf-m-clicked pf-m-secondary" type="button">
415
- Secondary
463
+ <span class="pf-v6-c-button__text">Secondary</span>
416
464
  <span class="pf-v6-c-button__icon pf-m-end">
417
465
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
418
466
  </span>
@@ -422,28 +470,28 @@ cssPrefix: pf-v6-c-button
422
470
  class="pf-v6-c-button pf-m-clicked pf-m-danger pf-m-secondary"
423
471
  type="button"
424
472
  >
425
- Secondary danger
473
+ <span class="pf-v6-c-button__text">Secondary danger</span>
426
474
  <span class="pf-v6-c-button__icon pf-m-end">
427
475
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
428
476
  </span>
429
477
  </button>
430
478
 
431
479
  <button class="pf-v6-c-button pf-m-clicked pf-m-tertiary" type="button">
432
- Tertiary
480
+ <span class="pf-v6-c-button__text">Tertiary</span>
433
481
  <span class="pf-v6-c-button__icon pf-m-end">
434
482
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
435
483
  </span>
436
484
  </button>
437
485
 
438
486
  <button class="pf-v6-c-button pf-m-clicked pf-m-danger" type="button">
439
- Danger
487
+ <span class="pf-v6-c-button__text">Danger</span>
440
488
  <span class="pf-v6-c-button__icon pf-m-end">
441
489
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
442
490
  </span>
443
491
  </button>
444
492
 
445
493
  <button class="pf-v6-c-button pf-m-clicked pf-m-warning" type="button">
446
- Warning
494
+ <span class="pf-v6-c-button__text">Warning</span>
447
495
  <span class="pf-v6-c-button__icon pf-m-end">
448
496
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
449
497
  </span>
@@ -453,21 +501,21 @@ cssPrefix: pf-v6-c-button
453
501
  <br />
454
502
 
455
503
  <button class="pf-v6-c-button pf-m-clicked pf-m-link" type="button">
456
- Link
504
+ <span class="pf-v6-c-button__text">Link</span>
457
505
  <span class="pf-v6-c-button__icon pf-m-end">
458
506
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
459
507
  </span>
460
508
  </button>
461
509
 
462
510
  <button class="pf-v6-c-button pf-m-clicked pf-m-link pf-m-danger" type="button">
463
- Link danger
511
+ <span class="pf-v6-c-button__text">Link danger</span>
464
512
  <span class="pf-v6-c-button__icon pf-m-end">
465
513
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
466
514
  </span>
467
515
  </button>
468
516
 
469
517
  <button class="pf-v6-c-button pf-m-clicked pf-m-inline pf-m-link" type="button">
470
- Inline link
518
+ <span class="pf-v6-c-button__text">Inline link</span>
471
519
  <span class="pf-v6-c-button__icon pf-m-end">
472
520
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
473
521
  </span>
@@ -478,14 +526,16 @@ cssPrefix: pf-v6-c-button
478
526
  type="button"
479
527
  aria-label="Remove"
480
528
  >
481
- <i class="fas fa-times" aria-hidden="true"></i>
529
+ <span class="pf-v6-c-button__icon">
530
+ <i class="fas fa-times" aria-hidden="true"></i>
531
+ </span>
482
532
  </button>
483
533
 
484
534
  <br />
485
535
  <br />
486
536
 
487
537
  <button class="pf-v6-c-button pf-m-clicked pf-m-control" type="button">
488
- Control
538
+ <span class="pf-v6-c-button__text">Control</span>
489
539
  <span class="pf-v6-c-button__icon pf-m-end">
490
540
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
491
541
  </span>
@@ -496,7 +546,9 @@ cssPrefix: pf-v6-c-button
496
546
  type="button"
497
547
  aria-label="Copy input"
498
548
  >
499
- <i class="fas fa-copy" aria-hidden="true"></i>
549
+ <span class="pf-v6-c-button__icon">
550
+ <i class="fas fa-copy" aria-hidden="true"></i>
551
+ </span>
500
552
  </button>
501
553
 
502
554
  ```
@@ -504,55 +556,73 @@ cssPrefix: pf-v6-c-button
504
556
  ### Small buttons
505
557
 
506
558
  ```html
507
- <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">Primary</button>
559
+ <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
560
+ <span class="pf-v6-c-button__text">Primary</span>
561
+ </button>
508
562
 
509
- <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">Secondary</button>
563
+ <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
564
+ <span class="pf-v6-c-button__text">Secondary</span>
565
+ </button>
510
566
 
511
567
  <button
512
568
  class="pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary"
513
569
  type="button"
514
- >Secondary danger</button>
570
+ >
571
+ <span class="pf-v6-c-button__text">Secondary danger</span>
572
+ </button>
515
573
 
516
- <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">Tertiary</button>
574
+ <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
575
+ <span class="pf-v6-c-button__text">Tertiary</span>
576
+ </button>
517
577
 
518
- <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">Danger</button>
578
+ <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
579
+ <span class="pf-v6-c-button__text">Danger</span>
580
+ </button>
519
581
 
520
- <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">Warning</button>
582
+ <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
583
+ <span class="pf-v6-c-button__text">Warning</span>
584
+ </button>
521
585
 
522
586
  <br />
523
587
  <br />
524
588
 
525
- <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">Link</button>
589
+ <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
590
+ <span class="pf-v6-c-button__text">Link</span>
591
+ </button>
526
592
 
527
- <button
528
- class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger"
529
- type="button"
530
- >Link danger</button>
593
+ <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
594
+ <span class="pf-v6-c-button__text">Link danger</span>
595
+ </button>
531
596
 
532
- <button
533
- class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link"
534
- type="button"
535
- >Inline link</button>
597
+ <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
598
+ <span class="pf-v6-c-button__text">Inline link</span>
599
+ </button>
536
600
 
537
601
  <button
538
602
  class="pf-v6-c-button pf-m-small pf-m-plain"
539
603
  type="button"
540
604
  aria-label="Remove"
541
605
  >
542
- <i class="fas fa-times" aria-hidden="true"></i>
606
+ <span class="pf-v6-c-button__icon">
607
+ <i class="fas fa-times" aria-hidden="true"></i>
608
+ </span>
543
609
  </button>
544
610
 
545
611
  <br />
546
612
  <br />
547
613
 
548
- <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">Control</button>
614
+ <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
615
+ <span class="pf-v6-c-button__text">Control</span>
616
+ </button>
549
617
 
550
618
  <button
551
619
  class="pf-v6-c-button pf-m-small pf-m-control"
552
620
  type="button"
553
621
  aria-label="Copy input"
554
622
  >
555
- <i class="fas fa-copy" aria-hidden="true"></i>
623
+ <span class="pf-v6-c-button__icon">
624
+ <i class="fas fa-copy" aria-hidden="true"></i>
625
+ </span>
556
626
  </button>
557
627
 
558
628
  <br />
@@ -565,14 +635,14 @@ cssPrefix: pf-v6-c-button
565
635
  <span class="pf-v6-c-button__icon pf-m-start">
566
636
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
567
637
  </span>
568
- Primary
638
+ <span class="pf-v6-c-button__text">Primary</span>
569
639
  </button>
570
640
 
571
641
  <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
572
642
  <span class="pf-v6-c-button__icon pf-m-start">
573
643
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
574
644
  </span>
575
- Secondary
645
+ <span class="pf-v6-c-button__text">Secondary</span>
576
646
  </button>
577
647
 
578
648
  <button
@@ -582,28 +652,28 @@ cssPrefix: pf-v6-c-button
582
652
  <span class="pf-v6-c-button__icon pf-m-start">
583
653
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
584
654
  </span>
585
- Secondary danger
655
+ <span class="pf-v6-c-button__text">Secondary danger</span>
586
656
  </button>
587
657
 
588
658
  <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
589
659
  <span class="pf-v6-c-button__icon pf-m-start">
590
660
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
591
661
  </span>
592
- Tertiary
662
+ <span class="pf-v6-c-button__text">Tertiary</span>
593
663
  </button>
594
664
 
595
665
  <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
596
666
  <span class="pf-v6-c-button__icon pf-m-start">
597
667
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
598
668
  </span>
599
- Danger
669
+ <span class="pf-v6-c-button__text">Danger</span>
600
670
  </button>
601
671
 
602
672
  <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
603
673
  <span class="pf-v6-c-button__icon pf-m-start">
604
674
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
605
675
  </span>
606
- Warning
676
+ <span class="pf-v6-c-button__text">Warning</span>
607
677
  </button>
608
678
 
609
679
  <br />
@@ -613,21 +683,21 @@ cssPrefix: pf-v6-c-button
613
683
  <span class="pf-v6-c-button__icon pf-m-start">
614
684
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
615
685
  </span>
616
- Link
686
+ <span class="pf-v6-c-button__text">Link</span>
617
687
  </button>
618
688
 
619
689
  <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
620
690
  <span class="pf-v6-c-button__icon pf-m-start">
621
691
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
622
692
  </span>
623
- Link danger
693
+ <span class="pf-v6-c-button__text">Link danger</span>
624
694
  </button>
625
695
 
626
696
  <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
627
697
  <span class="pf-v6-c-button__icon pf-m-start">
628
698
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
629
699
  </span>
630
- Inline link
700
+ <span class="pf-v6-c-button__text">Inline link</span>
631
701
  </button>
632
702
 
633
703
  <button
@@ -635,7 +705,9 @@ cssPrefix: pf-v6-c-button
635
705
  type="button"
636
706
  aria-label="Remove"
637
707
  >
638
- <i class="fas fa-times" aria-hidden="true"></i>
708
+ <span class="pf-v6-c-button__icon">
709
+ <i class="fas fa-times" aria-hidden="true"></i>
710
+ </span>
639
711
  </button>
640
712
 
641
713
  <br />
@@ -645,7 +717,7 @@ cssPrefix: pf-v6-c-button
645
717
  <span class="pf-v6-c-button__icon pf-m-start">
646
718
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
647
719
  </span>
648
- Control
720
+ <span class="pf-v6-c-button__text">Control</span>
649
721
  </button>
650
722
 
651
723
  <button
@@ -653,7 +725,9 @@ cssPrefix: pf-v6-c-button
653
725
  type="button"
654
726
  aria-label="Copy input"
655
727
  >
656
- <i class="fas fa-copy" aria-hidden="true"></i>
728
+ <span class="pf-v6-c-button__icon">
729
+ <i class="fas fa-copy" aria-hidden="true"></i>
730
+ </span>
657
731
  </button>
658
732
 
659
733
  <br />
@@ -663,14 +737,14 @@ cssPrefix: pf-v6-c-button
663
737
  <strong>Icon end</strong>
664
738
  </div>
665
739
  <button class="pf-v6-c-button pf-m-small pf-m-primary" type="button">
666
- Primary
740
+ <span class="pf-v6-c-button__text">Primary</span>
667
741
  <span class="pf-v6-c-button__icon pf-m-end">
668
742
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
669
743
  </span>
670
744
  </button>
671
745
 
672
746
  <button class="pf-v6-c-button pf-m-small pf-m-secondary" type="button">
673
- Secondary
747
+ <span class="pf-v6-c-button__text">Secondary</span>
674
748
  <span class="pf-v6-c-button__icon pf-m-end">
675
749
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
676
750
  </span>
@@ -680,28 +754,28 @@ cssPrefix: pf-v6-c-button
680
754
  class="pf-v6-c-button pf-m-small pf-m-danger pf-m-secondary"
681
755
  type="button"
682
756
  >
683
- Secondary danger
757
+ <span class="pf-v6-c-button__text">Secondary danger</span>
684
758
  <span class="pf-v6-c-button__icon pf-m-end">
685
759
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
686
760
  </span>
687
761
  </button>
688
762
 
689
763
  <button class="pf-v6-c-button pf-m-small pf-m-tertiary" type="button">
690
- Tertiary
764
+ <span class="pf-v6-c-button__text">Tertiary</span>
691
765
  <span class="pf-v6-c-button__icon pf-m-end">
692
766
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
693
767
  </span>
694
768
  </button>
695
769
 
696
770
  <button class="pf-v6-c-button pf-m-small pf-m-danger" type="button">
697
- Danger
771
+ <span class="pf-v6-c-button__text">Danger</span>
698
772
  <span class="pf-v6-c-button__icon pf-m-end">
699
773
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
700
774
  </span>
701
775
  </button>
702
776
 
703
777
  <button class="pf-v6-c-button pf-m-small pf-m-warning" type="button">
704
- Warning
778
+ <span class="pf-v6-c-button__text">Warning</span>
705
779
  <span class="pf-v6-c-button__icon pf-m-end">
706
780
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
707
781
  </span>
@@ -711,21 +785,21 @@ cssPrefix: pf-v6-c-button
711
785
  <br />
712
786
 
713
787
  <button class="pf-v6-c-button pf-m-small pf-m-link" type="button">
714
- Link
788
+ <span class="pf-v6-c-button__text">Link</span>
715
789
  <span class="pf-v6-c-button__icon pf-m-end">
716
790
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
717
791
  </span>
718
792
  </button>
719
793
 
720
794
  <button class="pf-v6-c-button pf-m-small pf-m-link pf-m-danger" type="button">
721
- Link danger
795
+ <span class="pf-v6-c-button__text">Link danger</span>
722
796
  <span class="pf-v6-c-button__icon pf-m-end">
723
797
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
724
798
  </span>
725
799
  </button>
726
800
 
727
801
  <button class="pf-v6-c-button pf-m-small pf-m-inline pf-m-link" type="button">
728
- Inline link
802
+ <span class="pf-v6-c-button__text">Inline link</span>
729
803
  <span class="pf-v6-c-button__icon pf-m-end">
730
804
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
731
805
  </span>
@@ -736,14 +810,16 @@ cssPrefix: pf-v6-c-button
736
810
  type="button"
737
811
  aria-label="Remove"
738
812
  >
739
- <i class="fas fa-times" aria-hidden="true"></i>
813
+ <span class="pf-v6-c-button__icon">
814
+ <i class="fas fa-times" aria-hidden="true"></i>
815
+ </span>
740
816
  </button>
741
817
 
742
818
  <br />
743
819
  <br />
744
820
 
745
821
  <button class="pf-v6-c-button pf-m-small pf-m-control" type="button">
746
- Control
822
+ <span class="pf-v6-c-button__text">Control</span>
747
823
  <span class="pf-v6-c-button__icon pf-m-end">
748
824
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
749
825
  </span>
@@ -754,7 +830,9 @@ cssPrefix: pf-v6-c-button
754
830
  type="button"
755
831
  aria-label="Copy input"
756
832
  >
757
- <i class="fas fa-copy" aria-hidden="true"></i>
833
+ <span class="pf-v6-c-button__icon">
834
+ <i class="fas fa-copy" aria-hidden="true"></i>
835
+ </span>
758
836
  </button>
759
837
 
760
838
  ```
@@ -762,60 +840,76 @@ cssPrefix: pf-v6-c-button
762
840
  ### Disabled
763
841
 
764
842
  ```html
765
- <button class="pf-v6-c-button pf-m-primary" type="button" disabled>Primary</button>
843
+ <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
844
+ <span class="pf-v6-c-button__text">Primary</span>
845
+ </button>
766
846
 
767
- <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>Secondary</button>
847
+ <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
848
+ <span class="pf-v6-c-button__text">Secondary</span>
849
+ </button>
768
850
 
769
851
  <button
770
852
  class="pf-v6-c-button pf-m-danger pf-m-secondary"
771
853
  type="button"
772
854
  disabled
773
- >Secondary danger</button>
855
+ >
856
+ <span class="pf-v6-c-button__text">Secondary danger</span>
857
+ </button>
774
858
 
775
- <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>Tertiary</button>
859
+ <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
860
+ <span class="pf-v6-c-button__text">Tertiary</span>
861
+ </button>
776
862
 
777
- <button class="pf-v6-c-button pf-m-danger" type="button" disabled>Danger</button>
863
+ <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
864
+ <span class="pf-v6-c-button__text">Danger</span>
865
+ </button>
778
866
 
779
- <button class="pf-v6-c-button pf-m-warning" type="button" disabled>Warning</button>
867
+ <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
868
+ <span class="pf-v6-c-button__text">Warning</span>
869
+ </button>
780
870
 
781
871
  <br />
782
872
  <br />
783
873
 
784
- <button class="pf-v6-c-button pf-m-link" type="button" disabled>Link</button>
874
+ <button class="pf-v6-c-button pf-m-link" type="button" disabled>
875
+ <span class="pf-v6-c-button__text">Link</span>
876
+ </button>
785
877
 
786
- <button
787
- class="pf-v6-c-button pf-m-link pf-m-danger"
788
- type="button"
789
- disabled
790
- >Link danger</button>
878
+ <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
879
+ <span class="pf-v6-c-button__text">Link danger</span>
880
+ </button>
791
881
 
792
- <button
793
- class="pf-v6-c-button pf-m-inline pf-m-link"
794
- type="button"
795
- disabled
796
- >Inline link</button>
882
+ <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
883
+ <span class="pf-v6-c-button__text">Inline link</span>
884
+ </button>
797
885
 
798
886
  <button
799
887
  class="pf-v6-c-button pf-m-plain"
800
888
  type="button"
801
- disabled
802
889
  aria-label="Remove"
890
+ disabled
803
891
  >
804
- <i class="fas fa-times" aria-hidden="true"></i>
892
+ <span class="pf-v6-c-button__icon">
893
+ <i class="fas fa-times" aria-hidden="true"></i>
894
+ </span>
805
895
  </button>
806
896
 
807
897
  <br />
808
898
  <br />
809
899
 
810
- <button class="pf-v6-c-button pf-m-control" type="button" disabled>Control</button>
900
+ <button class="pf-v6-c-button pf-m-control" type="button" disabled>
901
+ <span class="pf-v6-c-button__text">Control</span>
902
+ </button>
811
903
 
812
904
  <button
813
905
  class="pf-v6-c-button pf-m-control"
814
906
  type="button"
815
- disabled
816
907
  aria-label="Copy input"
908
+ disabled
817
909
  >
818
- <i class="fas fa-copy" aria-hidden="true"></i>
910
+ <span class="pf-v6-c-button__icon">
911
+ <i class="fas fa-copy" aria-hidden="true"></i>
912
+ </span>
819
913
  </button>
820
914
 
821
915
  <br />
@@ -828,14 +922,14 @@ cssPrefix: pf-v6-c-button
828
922
  <span class="pf-v6-c-button__icon pf-m-start">
829
923
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
830
924
  </span>
831
- Primary
925
+ <span class="pf-v6-c-button__text">Primary</span>
832
926
  </button>
833
927
 
834
928
  <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
835
929
  <span class="pf-v6-c-button__icon pf-m-start">
836
930
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
837
931
  </span>
838
- Secondary
932
+ <span class="pf-v6-c-button__text">Secondary</span>
839
933
  </button>
840
934
 
841
935
  <button
@@ -846,28 +940,28 @@ cssPrefix: pf-v6-c-button
846
940
  <span class="pf-v6-c-button__icon pf-m-start">
847
941
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
848
942
  </span>
849
- Secondary danger
943
+ <span class="pf-v6-c-button__text">Secondary danger</span>
850
944
  </button>
851
945
 
852
946
  <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
853
947
  <span class="pf-v6-c-button__icon pf-m-start">
854
948
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
855
949
  </span>
856
- Tertiary
950
+ <span class="pf-v6-c-button__text">Tertiary</span>
857
951
  </button>
858
952
 
859
953
  <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
860
954
  <span class="pf-v6-c-button__icon pf-m-start">
861
955
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
862
956
  </span>
863
- Danger
957
+ <span class="pf-v6-c-button__text">Danger</span>
864
958
  </button>
865
959
 
866
960
  <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
867
961
  <span class="pf-v6-c-button__icon pf-m-start">
868
962
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
869
963
  </span>
870
- Warning
964
+ <span class="pf-v6-c-button__text">Warning</span>
871
965
  </button>
872
966
 
873
967
  <br />
@@ -877,30 +971,32 @@ cssPrefix: pf-v6-c-button
877
971
  <span class="pf-v6-c-button__icon pf-m-start">
878
972
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
879
973
  </span>
880
- Link
974
+ <span class="pf-v6-c-button__text">Link</span>
881
975
  </button>
882
976
 
883
977
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
884
978
  <span class="pf-v6-c-button__icon pf-m-start">
885
979
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
886
980
  </span>
887
- Link danger
981
+ <span class="pf-v6-c-button__text">Link danger</span>
888
982
  </button>
889
983
 
890
984
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
891
985
  <span class="pf-v6-c-button__icon pf-m-start">
892
986
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
893
987
  </span>
894
- Inline link
988
+ <span class="pf-v6-c-button__text">Inline link</span>
895
989
  </button>
896
990
 
897
991
  <button
898
992
  class="pf-v6-c-button pf-m-plain"
899
993
  type="button"
900
- disabled
901
994
  aria-label="Remove"
995
+ disabled
902
996
  >
903
- <i class="fas fa-times" aria-hidden="true"></i>
997
+ <span class="pf-v6-c-button__icon">
998
+ <i class="fas fa-times" aria-hidden="true"></i>
999
+ </span>
904
1000
  </button>
905
1001
 
906
1002
  <br />
@@ -910,16 +1006,18 @@ cssPrefix: pf-v6-c-button
910
1006
  <span class="pf-v6-c-button__icon pf-m-start">
911
1007
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
912
1008
  </span>
913
- Control
1009
+ <span class="pf-v6-c-button__text">Control</span>
914
1010
  </button>
915
1011
 
916
1012
  <button
917
1013
  class="pf-v6-c-button pf-m-control"
918
1014
  type="button"
919
- disabled
920
1015
  aria-label="Copy input"
1016
+ disabled
921
1017
  >
922
- <i class="fas fa-copy" aria-hidden="true"></i>
1018
+ <span class="pf-v6-c-button__icon">
1019
+ <i class="fas fa-copy" aria-hidden="true"></i>
1020
+ </span>
923
1021
  </button>
924
1022
 
925
1023
  <br />
@@ -929,14 +1027,14 @@ cssPrefix: pf-v6-c-button
929
1027
  <strong>Icon end</strong>
930
1028
  </div>
931
1029
  <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
932
- Primary
1030
+ <span class="pf-v6-c-button__text">Primary</span>
933
1031
  <span class="pf-v6-c-button__icon pf-m-end">
934
1032
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
935
1033
  </span>
936
1034
  </button>
937
1035
 
938
1036
  <button class="pf-v6-c-button pf-m-secondary" type="button" disabled>
939
- Secondary
1037
+ <span class="pf-v6-c-button__text">Secondary</span>
940
1038
  <span class="pf-v6-c-button__icon pf-m-end">
941
1039
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
942
1040
  </span>
@@ -947,28 +1045,28 @@ cssPrefix: pf-v6-c-button
947
1045
  type="button"
948
1046
  disabled
949
1047
  >
950
- Secondary danger
1048
+ <span class="pf-v6-c-button__text">Secondary danger</span>
951
1049
  <span class="pf-v6-c-button__icon pf-m-end">
952
1050
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
953
1051
  </span>
954
1052
  </button>
955
1053
 
956
1054
  <button class="pf-v6-c-button pf-m-tertiary" type="button" disabled>
957
- Tertiary
1055
+ <span class="pf-v6-c-button__text">Tertiary</span>
958
1056
  <span class="pf-v6-c-button__icon pf-m-end">
959
1057
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
960
1058
  </span>
961
1059
  </button>
962
1060
 
963
1061
  <button class="pf-v6-c-button pf-m-danger" type="button" disabled>
964
- Danger
1062
+ <span class="pf-v6-c-button__text">Danger</span>
965
1063
  <span class="pf-v6-c-button__icon pf-m-end">
966
1064
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
967
1065
  </span>
968
1066
  </button>
969
1067
 
970
1068
  <button class="pf-v6-c-button pf-m-warning" type="button" disabled>
971
- Warning
1069
+ <span class="pf-v6-c-button__text">Warning</span>
972
1070
  <span class="pf-v6-c-button__icon pf-m-end">
973
1071
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
974
1072
  </span>
@@ -978,21 +1076,21 @@ cssPrefix: pf-v6-c-button
978
1076
  <br />
979
1077
 
980
1078
  <button class="pf-v6-c-button pf-m-link" type="button" disabled>
981
- Link
1079
+ <span class="pf-v6-c-button__text">Link</span>
982
1080
  <span class="pf-v6-c-button__icon pf-m-end">
983
1081
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
984
1082
  </span>
985
1083
  </button>
986
1084
 
987
1085
  <button class="pf-v6-c-button pf-m-link pf-m-danger" type="button" disabled>
988
- Link danger
1086
+ <span class="pf-v6-c-button__text">Link danger</span>
989
1087
  <span class="pf-v6-c-button__icon pf-m-end">
990
1088
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
991
1089
  </span>
992
1090
  </button>
993
1091
 
994
1092
  <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button" disabled>
995
- Inline link
1093
+ <span class="pf-v6-c-button__text">Inline link</span>
996
1094
  <span class="pf-v6-c-button__icon pf-m-end">
997
1095
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
998
1096
  </span>
@@ -1001,17 +1099,19 @@ cssPrefix: pf-v6-c-button
1001
1099
  <button
1002
1100
  class="pf-v6-c-button pf-m-plain"
1003
1101
  type="button"
1004
- disabled
1005
1102
  aria-label="Remove"
1103
+ disabled
1006
1104
  >
1007
- <i class="fas fa-times" aria-hidden="true"></i>
1105
+ <span class="pf-v6-c-button__icon">
1106
+ <i class="fas fa-times" aria-hidden="true"></i>
1107
+ </span>
1008
1108
  </button>
1009
1109
 
1010
1110
  <br />
1011
1111
  <br />
1012
1112
 
1013
1113
  <button class="pf-v6-c-button pf-m-control" type="button" disabled>
1014
- Control
1114
+ <span class="pf-v6-c-button__text">Control</span>
1015
1115
  <span class="pf-v6-c-button__icon pf-m-end">
1016
1116
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1017
1117
  </span>
@@ -1020,10 +1120,12 @@ cssPrefix: pf-v6-c-button
1020
1120
  <button
1021
1121
  class="pf-v6-c-button pf-m-control"
1022
1122
  type="button"
1023
- disabled
1024
1123
  aria-label="Copy input"
1124
+ disabled
1025
1125
  >
1026
- <i class="fas fa-copy" aria-hidden="true"></i>
1126
+ <span class="pf-v6-c-button__icon">
1127
+ <i class="fas fa-copy" aria-hidden="true"></i>
1128
+ </span>
1027
1129
  </button>
1028
1130
 
1029
1131
  ```
@@ -1035,37 +1137,49 @@ cssPrefix: pf-v6-c-button
1035
1137
  class="pf-v6-c-button pf-m-aria-disabled pf-m-primary"
1036
1138
  type="button"
1037
1139
  aria-disabled="true"
1038
- >Primary</button>
1140
+ >
1141
+ <span class="pf-v6-c-button__text">Primary</span>
1142
+ </button>
1039
1143
 
1040
1144
  <button
1041
1145
  class="pf-v6-c-button pf-m-aria-disabled pf-m-secondary"
1042
1146
  type="button"
1043
1147
  aria-disabled="true"
1044
- >Secondary</button>
1148
+ >
1149
+ <span class="pf-v6-c-button__text">Secondary</span>
1150
+ </button>
1045
1151
 
1046
1152
  <button
1047
1153
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger pf-m-secondary"
1048
1154
  type="button"
1049
1155
  aria-disabled="true"
1050
- >Secondary danger</button>
1156
+ >
1157
+ <span class="pf-v6-c-button__text">Secondary danger</span>
1158
+ </button>
1051
1159
 
1052
1160
  <button
1053
1161
  class="pf-v6-c-button pf-m-aria-disabled pf-m-tertiary"
1054
1162
  type="button"
1055
1163
  aria-disabled="true"
1056
- >Tertiary</button>
1164
+ >
1165
+ <span class="pf-v6-c-button__text">Tertiary</span>
1166
+ </button>
1057
1167
 
1058
1168
  <button
1059
1169
  class="pf-v6-c-button pf-m-aria-disabled pf-m-danger"
1060
1170
  type="button"
1061
1171
  aria-disabled="true"
1062
- >Danger</button>
1172
+ >
1173
+ <span class="pf-v6-c-button__text">Danger</span>
1174
+ </button>
1063
1175
 
1064
1176
  <button
1065
1177
  class="pf-v6-c-button pf-m-aria-disabled pf-m-warning"
1066
1178
  type="button"
1067
1179
  aria-disabled="true"
1068
- >Warning</button>
1180
+ >
1181
+ <span class="pf-v6-c-button__text">Warning</span>
1182
+ </button>
1069
1183
 
1070
1184
  <br />
1071
1185
  <br />
@@ -1074,27 +1188,35 @@ cssPrefix: pf-v6-c-button
1074
1188
  class="pf-v6-c-button pf-m-aria-disabled pf-m-link"
1075
1189
  type="button"
1076
1190
  aria-disabled="true"
1077
- >Link</button>
1191
+ >
1192
+ <span class="pf-v6-c-button__text">Link</span>
1193
+ </button>
1078
1194
 
1079
1195
  <button
1080
1196
  class="pf-v6-c-button pf-m-aria-disabled pf-m-link pf-m-danger"
1081
1197
  type="button"
1082
1198
  aria-disabled="true"
1083
- >Link danger</button>
1199
+ >
1200
+ <span class="pf-v6-c-button__text">Link danger</span>
1201
+ </button>
1084
1202
 
1085
1203
  <button
1086
1204
  class="pf-v6-c-button pf-m-aria-disabled pf-m-inline pf-m-link"
1087
1205
  type="button"
1088
1206
  aria-disabled="true"
1089
- >Inline link</button>
1207
+ >
1208
+ <span class="pf-v6-c-button__text">Inline link</span>
1209
+ </button>
1090
1210
 
1091
1211
  <button
1092
1212
  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
1093
1213
  type="button"
1094
- aria-disabled="true"
1095
1214
  aria-label="Remove"
1215
+ aria-disabled="true"
1096
1216
  >
1097
- <i class="fas fa-times" aria-hidden="true"></i>
1217
+ <span class="pf-v6-c-button__icon">
1218
+ <i class="fas fa-times" aria-hidden="true"></i>
1219
+ </span>
1098
1220
  </button>
1099
1221
 
1100
1222
  <br />
@@ -1104,15 +1226,19 @@ cssPrefix: pf-v6-c-button
1104
1226
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
1105
1227
  type="button"
1106
1228
  aria-disabled="true"
1107
- >Control</button>
1229
+ >
1230
+ <span class="pf-v6-c-button__text">Control</span>
1231
+ </button>
1108
1232
 
1109
1233
  <button
1110
1234
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
1111
1235
  type="button"
1112
- aria-disabled="true"
1113
1236
  aria-label="Copy input"
1237
+ aria-disabled="true"
1114
1238
  >
1115
- <i class="fas fa-copy" aria-hidden="true"></i>
1239
+ <span class="pf-v6-c-button__icon">
1240
+ <i class="fas fa-copy" aria-hidden="true"></i>
1241
+ </span>
1116
1242
  </button>
1117
1243
 
1118
1244
  <br />
@@ -1129,7 +1255,7 @@ cssPrefix: pf-v6-c-button
1129
1255
  <span class="pf-v6-c-button__icon pf-m-start">
1130
1256
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1131
1257
  </span>
1132
- Primary
1258
+ <span class="pf-v6-c-button__text">Primary</span>
1133
1259
  </button>
1134
1260
 
1135
1261
  <button
@@ -1140,7 +1266,7 @@ cssPrefix: pf-v6-c-button
1140
1266
  <span class="pf-v6-c-button__icon pf-m-start">
1141
1267
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1142
1268
  </span>
1143
- Secondary
1269
+ <span class="pf-v6-c-button__text">Secondary</span>
1144
1270
  </button>
1145
1271
 
1146
1272
  <button
@@ -1151,7 +1277,7 @@ cssPrefix: pf-v6-c-button
1151
1277
  <span class="pf-v6-c-button__icon pf-m-start">
1152
1278
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1153
1279
  </span>
1154
- Secondary danger
1280
+ <span class="pf-v6-c-button__text">Secondary danger</span>
1155
1281
  </button>
1156
1282
 
1157
1283
  <button
@@ -1162,7 +1288,7 @@ cssPrefix: pf-v6-c-button
1162
1288
  <span class="pf-v6-c-button__icon pf-m-start">
1163
1289
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1164
1290
  </span>
1165
- Tertiary
1291
+ <span class="pf-v6-c-button__text">Tertiary</span>
1166
1292
  </button>
1167
1293
 
1168
1294
  <button
@@ -1173,7 +1299,7 @@ cssPrefix: pf-v6-c-button
1173
1299
  <span class="pf-v6-c-button__icon pf-m-start">
1174
1300
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1175
1301
  </span>
1176
- Danger
1302
+ <span class="pf-v6-c-button__text">Danger</span>
1177
1303
  </button>
1178
1304
 
1179
1305
  <button
@@ -1184,7 +1310,7 @@ cssPrefix: pf-v6-c-button
1184
1310
  <span class="pf-v6-c-button__icon pf-m-start">
1185
1311
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1186
1312
  </span>
1187
- Warning
1313
+ <span class="pf-v6-c-button__text">Warning</span>
1188
1314
  </button>
1189
1315
 
1190
1316
  <br />
@@ -1198,7 +1324,7 @@ cssPrefix: pf-v6-c-button
1198
1324
  <span class="pf-v6-c-button__icon pf-m-start">
1199
1325
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1200
1326
  </span>
1201
- Link
1327
+ <span class="pf-v6-c-button__text">Link</span>
1202
1328
  </button>
1203
1329
 
1204
1330
  <button
@@ -1209,7 +1335,7 @@ cssPrefix: pf-v6-c-button
1209
1335
  <span class="pf-v6-c-button__icon pf-m-start">
1210
1336
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1211
1337
  </span>
1212
- Link danger
1338
+ <span class="pf-v6-c-button__text">Link danger</span>
1213
1339
  </button>
1214
1340
 
1215
1341
  <button
@@ -1220,16 +1346,18 @@ cssPrefix: pf-v6-c-button
1220
1346
  <span class="pf-v6-c-button__icon pf-m-start">
1221
1347
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1222
1348
  </span>
1223
- Inline link
1349
+ <span class="pf-v6-c-button__text">Inline link</span>
1224
1350
  </button>
1225
1351
 
1226
1352
  <button
1227
1353
  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
1228
1354
  type="button"
1229
- aria-disabled="true"
1230
1355
  aria-label="Remove"
1356
+ aria-disabled="true"
1231
1357
  >
1232
- <i class="fas fa-times" aria-hidden="true"></i>
1358
+ <span class="pf-v6-c-button__icon">
1359
+ <i class="fas fa-times" aria-hidden="true"></i>
1360
+ </span>
1233
1361
  </button>
1234
1362
 
1235
1363
  <br />
@@ -1243,16 +1371,18 @@ cssPrefix: pf-v6-c-button
1243
1371
  <span class="pf-v6-c-button__icon pf-m-start">
1244
1372
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1245
1373
  </span>
1246
- Control
1374
+ <span class="pf-v6-c-button__text">Control</span>
1247
1375
  </button>
1248
1376
 
1249
1377
  <button
1250
1378
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
1251
1379
  type="button"
1252
- aria-disabled="true"
1253
1380
  aria-label="Copy input"
1381
+ aria-disabled="true"
1254
1382
  >
1255
- <i class="fas fa-copy" aria-hidden="true"></i>
1383
+ <span class="pf-v6-c-button__icon">
1384
+ <i class="fas fa-copy" aria-hidden="true"></i>
1385
+ </span>
1256
1386
  </button>
1257
1387
 
1258
1388
  <br />
@@ -1266,7 +1396,7 @@ cssPrefix: pf-v6-c-button
1266
1396
  type="button"
1267
1397
  aria-disabled="true"
1268
1398
  >
1269
- Primary
1399
+ <span class="pf-v6-c-button__text">Primary</span>
1270
1400
  <span class="pf-v6-c-button__icon pf-m-end">
1271
1401
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1272
1402
  </span>
@@ -1277,7 +1407,7 @@ cssPrefix: pf-v6-c-button
1277
1407
  type="button"
1278
1408
  aria-disabled="true"
1279
1409
  >
1280
- Secondary
1410
+ <span class="pf-v6-c-button__text">Secondary</span>
1281
1411
  <span class="pf-v6-c-button__icon pf-m-end">
1282
1412
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1283
1413
  </span>
@@ -1288,7 +1418,7 @@ cssPrefix: pf-v6-c-button
1288
1418
  type="button"
1289
1419
  aria-disabled="true"
1290
1420
  >
1291
- Secondary danger
1421
+ <span class="pf-v6-c-button__text">Secondary danger</span>
1292
1422
  <span class="pf-v6-c-button__icon pf-m-end">
1293
1423
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1294
1424
  </span>
@@ -1299,7 +1429,7 @@ cssPrefix: pf-v6-c-button
1299
1429
  type="button"
1300
1430
  aria-disabled="true"
1301
1431
  >
1302
- Tertiary
1432
+ <span class="pf-v6-c-button__text">Tertiary</span>
1303
1433
  <span class="pf-v6-c-button__icon pf-m-end">
1304
1434
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1305
1435
  </span>
@@ -1310,7 +1440,7 @@ cssPrefix: pf-v6-c-button
1310
1440
  type="button"
1311
1441
  aria-disabled="true"
1312
1442
  >
1313
- Danger
1443
+ <span class="pf-v6-c-button__text">Danger</span>
1314
1444
  <span class="pf-v6-c-button__icon pf-m-end">
1315
1445
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1316
1446
  </span>
@@ -1321,7 +1451,7 @@ cssPrefix: pf-v6-c-button
1321
1451
  type="button"
1322
1452
  aria-disabled="true"
1323
1453
  >
1324
- Warning
1454
+ <span class="pf-v6-c-button__text">Warning</span>
1325
1455
  <span class="pf-v6-c-button__icon pf-m-end">
1326
1456
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1327
1457
  </span>
@@ -1335,7 +1465,7 @@ cssPrefix: pf-v6-c-button
1335
1465
  type="button"
1336
1466
  aria-disabled="true"
1337
1467
  >
1338
- Link
1468
+ <span class="pf-v6-c-button__text">Link</span>
1339
1469
  <span class="pf-v6-c-button__icon pf-m-end">
1340
1470
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1341
1471
  </span>
@@ -1346,7 +1476,7 @@ cssPrefix: pf-v6-c-button
1346
1476
  type="button"
1347
1477
  aria-disabled="true"
1348
1478
  >
1349
- Link danger
1479
+ <span class="pf-v6-c-button__text">Link danger</span>
1350
1480
  <span class="pf-v6-c-button__icon pf-m-end">
1351
1481
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1352
1482
  </span>
@@ -1357,7 +1487,7 @@ cssPrefix: pf-v6-c-button
1357
1487
  type="button"
1358
1488
  aria-disabled="true"
1359
1489
  >
1360
- Inline link
1490
+ <span class="pf-v6-c-button__text">Inline link</span>
1361
1491
  <span class="pf-v6-c-button__icon pf-m-end">
1362
1492
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1363
1493
  </span>
@@ -1366,10 +1496,12 @@ cssPrefix: pf-v6-c-button
1366
1496
  <button
1367
1497
  class="pf-v6-c-button pf-m-aria-disabled pf-m-plain"
1368
1498
  type="button"
1369
- aria-disabled="true"
1370
1499
  aria-label="Remove"
1500
+ aria-disabled="true"
1371
1501
  >
1372
- <i class="fas fa-times" aria-hidden="true"></i>
1502
+ <span class="pf-v6-c-button__icon">
1503
+ <i class="fas fa-times" aria-hidden="true"></i>
1504
+ </span>
1373
1505
  </button>
1374
1506
 
1375
1507
  <br />
@@ -1380,7 +1512,7 @@ cssPrefix: pf-v6-c-button
1380
1512
  type="button"
1381
1513
  aria-disabled="true"
1382
1514
  >
1383
- Control
1515
+ <span class="pf-v6-c-button__text">Control</span>
1384
1516
  <span class="pf-v6-c-button__icon pf-m-end">
1385
1517
  <i class="fas fa-plus-circle" aria-hidden="true"></i>
1386
1518
  </span>
@@ -1389,10 +1521,12 @@ cssPrefix: pf-v6-c-button
1389
1521
  <button
1390
1522
  class="pf-v6-c-button pf-m-aria-disabled pf-m-control"
1391
1523
  type="button"
1392
- aria-disabled="true"
1393
1524
  aria-label="Copy input"
1525
+ aria-disabled="true"
1394
1526
  >
1395
- <i class="fas fa-copy" aria-hidden="true"></i>
1527
+ <span class="pf-v6-c-button__icon">
1528
+ <i class="fas fa-copy" aria-hidden="true"></i>
1529
+ </span>
1396
1530
  </button>
1397
1531
 
1398
1532
  ```
@@ -1403,36 +1537,48 @@ cssPrefix: pf-v6-c-button
1403
1537
  <a
1404
1538
  class="pf-v6-c-button pf-m-primary"
1405
1539
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
1406
- >Primary link to W3.org</a>
1540
+ >
1541
+ <span class="pf-v6-c-button__text">Primary link to W3.org</span>
1542
+ </a>
1407
1543
 
1408
1544
  <a
1409
1545
  class="pf-v6-c-button pf-m-secondary"
1410
- href="#overview"
1411
1546
  aria-label="Read more about button documentation"
1412
- >Secondary link to anchor</a>
1547
+ href="#overview"
1548
+ >
1549
+ <span class="pf-v6-c-button__text">Secondary link to anchor</span>
1550
+ </a>
1413
1551
 
1414
1552
  <a
1415
- class="pf-v6-c-button pf-m-secondary pf-m-danger"
1416
- href="#overview"
1553
+ class="pf-v6-c-button pf-m-danger pf-m-secondary"
1417
1554
  aria-label="Read more about button documentation"
1418
- >Secondary danger link to anchor</a>
1555
+ href="#overview"
1556
+ >
1557
+ <span class="pf-v6-c-button__text">Secondary danger link to anchor</span>
1558
+ </a>
1419
1559
 
1420
1560
  <a
1421
1561
  class="pf-v6-c-button pf-m-tertiary pf-m-disabled"
1422
1562
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
1423
1563
  aria-disabled="true"
1424
1564
  tabindex="-1"
1425
- >Tertiary link to W3.org</a>
1565
+ >
1566
+ <span class="pf-v6-c-button__text">Tertiary link to W3.org</span>
1567
+ </a>
1426
1568
 
1427
1569
  <a
1428
1570
  class="pf-v6-c-button pf-m-link"
1429
1571
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
1430
- >Link to W3.org</a>
1572
+ >
1573
+ <span class="pf-v6-c-button__text">Link to W3.org</span>
1574
+ </a>
1431
1575
 
1432
1576
  <a
1433
1577
  class="pf-v6-c-button pf-m-link pf-m-danger"
1434
1578
  href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
1435
- >Link danger to W3.org</a>
1579
+ >
1580
+ <span class="pf-v6-c-button__text">Link danger to W3.org</span>
1581
+ </a>
1436
1582
 
1437
1583
  ```
1438
1584
 
@@ -1448,7 +1594,9 @@ cssPrefix: pf-v6-c-button
1448
1594
  tabindex="0"
1449
1595
  aria-label="Remove"
1450
1596
  >
1451
- <i class="fas fa-times" aria-hidden="true"></i>
1597
+ <span class="pf-v6-c-button__icon">
1598
+ <i class="fas fa-times" aria-hidden="true"></i>
1599
+ </span>
1452
1600
  </span>
1453
1601
  <br />
1454
1602
  <br />
@@ -1461,18 +1609,24 @@ cssPrefix: pf-v6-c-button
1461
1609
  tabindex="0"
1462
1610
  aria-label="Remove"
1463
1611
  >
1464
- <i class="fas fa-times" aria-hidden="true"></i>
1612
+ <span class="pf-v6-c-button__icon">
1613
+ <i class="fas fa-times" aria-hidden="true"></i>
1614
+ </span>
1465
1615
  </span>
1466
1616
  <br />
1467
1617
  <br />
1468
1618
  <strong>Inline link</strong>
1469
1619
  <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
1470
1620
  <span
1471
- class="pf-v6-c-button pf-m-link pf-m-inline"
1621
+ class="pf-v6-c-button pf-m-inline pf-m-link"
1472
1622
  type="button"
1473
1623
  role="button"
1474
1624
  tabindex="0"
1475
- >This is long button text that needs to be a span so that it will wrap inline with the text around it.</span>
1625
+ >
1626
+ <span
1627
+ class="pf-v6-c-button__text"
1628
+ >This is long button text that needs to be a span so that it will wrap inline with the text around it.</span>
1629
+ </span>
1476
1630
  Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum velit elementum non.
1477
1631
 
1478
1632
  ```
@@ -1480,54 +1634,56 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1480
1634
  ### Block level
1481
1635
 
1482
1636
  ```html
1483
- <button
1484
- class="pf-v6-c-button pf-m-primary pf-m-block"
1485
- type="button"
1486
- >Block level button</button>
1637
+ <button class="pf-v6-c-button pf-m-block pf-m-primary" type="button">
1638
+ <span class="pf-v6-c-button__text">Block level button</span>
1639
+ </button>
1487
1640
 
1488
1641
  ```
1489
1642
 
1490
1643
  ### Types
1491
1644
 
1492
1645
  ```html
1493
- <button class="pf-v6-c-button pf-m-primary" type="submit">Submit</button>
1646
+ <button class="pf-v6-c-button pf-m-primary" type="submit">
1647
+ <span class="pf-v6-c-button__text">Submit</span>
1648
+ </button>
1494
1649
 
1495
- <button class="pf-v6-c-button pf-m-primary" type="reset">Reset</button>
1650
+ <button class="pf-v6-c-button pf-m-primary" type="reset">
1651
+ <span class="pf-v6-c-button__text">Reset</span>
1652
+ </button>
1496
1653
 
1497
- <button class="pf-v6-c-button pf-m-primary" type="button">Default</button>
1654
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1655
+ <span class="pf-v6-c-button__text">Default</span>
1656
+ </button>
1498
1657
 
1499
1658
  ```
1500
1659
 
1501
1660
  ### Call to action
1502
1661
 
1503
1662
  ```html
1504
- <button
1505
- class="pf-v6-c-button pf-m-primary pf-m-display-lg"
1506
- type="button"
1507
- >Call to action</button>
1663
+ <button class="pf-v6-c-button pf-m-display-lg pf-m-primary" type="button">
1664
+ <span class="pf-v6-c-button__text">Call to action</span>
1665
+ </button>
1508
1666
 
1509
- <button
1510
- class="pf-v6-c-button pf-m-secondary pf-m-display-lg"
1511
- type="button"
1512
- >Call to action</button>
1667
+ <button class="pf-v6-c-button pf-m-display-lg pf-m-secondary" type="button">
1668
+ <span class="pf-v6-c-button__text">Call to action</span>
1669
+ </button>
1513
1670
 
1514
- <button
1515
- class="pf-v6-c-button pf-m-tertiary pf-m-display-lg"
1516
- type="button"
1517
- >Call to action</button>
1671
+ <button class="pf-v6-c-button pf-m-display-lg pf-m-tertiary" type="button">
1672
+ <span class="pf-v6-c-button__text">Call to action</span>
1673
+ </button>
1518
1674
 
1519
- <button class="pf-v6-c-button pf-m-link pf-m-display-lg" type="button">
1520
- Call to action
1675
+ <button class="pf-v6-c-button pf-m-display-lg pf-m-link" type="button">
1676
+ <span class="pf-v6-c-button__text">Call to action</span>
1521
1677
  <span class="pf-v6-c-button__icon pf-m-end">
1522
1678
  <i class="fas fa-arrow-right" aria-hidden="true"></i>
1523
1679
  </span>
1524
1680
  </button>
1525
1681
 
1526
1682
  <button
1527
- class="pf-v6-c-button pf-m-link pf-m-inline pf-m-display-lg"
1683
+ class="pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link"
1528
1684
  type="button"
1529
1685
  >
1530
- Call to action
1686
+ <span class="pf-v6-c-button__text">Call to action</span>
1531
1687
  <span class="pf-v6-c-button__icon pf-m-end">
1532
1688
  <i class="fas fa-arrow-right" aria-hidden="true"></i>
1533
1689
  </span>
@@ -1537,36 +1693,42 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1537
1693
  <strong>disabled</strong>
1538
1694
  <br />
1539
1695
  <button
1540
- class="pf-v6-c-button pf-m-primary pf-m-display-lg"
1696
+ class="pf-v6-c-button pf-m-display-lg pf-m-primary"
1541
1697
  type="button"
1542
1698
  disabled
1543
- >Call to action</button>
1699
+ >
1700
+ <span class="pf-v6-c-button__text">Call to action</span>
1701
+ </button>
1544
1702
 
1545
1703
  <button
1546
- class="pf-v6-c-button pf-m-secondary pf-m-display-lg"
1704
+ class="pf-v6-c-button pf-m-display-lg pf-m-secondary"
1547
1705
  type="button"
1548
1706
  disabled
1549
- >Call to action</button>
1707
+ >
1708
+ <span class="pf-v6-c-button__text">Call to action</span>
1709
+ </button>
1550
1710
 
1551
1711
  <button
1552
- class="pf-v6-c-button pf-m-tertiary pf-m-display-lg"
1712
+ class="pf-v6-c-button pf-m-display-lg pf-m-tertiary"
1553
1713
  type="button"
1554
1714
  disabled
1555
- >Call to action</button>
1715
+ >
1716
+ <span class="pf-v6-c-button__text">Call to action</span>
1717
+ </button>
1556
1718
 
1557
- <button class="pf-v6-c-button pf-m-link pf-m-display-lg" type="button" disabled>
1558
- Call to action
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>
1559
1721
  <span class="pf-v6-c-button__icon pf-m-end">
1560
1722
  <i class="fas fa-arrow-right" aria-hidden="true"></i>
1561
1723
  </span>
1562
1724
  </button>
1563
1725
 
1564
1726
  <button
1565
- class="pf-v6-c-button pf-m-link pf-m-inline pf-m-display-lg"
1727
+ class="pf-v6-c-button pf-m-display-lg pf-m-inline pf-m-link"
1566
1728
  type="button"
1567
1729
  disabled
1568
1730
  >
1569
- Call to action
1731
+ <span class="pf-v6-c-button__text">Call to action</span>
1570
1732
  <span class="pf-v6-c-button__icon pf-m-end">
1571
1733
  <i class="fas fa-arrow-right" aria-hidden="true"></i>
1572
1734
  </span>
@@ -1577,13 +1739,12 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1577
1739
  ### Progress
1578
1740
 
1579
1741
  ```html
1580
- <button
1581
- class="pf-v6-c-button pf-m-primary pf-m-progress"
1582
- type="button"
1583
- >Primary loader</button>
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>
1584
1745
 
1585
1746
  <button
1586
- class="pf-v6-c-button pf-m-primary pf-m-in-progress pf-m-progress"
1747
+ class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-primary"
1587
1748
  type="button"
1588
1749
  >
1589
1750
  <span class="pf-v6-c-button__progress">
@@ -1596,16 +1757,16 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1596
1757
  <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
1597
1758
  </svg>
1598
1759
  </span>
1599
- Primary loading
1760
+
1761
+ <span class="pf-v6-c-button__text">Primary loading</span>
1600
1762
  </button>
1601
1763
  <br />
1602
- <button
1603
- class="pf-v6-c-button pf-m-secondary pf-m-progress"
1604
- type="button"
1605
- >Secondary loader</button>
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
+ </button>
1606
1767
 
1607
1768
  <button
1608
- class="pf-v6-c-button pf-m-secondary pf-m-in-progress pf-m-progress"
1769
+ class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-secondary"
1609
1770
  type="button"
1610
1771
  >
1611
1772
  <span class="pf-v6-c-button__progress">
@@ -1618,14 +1779,17 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1618
1779
  <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
1619
1780
  </svg>
1620
1781
  </span>
1621
- Secondary loading
1782
+
1783
+ <span class="pf-v6-c-button__text">Secondary loading</span>
1622
1784
  </button>
1623
1785
  <br />
1624
1786
  <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Upload">
1625
- <i class="fas fa-upload" aria-hidden="true"></i>
1787
+ <span class="pf-v6-c-button__icon">
1788
+ <i class="fas fa-upload" aria-hidden="true"></i>
1789
+ </span>
1626
1790
  </button>
1627
1791
 
1628
- <button class="pf-v6-c-button pf-m-plain pf-m-in-progress" type="button">
1792
+ <button class="pf-v6-c-button pf-m-in-progress pf-m-plain" type="button">
1629
1793
  <span class="pf-v6-c-button__progress">
1630
1794
  <svg
1631
1795
  class="pf-v6-c-spinner pf-m-md"
@@ -1637,16 +1801,20 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1637
1801
  </svg>
1638
1802
  </span>
1639
1803
 
1640
- <i class="fas fa-upload" aria-hidden="true"></i>
1804
+ <span class="pf-v6-c-button__icon">
1805
+ <i class="fas fa-upload" aria-hidden="true"></i>
1806
+ </span>
1641
1807
  </button>
1642
1808
  <br />
1643
1809
  <button
1644
- class="pf-v6-c-button pf-m-link pf-m-progress pf-m-inline"
1810
+ class="pf-v6-c-button pf-m-progress pf-m-inline pf-m-link"
1645
1811
  type="button"
1646
- >Inline loader</button>
1812
+ >
1813
+ <span class="pf-v6-c-button__text">Inline loader</span>
1814
+ </button>
1647
1815
 
1648
1816
  <button
1649
- class="pf-v6-c-button pf-m-link pf-m-in-progress pf-m-progress pf-m-inline"
1817
+ class="pf-v6-c-button pf-m-in-progress pf-m-progress pf-m-inline pf-m-link"
1650
1818
  type="button"
1651
1819
  >
1652
1820
  <span class="pf-v6-c-button__progress">
@@ -1659,51 +1827,41 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1659
1827
  <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" />
1660
1828
  </svg>
1661
1829
  </span>
1662
- Inline loading
1830
+
1831
+ <span class="pf-v6-c-button__text">Inline loading</span>
1663
1832
  </button>
1664
1833
 
1665
1834
  ```
1666
1835
 
1667
1836
  ### Counts
1668
1837
 
1669
- ```html isBeta
1670
- <button
1671
- class="pf-v6-c-button pf-m-primary"
1672
- type="button"
1673
- aria-label="View 7 issues"
1674
- >
1675
- View issues
1838
+ ```html
1839
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1840
+ <span class="pf-v6-c-button__text">View issues</span>
1676
1841
  <span class="pf-v6-c-button__count">
1677
- <span class="pf-v6-c-badge pf-m-unread">7</span>
1842
+ <span class="pf-v6-c-badge pf-m-unread">
1843
+ 7
1844
+ <span class="pf-v6-screen-reader">unread messages</span>
1845
+ </span>
1678
1846
  </span>
1679
1847
  </button>
1680
- <button
1681
- class="pf-v6-c-button pf-m-primary"
1682
- type="button"
1683
- aria-label="View 7 issues"
1684
- >
1685
- View issues
1848
+ <button class="pf-v6-c-button pf-m-primary" type="button">
1849
+ <span class="pf-v6-c-button__text">View issues</span>
1686
1850
  <span class="pf-v6-c-button__count">
1687
1851
  <span class="pf-v6-c-badge pf-m-read">7</span>
1688
1852
  </span>
1689
1853
  </button>
1690
-
1691
- <button
1692
- class="pf-v6-c-button pf-m-link"
1693
- type="button"
1694
- aria-label="View 7 issues"
1695
- >
1696
- View issues
1854
+ <button class="pf-v6-c-button pf-m-link" type="button">
1855
+ <span class="pf-v6-c-button__text">View issues</span>
1697
1856
  <span class="pf-v6-c-button__count">
1698
- <span class="pf-v6-c-badge pf-m-unread">7</span>
1857
+ <span class="pf-v6-c-badge pf-m-unread">
1858
+ 7
1859
+ <span class="pf-v6-screen-reader">unread messages</span>
1860
+ </span>
1699
1861
  </span>
1700
1862
  </button>
1701
- <button
1702
- class="pf-v6-c-button pf-m-link"
1703
- type="button"
1704
- aria-label="View 7 issues"
1705
- >
1706
- View issues
1863
+ <button class="pf-v6-c-button pf-m-link" type="button">
1864
+ <span class="pf-v6-c-button__text">View issues</span>
1707
1865
  <span class="pf-v6-c-button__count">
1708
1866
  <span class="pf-v6-c-badge pf-m-read">7</span>
1709
1867
  </span>
@@ -1711,49 +1869,28 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1711
1869
  <br />
1712
1870
  <strong>disabled</strong>
1713
1871
  <br />
1714
- <button
1715
- class="pf-v6-c-button pf-m-primary"
1716
- type="button"
1717
- disabled
1718
- aria-label="View 7 issues"
1719
- >
1720
- View issues
1872
+ <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
1873
+ <span class="pf-v6-c-button__text">View issues</span>
1721
1874
  <span class="pf-v6-c-button__count">
1722
- <span class="pf-v6-c-badge pf-m-unread">7</span>
1875
+ <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">7</span>
1723
1876
  </span>
1724
1877
  </button>
1725
- <button
1726
- class="pf-v6-c-button pf-m-primary"
1727
- type="button"
1728
- disabled
1729
- aria-label="View 7 issues"
1730
- >
1731
- View issues
1878
+ <button class="pf-v6-c-button pf-m-primary" type="button" disabled>
1879
+ <span class="pf-v6-c-button__text">View issues</span>
1732
1880
  <span class="pf-v6-c-button__count">
1733
- <span class="pf-v6-c-badge pf-m-read">7</span>
1881
+ <span class="pf-v6-c-badge pf-m-read pf-m-disabled">7</span>
1734
1882
  </span>
1735
1883
  </button>
1736
-
1737
- <button
1738
- class="pf-v6-c-button pf-m-link"
1739
- type="button"
1740
- disabled
1741
- aria-label="View 7 issues"
1742
- >
1743
- View issues
1884
+ <button class="pf-v6-c-button pf-m-link" type="button" disabled>
1885
+ <span class="pf-v6-c-button__text">View issues</span>
1744
1886
  <span class="pf-v6-c-button__count">
1745
- <span class="pf-v6-c-badge pf-m-unread">7</span>
1887
+ <span class="pf-v6-c-badge pf-m-unread pf-m-disabled">7</span>
1746
1888
  </span>
1747
1889
  </button>
1748
- <button
1749
- class="pf-v6-c-button pf-m-link"
1750
- type="button"
1751
- disabled
1752
- aria-label="View 7 issues"
1753
- >
1754
- View issues
1890
+ <button class="pf-v6-c-button pf-m-link" type="button" disabled>
1891
+ <span class="pf-v6-c-button__text">View issues</span>
1755
1892
  <span class="pf-v6-c-button__count">
1756
- <span class="pf-v6-c-badge pf-m-read">7</span>
1893
+ <span class="pf-v6-c-badge pf-m-read pf-m-disabled">7</span>
1757
1894
  </span>
1758
1895
  </button>
1759
1896
 
@@ -1764,11 +1901,13 @@ Sed hendrerit nisi in cursus maximus. Ut malesuada nisi turpis, in condimentum v
1764
1901
  ```html
1765
1902
  For when a plain/icon button is placed inline with text
1766
1903
  <button
1767
- class="pf-v6-c-button pf-m-plain pf-m-no-padding"
1904
+ class="pf-v6-c-button pf-m-no-padding pf-m-plain"
1768
1905
  type="button"
1769
1906
  aria-label="More info"
1770
1907
  >
1771
- <i class="fas fa-question-circle" aria-hidden="true"></i>
1908
+ <span class="pf-v6-c-button__icon">
1909
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
1910
+ </span>
1772
1911
  </button>
1773
1912
  .
1774
1913
 
@@ -1779,17 +1918,27 @@ For when a plain/icon button is placed inline with text
1779
1918
  ```html
1780
1919
  <strong>Read</strong>
1781
1920
  <br />
1782
- <button class="pf-v6-c-button pf-m-stateful pf-m-read" type="button">
1783
- <i class="fas fa-bell" aria-hidden="true"></i> 10
1784
- <span class="pf-v6-screen-reader">items</span>
1921
+ <button class="pf-v6-c-button pf-m-read pf-m-stateful" type="button">
1922
+ <span class="pf-v6-c-button__icon pf-m-start">
1923
+ <i class="fas fa-bell" aria-hidden="true"></i>
1924
+ </span>
1925
+ <span class="pf-v6-c-button__text">
1926
+ 10
1927
+ <span class="pf-v6-screen-reader">items</span>
1928
+ </span>
1785
1929
  </button>
1786
1930
 
1787
1931
  <button
1788
- class="pf-v6-c-button pf-m-stateful pf-m-read pf-m-clicked"
1932
+ class="pf-v6-c-button pf-m-read pf-m-stateful pf-m-clicked"
1789
1933
  type="button"
1790
1934
  >
1791
- <i class="fas fa-bell" aria-hidden="true"></i> 10
1792
- <span class="pf-v6-screen-reader">items</span>
1935
+ <span class="pf-v6-c-button__icon pf-m-start">
1936
+ <i class="fas fa-bell" aria-hidden="true"></i>
1937
+ </span>
1938
+ <span class="pf-v6-c-button__text">
1939
+ 10
1940
+ <span class="pf-v6-screen-reader">items</span>
1941
+ </span>
1793
1942
  </button>
1794
1943
 
1795
1944
  <br />
@@ -1797,17 +1946,27 @@ For when a plain/icon button is placed inline with text
1797
1946
 
1798
1947
  <strong>Unread</strong>
1799
1948
  <br />
1800
- <button class="pf-v6-c-button pf-m-stateful pf-m-unread" type="button">
1801
- <i class="fas fa-bell" aria-hidden="true"></i> 10
1802
- <span class="pf-v6-screen-reader">unread items</span>
1949
+ <button class="pf-v6-c-button pf-m-unread pf-m-stateful" type="button">
1950
+ <span class="pf-v6-c-button__icon pf-m-start">
1951
+ <i class="fas fa-bell" aria-hidden="true"></i>
1952
+ </span>
1953
+ <span class="pf-v6-c-button__text">
1954
+ 10
1955
+ <span class="pf-v6-screen-reader">unread items</span>
1956
+ </span>
1803
1957
  </button>
1804
1958
 
1805
1959
  <button
1806
- class="pf-v6-c-button pf-m-stateful pf-m-unread pf-m-clicked"
1960
+ class="pf-v6-c-button pf-m-unread pf-m-stateful pf-m-clicked"
1807
1961
  type="button"
1808
1962
  >
1809
- <i class="fas fa-bell" aria-hidden="true"></i> 10
1810
- <span class="pf-v6-screen-reader">unread items</span>
1963
+ <span class="pf-v6-c-button__icon pf-m-start">
1964
+ <i class="fas fa-bell" aria-hidden="true"></i>
1965
+ </span>
1966
+ <span class="pf-v6-c-button__text">
1967
+ 10
1968
+ <span class="pf-v6-screen-reader">unread items</span>
1969
+ </span>
1811
1970
  </button>
1812
1971
 
1813
1972
  <br />
@@ -1815,17 +1974,27 @@ For when a plain/icon button is placed inline with text
1815
1974
 
1816
1975
  <strong>Attention</strong>
1817
1976
  <br />
1818
- <button class="pf-v6-c-button pf-m-stateful pf-m-attention" type="button">
1819
- <i class="fas fa-bell" aria-hidden="true"></i> 10
1820
- <span class="pf-v6-screen-reader">unread items, needs attention</span>
1977
+ <button class="pf-v6-c-button pf-m-attention pf-m-stateful" type="button">
1978
+ <span class="pf-v6-c-button__icon pf-m-start">
1979
+ <i class="fas fa-bell" aria-hidden="true"></i>
1980
+ </span>
1981
+ <span class="pf-v6-c-button__text">
1982
+ 10
1983
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
1984
+ </span>
1821
1985
  </button>
1822
1986
 
1823
1987
  <button
1824
- class="pf-v6-c-button pf-m-stateful pf-m-attention pf-m-clicked"
1988
+ class="pf-v6-c-button pf-m-attention pf-m-stateful pf-m-clicked"
1825
1989
  type="button"
1826
1990
  >
1827
- <i class="fas fa-bell" aria-hidden="true"></i> 10
1828
- <span class="pf-v6-screen-reader">unread items, needs attention</span>
1991
+ <span class="pf-v6-c-button__icon pf-m-start">
1992
+ <i class="fas fa-bell" aria-hidden="true"></i>
1993
+ </span>
1994
+ <span class="pf-v6-c-button__text">
1995
+ 10
1996
+ <span class="pf-v6-screen-reader">unread items, needs attention</span>
1997
+ </span>
1829
1998
  </button>
1830
1999
 
1831
2000
  ```
@@ -1844,13 +2013,13 @@ Semantic buttons and links are important for usability as well as accessibility.
1844
2013
 
1845
2014
  | Attribute | Applied to | Outcome |
1846
2015
  | -- | -- | -- |
1847
- | `aria-pressed="true or false"` | `.pf-v6-c-button` | Indicates that the button is a toggle. When set to "true", `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle** |
2016
+ | `aria-pressed="true or false"` | `.pf-v6-c-button` | Indicates that the button is a toggle. When set to true, `pf-m-active` should also be set so that the button displays in an active state. **Required when button is a toggle** |
1848
2017
  | `aria-label="[button label text]"` | `.pf-v6-c-button.pf-m-plain` | Provides an accessible name for the button when an icon is used instead of text. **Required when icon is used with no supporting text** |
1849
2018
  | `aria-label="[descriptive text]"` | `a.pf-v6-c-button`, `span.pf-v6-c-button.pf-m-link.pf-m-inline` | The button component's text should adequately describe its purpose. If it does not, `aria-label` can provide more detailed interaction information. |
1850
2019
  | `disabled` | `button.pf-v6-c-button` | When a button element is used, indicates that it is unavailable and removes it from keyboard focus. **Required when button is disabled** |
1851
- | `aria-disabled="true"` | `button.pf-v6-c-button` | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
1852
- | `aria-disabled="true"` | `a.pf-v6-c-button.pf-m-disabled`, `span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled** |
1853
- | `aria-expanded="true"` | `.pf-v6-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required** |
2020
+ | `aria-disabled=true` | `button.pf-v6-c-button` | When a button element is used, indicates that it is unavailable but does not prevent keyboard or hover interactions. Used when a disabled button provides interactive elements like a tooltip. |
2021
+ | `aria-disabled=true` | `a.pf-v6-c-button.pf-m-disabled`, `span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, indicates that it is unavailable. **Required when element is disabled** |
2022
+ | `aria-expanded=true` | `.pf-v6-c-button.pf-m-expanded` | Indicates that the expanded content element is visible. **Required** |
1854
2023
  | `tabindex="-1"` | `a.pf-v6-c-button.pf-m-disabled`, `span.pf-v6-c-button.pf-m-link.pf-m-inline.pf-m-disabled` | When a non-button element is used, removes it from keyboard focus. **Required when element is disabled** |
1855
2024
  | `tabindex="0"` | `span.pf-v6-c-button.pf-m-link.pf-m-inline` | Inserts the span into the tab order of the page so that it is focusable. **Required when the element is a span** |
1856
2025