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

package/components/_index.scss

@@ -0,0 +1,82 @@
+@use "./AboutModalBox/about-modal-box";
+@use "./Accordion/accordion";
+@use "./ActionList/action-list";
+@use "./Alert/alert";
+@use "./Alert/alert-group";
+@use "./Avatar/avatar";
+@use "./Backdrop/backdrop";
+@use "./BackgroundImage/background-image";
+@use "./BackToTop/back-to-top";
+@use "./Badge/badge";
+@use "./Banner/banner";
+@use "./Brand/brand";
+@use "./Breadcrumb/breadcrumb";
+@use "./Button/button";
+@use "./CalendarMonth/calendar-month";
+@use "./Card/card";
+@use "./Check/check";
+@use "./ClipboardCopy/clipboard-copy";
+@use "./CodeBlock/code-block";
+@use "./CodeEditor/code-editor";
+@use "./Content/content";
+@use "./DataList/data-list";
+@use "./DescriptionList/description-list";
+@use "./DragDrop/drag-drop";
+@use "./DualListSelector/dual-list-selector";
+@use "./DatePicker/date-picker";
+@use "./Divider/divider";
+@use "./Drawer/drawer";
+@use "./EmptyState/empty-state";
+@use "./ExpandableSection/expandable-section";
+@use "./FileUpload/file-upload";
+@use "./Form/form";
+@use "./FormControl/form-control";
+@use "./Hint/hint";
+@use "./HelperText/helper-text";
+@use "./Icon/icon";
+@use "./InlineEdit/inline-edit";
+@use "./InputGroup/input-group";
+@use "./JumpLinks/jump-links";
+@use "./Label/label";
+@use "./Label/label-group";
+@use "./List/list";
+@use "./Login/login";
+@use "./Masthead/masthead";
+@use "./Menu/menu";
+@use "./MenuToggle/menu-toggle";
+@use "./ModalBox/modal-box";
+@use "./MultipleFileUpload/multiple-file-upload";
+@use "./Nav/nav";
+@use "./NotificationDrawer/notification-drawer";
+@use "./OverflowMenu/overflow-menu";
+@use "./Page/page";
+@use "./Pagination/pagination";
+@use "./Panel/panel";
+@use "./Popover/popover";
+@use "./Progress/progress";
+@use "./ProgressStepper/progress-stepper";
+@use "./Radio/radio";
+@use "./Sidebar/sidebar";
+@use "./SimpleList/simple-list";
+@use "./Skeleton/skeleton";
+@use "./SkipToContent/skip-to-content";
+@use "./Slider/slider";
+@use "./Spinner/spinner";
+@use "./Switch/switch";
+@use "./TabContent/tab-content";
+@use "./Table/table-grid";
+@use "./Table/table";
+@use "./Table/table-scrollable";
+@use "./Table/table-tree-view";
+@use "./Tabs/tabs";
+@use "./TextInputGroup/text-input-group";
+@use "./Tile/tile";
+@use "./Timestamp/timestamp";
+@use "./Title/title";
+@use "./ToggleGroup/toggle-group";
+@use "./Toolbar/toolbar";
+@use "./Tooltip/tooltip";
+@use "./Truncate/truncate";
+@use "./NumberInput/number-input";
+@use "./TreeView/tree-view";
+@use "./Wizard/wizard";

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__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-about-modal-box__header">

package/docs/components/Accordion/examples/Accordion.md

@@ -578,7 +578,7 @@ cssPrefix: pf-v6-c-accordion
 
 ### Toggle icon at start
 
-```html isBeta
+```html
 <div class="pf-v6-c-accordion pf-m-toggle-start">
   <div class="pf-v6-c-accordion__item">
     <h3>

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,18 +25,24 @@ 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
         class="pf-v6-c-button pf-m-plain"
         type="button"
-        aria-label="Kebab"
+        aria-label="Toggle"
       >
-        <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <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__icon">
+        <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="Kebab">
-      <i class="fas fa-check" aria-hidden="true"></i>
+    <button class="pf-v6-c-button pf-m-plain" type="button" aria-label="Toggle">
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-check" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
 </div>
