@patternfly/patternfly 6.0.0-alpha.165 → 6.0.0-alpha.166

package/components/Button/button.css

@@ -1,5 +1,8 @@
 :where(:root, .pf-v6-c-button) {
-  --pf-v6-c-button--Display: inline-block;
+  --pf-v6-c-button--Display: inline-flex;
+  --pf-v6-c-button--AlignItems: baseline;
+  --pf-v6-c-button--JustifyContent: center;
+  --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -80,6 +83,7 @@
   --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
   --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
+  --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
   --pf-v6-c-button--m-link--m-inline--FontSize: initial;
   --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
   --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -92,6 +96,9 @@
   --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-button--span--m-link--m-inline--Display: inline;
+  --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -104,7 +111,8 @@
   --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
   --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -199,8 +207,10 @@
   --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button__icon--MarginInlineStart: 0;
+  --pf-v6-c-button__icon--MarginInlineEnd: 0;
+  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
+  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
   --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
@@ -215,16 +225,17 @@
   --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
   --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
-  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-block--Display: flex;
+  --pf-v6-c-button--m-block--Width: 100%;
 }
 
 .pf-v6-c-button {
   position: relative;
   display: var(--pf-v6-c-button--Display);
-  flex: var(--pf-v6-c-button--Flex, initial);
-  align-items: var(--pf-v6-c-button--AlignItems, initial);
-  justify-content: var(--pf-v6-c-button--JustifyContent, initial);
+  gap: var(--pf-v6-c-button--Gap);
+  align-items: var(--pf-v6-c-button--AlignItems);
+  justify-content: var(--pf-v6-c-button--JustifyContent);
   padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -323,6 +334,7 @@
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
 }
 .pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
   --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
   --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -338,11 +350,16 @@
   --pf-v6-c-button--disabled--BackgroundColor: transparent;
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
   --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
-  display: inline;
   text-align: start;
   white-space: normal;
   outline-offset: 0.125rem;
 }