@@ -64,16 +78,20 @@ 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__icon pf-m-start">
+          <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="Kebab"
+        aria-label="Toggle"
       >
-        <i class="fas fa-check" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <i class="fas fa-check" aria-hidden="true"></i>
+        </span>
       </button>
     </div>
   </div>
@@ -84,16 +102,20 @@ 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__icon">
+          <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="Kebab"
+        aria-label="Toggle"
       >
-        <i class="fas fa-check" aria-hidden="true"></i>
+        <span class="pf-v6-c-button__icon">
+          <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>

package/docs/components/Alert/examples/Alert.md

@@ -76,18 +76,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__description">
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </div>
   <div class="pf-v6-c-alert__action-group">
-    <button
-      class="pf-v6-c-button pf-m-link pf-m-inline"
-      type="button"
-    >View details</button>
-    <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">View details</span>
+    </button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">Ignore</span>
+    </button>
   </div>
 </div>
 <br />
@@ -105,7 +108,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__description">
@@ -130,15 +135,18 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__action-group">
-    <button
-      class="pf-v6-c-button pf-m-link pf-m-inline"
-      type="button"
-    >View details</button>
-    <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">View details</span>
+    </button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">Ignore</span>
+    </button>
   </div>
 </div>
 <br />
@@ -156,7 +164,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
 </div>
@@ -295,18 +305,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__description">
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </div>
   <div class="pf-v6-c-alert__action-group">
-    <button
-      class="pf-v6-c-button pf-m-link pf-m-inline"
-      type="button"
-    >View details</button>
-    <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">View details</span>
+    </button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">Ignore</span>
+    </button>
   </div>
 </div>
 <br />
@@ -324,7 +337,9 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__description">
@@ -349,15 +364,18 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__action-group">
-    <button
-      class="pf-v6-c-button pf-m-link pf-m-inline"
-      type="button"
-    >View details</button>
-    <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">View details</span>
+    </button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">Ignore</span>
+    </button>
   </div>
 </div>
 <br />
@@ -426,14 +444,15 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
   <div class="pf-v6-c-alert__toggle">
     <button
       class="pf-v6-c-button pf-m-plain"
-      type="button"
-      aria-expanded="false"
       id="alert-expandable-example-1-toggle"
-      aria-label="Details"
+      type="button"
       aria-labelledby="alert-expandable-example-1-title alert-expandable-example-1-toggle"
+      aria-label="Details"
     >
-      <span class="pf-v6-c-alert__toggle-icon">
-        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <span class="pf-v6-c-alert__toggle-icon">
+          <i class="fas fa-angle-right" aria-hidden="true"></i>
+        </span>
       </span>
     </button>
   </div>
@@ -450,18 +469,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__description" hidden>
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </div>
   <div class="pf-v6-c-alert__action-group">
-    <button
-      class="pf-v6-c-button pf-m-link pf-m-inline"
-      type="button"
-    >View details</button>
-    <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">View details</span>
+    </button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">Ignore</span>
+    </button>
   </div>
 </div>
 <br />
@@ -471,15 +493,17 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
 >
   <div class="pf-v6-c-alert__toggle">
     <button
-      class="pf-v6-c-button pf-m-plain"
+      class="pf-v6-c-button pf-m-expanded pf-m-plain"
+      id="alert-expandable-example-2-toggle"
       type="button"
       aria-expanded="true"
-      id="alert-expandable-example-2-toggle"
-      aria-label="Details"
       aria-labelledby="alert-expandable-example-2-title alert-expandable-example-2-toggle"
+      aria-label="Details"
     >
-      <span class="pf-v6-c-alert__toggle-icon">
-        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <span class="pf-v6-c-alert__toggle-icon">
+          <i class="fas fa-angle-right" aria-hidden="true"></i>
+        </span>
       </span>
     </button>
   </div>
@@ -496,18 +520,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__description">
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </div>
   <div class="pf-v6-c-alert__action-group">
-    <button
-      class="pf-v6-c-button pf-m-link pf-m-inline"
-      type="button"
-    >View details</button>
-    <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">View details</span>
+    </button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">Ignore</span>
+    </button>
   </div>
 </div>
 <br />
@@ -518,14 +545,15 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
   <div class="pf-v6-c-alert__toggle">
     <button
       class="pf-v6-c-button pf-m-plain"
-      type="button"
-      aria-expanded="false"
       id="alert-expandable-example-3-toggle"
-      aria-label="Details"
+      type="button"
       aria-labelledby="alert-expandable-example-3-title alert-expandable-example-3-toggle"
+      aria-label="Details"
     >
-      <span class="pf-v6-c-alert__toggle-icon">
-        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <span class="pf-v6-c-alert__toggle-icon">
+          <i class="fas fa-angle-right" aria-hidden="true"></i>
+        </span>
       </span>
     </button>
   </div>
@@ -542,18 +570,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__description" hidden>
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </div>
   <div class="pf-v6-c-alert__action-group">
-    <button
-      class="pf-v6-c-button pf-m-link pf-m-inline"
-      type="button"
-    >View details</button>
-    <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">View details</span>
+    </button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">Ignore</span>
+    </button>
   </div>
 </div>
 <br />
@@ -563,15 +594,17 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
 >
   <div class="pf-v6-c-alert__toggle">
     <button
-      class="pf-v6-c-button pf-m-plain"
+      class="pf-v6-c-button pf-m-expanded pf-m-plain"
+      id="alert-expandable-example-4-toggle"
       type="button"
       aria-expanded="true"
-      id="alert-expandable-example-4-toggle"
-      aria-label="Details"
       aria-labelledby="alert-expandable-example-4-title alert-expandable-example-4-toggle"
+      aria-label="Details"
     >
-      <span class="pf-v6-c-alert__toggle-icon">
-        <i class="fas fa-angle-right" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <span class="pf-v6-c-alert__toggle-icon">
+          <i class="fas fa-angle-right" aria-hidden="true"></i>
+        </span>
       </span>
     </button>
   </div>
@@ -588,18 +621,21 @@ cssPrefix: ['pf-v6-c-alert','pf-v6-c-alert-group']
       type="button"
       aria-label="Close success alert: Success alert title"
     >
-      <i class="fas fa-times" aria-hidden="true"></i>
+      <span class="pf-v6-c-button__icon">
+        <i class="fas fa-times" aria-hidden="true"></i>
+      </span>
     </button>
   </div>
   <div class="pf-v6-c-alert__description">
     <p>Success alert description. This should tell the user more information about the alert.</p>
   </div>
   <div class="pf-v6-c-alert__action-group">
-    <button
-      class="pf-v6-c-button pf-m-link pf-m-inline"
-      type="button"
-    >View details</button>
-    <button class="pf-v6-c-button pf-m-link pf-m-inline" type="button">Ignore</button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">View details</span>
+    </button>
+    <button class="pf-v6-c-button pf-m-inline pf-m-link" type="button">
+      <span class="pf-v6-c-button__text">Ignore</span>
+    </button>
   </div>
 </div>
 
@@ -697,7 +733,9 @@ For sighted users, interactive elements can be included in this message in one o
           type="button"
           aria-label="Close success alert: Success alert title"
         >
-          <i class="fas fa-times" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
     </div>
@@ -718,7 +756,9 @@ For sighted users, interactive elements can be included in this message in one o
           type="button"
           aria-label="Close success alert: Success alert title"
         >
-          <i class="fas fa-times" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
     </div>
@@ -745,7 +785,9 @@ For sighted users, interactive elements can be included in this message in one o
           type="button"
           aria-label="Close success alert: Success alert title"
         >
-          <i class="fas fa-times" aria-hidden="true"></i>
+          <span class="pf-v6-c-button__icon">
+            <i class="fas fa-times" aria-hidden="true"></i>
+          </span>
         </button>
       </div>
     </div>