+span.pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
+  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
+  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+}
+
 .pf-v6-c-button.pf-m-link.pf-m-danger {
   --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
   --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -448,6 +465,7 @@
   --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
   --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
+  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
   --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
   --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
@@ -466,8 +484,8 @@
   min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
 }
 .pf-v6-c-button.pf-m-block {
-  display: block;
-  width: 100%;
+  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
+  width: var(--pf-v6-c-button--m-block--Width);
 }
 .pf-v6-c-button.pf-m-small {
   --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -534,13 +552,15 @@
 }
 
 .pf-v6-c-button__icon {
+  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
+  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
   color: var(--pf-v6-c-button__icon--Color);
 }
 .pf-v6-c-button__icon.pf-m-start {
-  margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
+  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
 }
 .pf-v6-c-button__icon.pf-m-end {
-  margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
+  --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
 }
 
 .pf-v6-c-button__progress {
@@ -558,5 +578,4 @@
 .pf-v6-c-button__count {
   display: inline-flex;
   align-items: center;
-  margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
 }

package/components/Button/button.scss

@@ -1,7 +1,10 @@
 @use '../../sass-utilities' as *;
 
 :where(:root, .#{$button}) {
-  --#{$button}--Display: inline-block;
+  --#{$button}--Display: inline-flex;
+  --#{$button}--AlignItems: baseline;
+  --#{$button}--JustifyContent: center;
+  --#{$button}--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --#{$button}--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --#{$button}--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --#{$button}--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -98,6 +101,7 @@
   --#{$button}--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
 
   // Link inline
+  --#{$button}--m-link--m-inline--Display: inline-flex;
   --#{$button}--m-link--m-inline--FontSize: initial;
   --#{$button}--m-link--m-inline--LineHeight: initial;
   --#{$button}--m-link--m-inline--FontWeight: initial;
@@ -110,6 +114,9 @@
   --#{$button}--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--#{$button}--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --#{$button}--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
   --#{$button}--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+  --#{$button}--span--m-link--m-inline--Display: inline;
+  --#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+  --#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
 
   // Plain
   --#{$button}--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
@@ -124,7 +131,8 @@
   --#{$button}--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --#{$button}--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --#{$button}--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --#{$button}--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --#{$button}--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
   --#{$button}--m-plain--disabled--BackgroundColor: transparent;
   --#{$button}--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --#{$button}--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -243,8 +251,10 @@
   --#{$button}__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --#{$button}--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
-  --#{$button}__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --#{$button}__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --#{$button}__icon--MarginInlineStart: 0;
+  --#{$button}__icon--MarginInlineEnd: 0;
+  --#{$button}__icon--m-start--MarginInlineEnd: 0;
+  --#{$button}__icon--m-end--MarginInlineStart: 0;
 
   // Progress
   --#{$button}__progress--width: calc(var(--#{$spinner}--m-md--diameter) + var(--pf-t--global--spacer--sm)); // matches medium spinner diameter plus a spacer
@@ -263,16 +273,19 @@
   --#{$button}--m-in-progress--m-plain__progress--TranslateX: -50%;
 
   // Count
-  --#{$button}__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --#{$button}--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+
+  // Block
+  --#{$button}--m-block--Display: flex;
+  --#{$button}--m-block--Width: 100%;
 }
 
 .#{$button} {
   position: relative;
   display: var(--#{$button}--Display);
-  flex: var(--#{$button}--Flex, initial);
-  align-items: var(--#{$button}--AlignItems, initial);
-  justify-content: var(--#{$button}--JustifyContent, initial);
+  gap: var(--#{$button}--Gap);
+  align-items: var(--#{$button}--AlignItems);
+  justify-content: var(--#{$button}--JustifyContent);
   padding-block-start: var(--#{$button}--PaddingBlockStart);
   padding-block-end: var(--#{$button}--PaddingBlockEnd);
   padding-inline-start: var(--#{$button}--PaddingInlineStart);
@@ -381,6 +394,13 @@
     --#{$button}--m-clicked__icon--Color: var(--#{$button}--m-link--m-clicked__icon--Color);
 
     &.pf-m-inline {
+      @at-root span#{&} {
+        --#{$button}--m-link--m-inline--Display: var(--#{$button}--span--m-link--m-inline--Display);
+        --#{$button}__icon--m-start--MarginInlineEnd: var(--#{$button}--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
+        --#{$button}__icon--m-end--MarginInlineStart: var(--#{$button}--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+      }
+
+      --#{$button}--Display: var(--#{$button}--m-link--m-inline--Display);
       --#{$button}--FontSize: var(--#{$button}--m-link--m-inline--FontSize);
       --#{$button}--LineHeight: var(--#{$button}--m-link--m-inline--LineHeight);
       --#{$button}--FontWeight: var(--#{$button}--m-link--m-inline--FontWeight);
@@ -397,7 +417,6 @@
       --#{$button}--disabled--Color: var(--#{$button}--m-link--m-inline--disabled--Color);
       --#{$button}--disabled__icon--Color: var(--#{$button}--m-link--m-inline--disabled__icon--Color);
 
-      display: inline;
       text-align: start;
       white-space: normal;
       outline-offset: #{pf-size-prem(2px)};
@@ -526,6 +545,7 @@
     --#{$button}--m-clicked--Color: var(--#{$button}--m-plain--m-clicked--Color);
     --#{$button}--m-clicked--BackgroundColor: var(--#{$button}--m-plain--m-clicked--BackgroundColor);
     --#{$button}--disabled--Color: var(--#{$button}--m-plain--disabled--Color);
+    --#{$button}--disabled__icon--Color: var(--#{$button}--m-plain--disabled__icon--Color);
     --#{$button}--disabled--BackgroundColor: var(--#{$button}--m-plain--disabled--BackgroundColor);
     --#{$button}--m-small--PaddingBlockStart: var(--#{$button}--m-plain--m-small--PaddingBlockStart);
     --#{$button}--m-small--PaddingInlineEnd: var(--#{$button}--m-plain--m-small--PaddingInlineEnd);
@@ -548,8 +568,9 @@
   }
 
   &.pf-m-block {
-    display: block;
-    width: 100%;
+    --#{$button}--Display: var(--#{$button}--m-block--Display);
+
+    width: var(--#{$button}--m-block--Width);
   }
 
   &.pf-m-small {
@@ -638,14 +659,16 @@
 }
 
 .#{$button}__icon {
+  margin-inline-start: var(--#{$button}__icon--MarginInlineStart);
+  margin-inline-end: var(--#{$button}__icon--MarginInlineEnd);
   color: var(--#{$button}__icon--Color);
 
   &.pf-m-start {
-    margin-inline-end: var(--#{$button}__icon--m-start--MarginInlineEnd);
+    --#{$button}__icon--MarginInlineEnd: var(--#{$button}__icon--m-start--MarginInlineEnd);
   }
 
   &.pf-m-end {
-    margin-inline-start: var(--#{$button}__icon--m-end--MarginInlineStart);
+    --#{$button}__icon--MarginInlineStart: var(--#{$button}__icon--m-end--MarginInlineStart);
   }
 }
 
@@ -665,5 +688,4 @@
 .#{$button}__count {
   display: inline-flex;
   align-items: center;
-  margin-inline-start: var(--#{$button}__count--MarginInlineStart);
 }

package/components/_index.css

@@ -1360,7 +1360,10 @@ button.pf-v6-c-breadcrumb__link {
 }
 
 :where(:root, .pf-v6-c-button) {
-  --pf-v6-c-button--Display: inline-block;
+  --pf-v6-c-button--Display: inline-flex;
+  --pf-v6-c-button--AlignItems: baseline;
+  --pf-v6-c-button--JustifyContent: center;
+  --pf-v6-c-button--Gap: var(--pf-t--global--spacer--gap--text-to-element--default);
   --pf-v6-c-button--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
   --pf-v6-c-button--PaddingBlockEnd: var(--pf-t--global--spacer--sm);
@@ -1441,6 +1444,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-link--m-danger--m-clicked--Color: var(--pf-t--global--text--color--status--danger--clicked);
   --pf-v6-c-button--m-link--m-danger--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
   --pf-v6-c-button--m-link--m-danger--m-clicked__icon--Color: var(--pf-t--global--text--color--status--danger--clicked);
+  --pf-v6-c-button--m-link--m-inline--Display: inline-flex;
   --pf-v6-c-button--m-link--m-inline--FontSize: initial;
   --pf-v6-c-button--m-link--m-inline--LineHeight: initial;
   --pf-v6-c-button--m-link--m-inline--FontWeight: initial;
@@ -1453,6 +1457,9 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-link--m-inline--m-in-progress--PaddingInlineStart: calc(var(--pf-v6-c-button--m-link--m-inline__progress--InsetInlineStart) + 1rem + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button--m-link--m-inline--disabled--Color: var(--pf-t--global--text--color--disabled);
   --pf-v6-c-button--m-link--m-inline--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-button--span--m-link--m-inline--Display: inline;
+  --pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-plain--BorderRadius: var(--pf-t--global--border--radius--small);
   --pf-v6-c-button--m-plain--PaddingBlockStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--m-plain--PaddingInlineEnd: var(--pf-t--global--spacer--sm);
@@ -1465,7 +1472,8 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--action--plain--hover);
   --pf-v6-c-button--m-plain--m-clicked--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--action--plain--clicked);
-  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--icon--color--disabled);
+  --pf-v6-c-button--m-plain--disabled--Color: var(--pf-t--global--text--color--disabled);
+  --pf-v6-c-button--m-plain--disabled__icon--Color: var(--pf-t--global--icon--color--disabled);
   --pf-v6-c-button--m-plain--disabled--BackgroundColor: transparent;
   --pf-v6-c-button--m-plain--m-small--PaddingBlockStart: var(--pf-t--global--spacer--xs);
   --pf-v6-c-button--m-plain--m-small--PaddingInlineEnd: var(--pf-t--global--spacer--xs);
@@ -1560,8 +1568,10 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--hover__icon--Color: var(--pf-t--global--icon--color--regular);
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-t--global--icon--color--regular);
-  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-t--global--spacer--xs);
-  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-t--global--spacer--xs);
+  --pf-v6-c-button__icon--MarginInlineStart: 0;
+  --pf-v6-c-button__icon--MarginInlineEnd: 0;
+  --pf-v6-c-button__icon--m-start--MarginInlineEnd: 0;
+  --pf-v6-c-button__icon--m-end--MarginInlineStart: 0;
   --pf-v6-c-button__progress--width: calc(var(--pf-v6-c-spinner--m-md--diameter) + var(--pf-t--global--spacer--sm));
   --pf-v6-c-button__progress--Opacity: 0;
   --pf-v6-c-button__progress--TranslateY: -50%;
@@ -1576,16 +1586,17 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-in-progress--m-plain--Color: var(--pf-v6-c-spinner--Color);
   --pf-v6-c-button--m-in-progress--m-plain__progress--InsetInlineStart: 50%;
   --pf-v6-c-button--m-in-progress--m-plain__progress--TranslateX: -50%;
-  --pf-v6-c-button__count--MarginInlineStart: var(--pf-t--global--spacer--sm);
   --pf-v6-c-button--m-primary__c-badge--BorderColor: var(--pf-t--global--border--color--default);
+  --pf-v6-c-button--m-block--Display: flex;
+  --pf-v6-c-button--m-block--Width: 100%;
 }
 
 .pf-v6-c-button {
   position: relative;
   display: var(--pf-v6-c-button--Display);
-  flex: var(--pf-v6-c-button--Flex, initial);
-  align-items: var(--pf-v6-c-button--AlignItems, initial);
-  justify-content: var(--pf-v6-c-button--JustifyContent, initial);
+  gap: var(--pf-v6-c-button--Gap);
+  align-items: var(--pf-v6-c-button--AlignItems);
+  justify-content: var(--pf-v6-c-button--JustifyContent);
   padding-block-start: var(--pf-v6-c-button--PaddingBlockStart);
   padding-block-end: var(--pf-v6-c-button--PaddingBlockEnd);
   padding-inline-start: var(--pf-v6-c-button--PaddingInlineStart);
@@ -1684,6 +1695,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-clicked__icon--Color: var(--pf-v6-c-button--m-link--m-clicked__icon--Color);
 }
 .pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-link--m-inline--Display);
   --pf-v6-c-button--FontSize: var(--pf-v6-c-button--m-link--m-inline--FontSize);
   --pf-v6-c-button--LineHeight: var(--pf-v6-c-button--m-link--m-inline--LineHeight);
   --pf-v6-c-button--FontWeight: var(--pf-v6-c-button--m-link--m-inline--FontWeight);
@@ -1699,11 +1711,16 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--disabled--BackgroundColor: transparent;
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-link--m-inline--disabled--Color);
   --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-link--m-inline--disabled__icon--Color);
-  display: inline;
   text-align: start;
   white-space: normal;
   outline-offset: 0.125rem;
 }
+span.pf-v6-c-button.pf-m-link.pf-m-inline {
+  --pf-v6-c-button--m-link--m-inline--Display: var(--pf-v6-c-button--span--m-link--m-inline--Display);
+  --pf-v6-c-button__icon--m-start--MarginInlineEnd: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-start--MarginInlineEnd);
+  --pf-v6-c-button__icon--m-end--MarginInlineStart: var(--pf-v6-c-button--span--m-link--m-inline__icon--m-end--MarginInlineStart);
+}
+
 .pf-v6-c-button.pf-m-link.pf-m-danger {
   --pf-v6-c-button--m-danger--Color: var(--pf-v6-c-button--m-link--m-danger--Color);
   --pf-v6-c-button--m-danger--BackgroundColor: var(--pf-v6-c-button--m-link--m-danger--BackgroundColor);
@@ -1809,6 +1826,7 @@ button.pf-v6-c-breadcrumb__link {
   --pf-v6-c-button--m-clicked--Color: var(--pf-v6-c-button--m-plain--m-clicked--Color);
   --pf-v6-c-button--m-clicked--BackgroundColor: var(--pf-v6-c-button--m-plain--m-clicked--BackgroundColor);
   --pf-v6-c-button--disabled--Color: var(--pf-v6-c-button--m-plain--disabled--Color);
+  --pf-v6-c-button--disabled__icon--Color: var(--pf-v6-c-button--m-plain--disabled__icon--Color);
   --pf-v6-c-button--disabled--BackgroundColor: var(--pf-v6-c-button--m-plain--disabled--BackgroundColor);
   --pf-v6-c-button--m-small--PaddingBlockStart: var(--pf-v6-c-button--m-plain--m-small--PaddingBlockStart);
   --pf-v6-c-button--m-small--PaddingInlineEnd: var(--pf-v6-c-button--m-plain--m-small--PaddingInlineEnd);
@@ -1827,8 +1845,8 @@ button.pf-v6-c-breadcrumb__link {
   min-width: var(--pf-v6-c-button--m-plain--m-no-padding--MinWidth);
 }
 .pf-v6-c-button.pf-m-block {
-  display: block;
-  width: 100%;
+  --pf-v6-c-button--Display: var(--pf-v6-c-button--m-block--Display);
+  width: var(--pf-v6-c-button--m-block--Width);
 }
 .pf-v6-c-button.pf-m-small {
   --pf-v6-c-button--PaddingBlockStart: var(--pf-v6-c-button--m-small--PaddingBlockStart);
@@ -1895,13 +1913,15 @@ button.pf-v6-c-breadcrumb__link {
 }
 
 .pf-v6-c-button__icon {
+  margin-inline-start: var(--pf-v6-c-button__icon--MarginInlineStart);
+  margin-inline-end: var(--pf-v6-c-button__icon--MarginInlineEnd);
   color: var(--pf-v6-c-button__icon--Color);
 }
 .pf-v6-c-button__icon.pf-m-start {
-  margin-inline-end: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
+  --pf-v6-c-button__icon--MarginInlineEnd: var(--pf-v6-c-button__icon--m-start--MarginInlineEnd);
 }
 .pf-v6-c-button__icon.pf-m-end {
-  margin-inline-start: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
+  --pf-v6-c-button__icon--MarginInlineStart: var(--pf-v6-c-button__icon--m-end--MarginInlineStart);
 }
 
 .pf-v6-c-button__progress {
@@ -1919,7 +1939,6 @@ button.pf-v6-c-breadcrumb__link {
 .pf-v6-c-button__count {
   display: inline-flex;
   align-items: center;
-  margin-inline-start: var(--pf-v6-c-button__count--MarginInlineStart);
 }
 
 :where(:root, .pf-v6-c-calendar-month) {

package/docs/components/AboutModalBox/examples/AboutModalBox.md

@@ -24,7 +24,9 @@ cssPrefix: pf-v6-c-about-modal-box
       type="button"
       aria-label="Close dialog"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__text">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-about-modal-box__header">

package/docs/components/ActionList/examples/ActionList.md

@@ -10,10 +10,14 @@ cssPrefix: pf-v6-c-action-list
 <div class="pf-v6-c-action-list">
   <div class="pf-v6-c-action-list__group">
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Next</span>
+      </button>
     </div>
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <span class="pf-v6-c-button__text">Back</span>
+      </button>
     </div>
   </div>
 </div>
@@ -21,10 +25,14 @@ cssPrefix: pf-v6-c-action-list
 <div class="pf-v6-c-action-list">
   <div class="pf-v6-c-action-list__group">
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Next</span>
+      </button>
     </div>
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <span class="pf-v6-c-button__text">Back</span>
+      </button>
     </div>
     <div class="pf-v6-c-action-list__item">
       <button
@@ -32,7 +40,9 @@ cssPrefix: pf-v6-c-action-list
         type="button"
         aria-label="Toggle"
       >
-        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__text">
+          <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -46,12 +56,16 @@ cssPrefix: pf-v6-c-action-list
 <div class="pf-v6-c-action-list pf-m-icons">
   <div class="pf-v6-c-action-list__item">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Close">
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__text">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-action-list__item">
     <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Toggle">
-      <i class="fas fa-check" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__text">
+        <i class="fas fa-check" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
 </div>
@@ -64,7 +78,9 @@ cssPrefix: pf-v6-c-action-list
         type="button"
         aria-label="Close"
       >
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__text">
+          <i class="fas fa-times" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
     <div class="pf-v6-c-action-list__item">
@@ -73,7 +89,9 @@ cssPrefix: pf-v6-c-action-list
         type="button"
         aria-label="Toggle"
       >
-        <i class="fas fa-check" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__text">
+          <i class="fas fa-check" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -84,7 +102,9 @@ cssPrefix: pf-v6-c-action-list
         type="button"
         aria-label="Close"
       >
-        <i class="fas fa-times" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__text">
+          <i class="fas fa-times" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
     <div class="pf-v6-c-action-list__item">
@@ -93,7 +113,9 @@ cssPrefix: pf-v6-c-action-list
         type="button"
         aria-label="Toggle"
       >
-        <i class="fas fa-check" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__text">
+          <i class="fas fa-check" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -107,18 +129,26 @@ cssPrefix: pf-v6-c-action-list
 <div class="pf-v6-c-action-list">
   <div class="pf-v6-c-action-list__group">
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Next</span>
+      </button>
     </div>
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <span class="pf-v6-c-button__text">Back</span>
+      </button>
     </div>
   </div>
   <div class="pf-v6-c-action-list__group">
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-primary" type="button">Submit</button>
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Submit</span>
+      </button>
     </div>
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
+      <button class="pf-v6-c-button pf-m-link" type="button">
+        <span class="pf-v6-c-button__text">Cancel</span>
+      </button>
     </div>
   </div>
 </div>
@@ -132,10 +162,14 @@ In modals, forms, data lists
 <div class="pf-v6-c-action-list">
   <div class="pf-v6-c-action-list__group">
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-primary" type="button">Save</button>
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Save</span>
+      </button>
     </div>
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
+      <button class="pf-v6-c-button pf-m-link" type="button">
+        <span class="pf-v6-c-button__text">Cancel</span>
+      </button>
     </div>
   </div>
 </div>
@@ -143,13 +177,19 @@ In modals, forms, data lists
 <div class="pf-v6-c-action-list">
   <div class="pf-v6-c-action-list__group">
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-primary" type="button">Next</button>
+      <button class="pf-v6-c-button pf-m-primary" type="button">
+        <span class="pf-v6-c-button__text">Next</span>
+      </button>
     </div>
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-secondary" type="button">Back</button>
+      <button class="pf-v6-c-button pf-m-secondary" type="button">
+        <span class="pf-v6-c-button__text">Back</span>
+      </button>
     </div>
     <div class="pf-v6-c-action-list__item">
-      <button class="pf-v6-c-button pf-m-link" type="button">Cancel</button>
+      <button class="pf-v6-c-button pf-m-link" type="button">
+        <span class="pf-v6-c-button__text">Cancel</span>
+      </button>
     </div>
   </div>
 </div>