@patternfly/react-core 6.0.0-alpha.75 → 6.0.0-alpha.77

package/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap

@@ -417,28 +417,32 @@ exports[`should render expandable vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-v6-c-tabs__toggle-icon"
+            class="pf-v6-c-button__text"
           >
-            <svg
-              aria-hidden="true"
-              arian-hidden="true"
-              class="pf-v6-svg"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              viewBox="0 0 256 512"
-              width="1em"
+            <span
+              class="pf-v6-c-tabs__toggle-icon"
             >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </span>
-          <span
-            class="pf-v6-c-tabs__toggle-text"
-            id="generated-id-text"
-          >
-            toggle
+              <svg
+                aria-hidden="true"
+                arian-hidden="true"
+                class="pf-v6-svg"
+                fill="currentColor"
+                height="1em"
+                role="img"
+                viewBox="0 0 256 512"
+                width="1em"
+              >
+                <path
+                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                />
+              </svg>
+            </span>
+            <span
+              class="pf-v6-c-tabs__toggle-text"
+              id="generated-id-text"
+            >
+              toggle
+            </span>
           </span>
         </button>
       </div>

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -69,9 +69,12 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
       {showUtilities && (
         <TextInputGroupUtilities>
           {showClearButton && (
-            <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
-              <TimesIcon />
-            </Button>
+            <Button
+              variant="plain"
+              onClick={clearChipsAndInput}
+              aria-label="Clear button and input"
+              icon={<TimesIcon />}
+            />
           )}
         </TextInputGroupUtilities>
       )}

package/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx

@@ -28,9 +28,7 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
       {showUtilities && (
         <TextInputGroupUtilities>
           {showClearButton && (
-            <Button variant="plain" onClick={clearInput} aria-label="Clear button and input">
-              <TimesIcon />
-            </Button>
+            <Button variant="plain" onClick={clearInput} aria-label="Clear button and input" icon={<TimesIcon />} />
           )}
         </TextInputGroupUtilities>
       )}

package/src/components/Toolbar/ToolbarToggleGroup.tsx

@@ -250,9 +250,8 @@ class ToolbarToggleGroup extends React.Component<ToolbarToggleGroupProps> {
                           aria-haspopup={_isExpanded && this.isContentPopup()}
                           aria-controls={_isExpanded ? expandableContentId : undefined}
                           ref={this.toggleRef}
-                        >
-                          {toggleIcon}
-                        </Button>
+                          icon={toggleIcon}
+                        />
                       </div>
                     );
 

package/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap

@@ -77,7 +77,11 @@ exports[`Toolbar should render with custom chip content 1`] = `
               data-ouia-component-type="PF6/Button"
               data-ouia-safe="true"
               type="button"
-            />
+            >
+              <span
+                class="pf-v6-c-button__icon pf-m-start"
+              />
+            </button>
           </div>
           <div
             class="pf-v6-c-toolbar__group pf-m-filter-group"
@@ -147,19 +151,23 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         data-ouia-safe="true"
                         type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="pf-v6-svg"
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          viewBox="0 0 352 512"
-                          width="1em"
+                        <span
+                          class="pf-v6-c-button__icon pf-m-start"
                         >
-                          <path
-                            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                          />
-                        </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="pf-v6-svg"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            viewBox="0 0 352 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                            />
+                          </svg>
+                        </span>
                       </button>
                     </span>
                   </span>
@@ -191,19 +199,23 @@ exports[`Toolbar should render with custom chip content 1`] = `
                         data-ouia-safe="true"
                         type="button"
                       >
-                        <svg
-                          aria-hidden="true"
-                          class="pf-v6-svg"
-                          fill="currentColor"
-                          height="1em"
-                          role="img"
-                          viewBox="0 0 352 512"
-                          width="1em"
+                        <span
+                          class="pf-v6-c-button__icon pf-m-start"
                         >
-                          <path
-                            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                          />
-                        </svg>
+                          <svg
+                            aria-hidden="true"
+                            class="pf-v6-svg"
+                            fill="currentColor"
+                            height="1em"
+                            role="img"
+                            viewBox="0 0 352 512"
+                            width="1em"
+                          >
+                            <path
+                              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                            />
+                          </svg>
+                        </span>
                       </button>
                     </span>
                   </span>
@@ -224,19 +236,23 @@ exports[`Toolbar should render with custom chip content 1`] = `
                 id="remove_group_generated-id"
                 type="button"
               >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v6-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 512 512"
-                  width="1em"
+                <span
+                  class="pf-v6-c-button__icon pf-m-start"
                 >
-                  <path
-                    d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
-                  />
-                </svg>
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v6-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 512 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"
+                    />
+                  </svg>
+                </span>
               </button>
             </div>
           </div>
@@ -262,7 +278,11 @@ exports[`Toolbar should render with custom chip content 1`] = `
           data-ouia-safe="true"
           type="button"
         >
-          Save filters
+          <span
+            class="pf-v6-c-button__text"
+          >
+            Save filters
+          </span>
         </button>
       </div>
       <div
@@ -276,7 +296,11 @@ exports[`Toolbar should render with custom chip content 1`] = `
           data-ouia-safe="true"
           type="button"
         >
-          Clear all filters
+          <span
+            class="pf-v6-c-button__text"
+          >
+            Clear all filters
+          </span>
         </button>
       </div>
     </div>

package/src/components/Toolbar/examples/ToolbarCustomChipGroupContent.tsx

@@ -174,19 +174,13 @@ export const ToolbarCustomChipGroupContent: React.FunctionComponent = () => {
       </ToolbarToggleGroup>
       <ToolbarGroup variant="icon-button-group">
         <ToolbarItem>
-          <Button variant="plain" aria-label="edit">
-            <EditIcon />
-          </Button>
+          <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="clone">
-            <CloneIcon />
-          </Button>
+          <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="sync">
-            <SyncIcon />
-          </Button>
+          <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
         </ToolbarItem>
       </ToolbarGroup>
     </React.Fragment>

package/src/components/Toolbar/examples/ToolbarGroups.tsx

@@ -154,19 +154,13 @@ export const ToolbarGroups: React.FunctionComponent = () => {
   const iconButtonGroupItems = (
     <React.Fragment>
       <ToolbarItem>
-        <Button variant="plain" aria-label="edit">
-          <EditIcon />
-        </Button>
+        <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
       </ToolbarItem>
       <ToolbarItem>
-        <Button variant="plain" aria-label="clone">
-          <CloneIcon />
-        </Button>
+        <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
       </ToolbarItem>
       <ToolbarItem>
-        <Button variant="plain" aria-label="sync">
-          <SyncIcon />
-        </Button>
+        <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
       </ToolbarItem>
     </React.Fragment>
   );

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -210,19 +210,13 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
       </ToolbarToggleGroup>
       <ToolbarGroup variant="icon-button-group">
         <ToolbarItem>
-          <Button variant="plain" aria-label="edit">
-            <EditIcon />
-          </Button>
+          <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="clone">
-            <CloneIcon />
-          </Button>
+          <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="sync">
-            <SyncIcon />
-          </Button>
+          <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem>

package/src/components/Tooltip/examples/TooltipIcon.tsx

@@ -15,9 +15,8 @@ export const TooltipIcon: React.FunctionComponent = () => {
           variant="plain"
           id="tt-ref"
           onClick={() => setShowSuccessContent(!showSuccessContent)}
-        >
-          <CopyIcon />
-        </Button>
+          icon={<CopyIcon />}
+        />
       </Tooltip>
     </div>
   );

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -72,11 +72,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
         {
           name: 'Application 1',
           id: 'example7-App1',
-          action: (
-            <Button variant="plain" aria-label="Launch app 1">
-              <ClipboardIcon />
-            </Button>
-          ),
+          action: <Button variant="plain" aria-label="Launch app 1" icon={<ClipboardIcon />} />,
           actionProps: {
             'aria-label': 'Launch app 1'
           },
@@ -88,11 +84,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
         {
           name: 'Application 2',
           id: 'example7-App2',
-          action: (
-            <Button variant="plain" aria-label="Launch app 1">
-              <HamburgerIcon />
-            </Button>
-          ),
+          action: <Button variant="plain" aria-label="Launch app 1" icon={<HamburgerIcon />} />,
           children: [
             { name: 'Settings', id: 'example7-App2Settings' },
             {

package/src/components/Wizard/WizardHeader.tsx

@@ -40,9 +40,12 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
-        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose}>
-          <TimesIcon aria-hidden="true" />
-        </Button>
+        <Button
+          variant="plain"
+          aria-label={closeButtonAriaLabel}
+          onClick={onClose}
+          icon={<TimesIcon aria-hidden="true" />}
+        />
       </div>
     )}
     <div className={css(styles.wizardTitle)}>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -94,13 +94,14 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                   onClick={onToggleAll}
                   variant="plain"
                   aria-label={allExpanded ? 'Collapse all rows' : 'Expand all rows'}
-                >
-                  <Icon shouldMirrorRTL>
-                    <ToolbarExpandIconWrapper>
-                      <AngleRightIcon />
-                    </ToolbarExpandIconWrapper>
-                  </Icon>
-                </Button>
+                  icon={
+                    <Icon shouldMirrorRTL>
+                      <ToolbarExpandIconWrapper>
+                        <AngleRightIcon />
+                      </ToolbarExpandIconWrapper>
+                    </Icon>
+                  }
+                />
               </Tooltip>
             </ToolbarItem>
             <ToolbarItem>

package/src/demos/JumpLinks.md

@@ -72,8 +72,7 @@ ScrollspyH2 = () => {
         </Title>
         <Switch
           id="is-vertical"
-          label="Vertical"
-          labelOff="Horizontal"
+          label="Vertical jump links"
           isChecked={isVertical}
           onChange={(_event, check) => setIsVertical(check)}
         />

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -196,14 +196,10 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
               }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
             >
               <ToolbarItem>
-                <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-                  <CogIcon />
-                </Button>
+                <Button aria-label="Settings actions" variant={ButtonVariant.plain} icon={<CogIcon />} />
               </ToolbarItem>
               <ToolbarItem>
-                <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                  <QuestionCircleIcon />
-                </Button>
+                <Button aria-label="Help actions" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
               </ToolbarItem>
             </ToolbarGroup>
           </ToolbarGroup>

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -246,14 +246,10 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
               }} /** the settings and help icon buttons are only visible on desktop sizes and replaced by a kebab dropdown for other sizes */
             >
               <ToolbarItem>
-                <Button aria-label="Settings actions" variant={ButtonVariant.plain}>
-                  <CogIcon />
-                </Button>
+                <Button aria-label="Settings actions" variant={ButtonVariant.plain} icon={<CogIcon />} />
               </ToolbarItem>
               <ToolbarItem>
-                <Button aria-label="Help actions" variant={ButtonVariant.plain}>
-                  <QuestionCircleIcon />
-                </Button>
+                <Button aria-label="Help actions" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
               </ToolbarItem>
             </ToolbarGroup>
           </ToolbarGroup>

package/src/demos/PasswordGenerator.md

@@ -137,9 +137,8 @@ const PasswordGenerator: React.FunctionComponent = () => {
             variant="control"
             onClick={() => setPasswordHidden(!passwordHidden)}
             aria-label={passwordHidden ? 'Show password' : 'Hide password'}
-          >
-            {passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
-          </Button>
+            icon={passwordHidden ? <EyeIcon /> : <EyeSlashIcon />}
+          />
         </InputGroupItem>
       </InputGroup>
     </div>

package/src/demos/examples/DateTimePicker/DateTimePicker.tsx

@@ -74,9 +74,12 @@ export const DateTimePicker: React.FunctionComponent = () => {
   );
 
   const calendarButton = (
-    <Button variant="control" aria-label="Toggle the calendar" onClick={onToggleCalendar}>
-      <OutlinedCalendarAltIcon />
-    </Button>
+    <Button
+      variant="control"
+      aria-label="Toggle the calendar"
+      onClick={onToggleCalendar}
+      icon={<OutlinedCalendarAltIcon />}
+    />
   );
 
   return (

package/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsx

@@ -115,9 +115,7 @@ export const PrimaryDetailContentPadding: React.FunctionComponent = () => {
             />
           </InputGroupItem>
           <InputGroupItem>
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -115,9 +115,7 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
             />
           </InputGroupItem>
           <InputGroupItem>
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -115,9 +115,7 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
             />
           </InputGroupItem>
           <InputGroupItem>
-            <Button variant={ButtonVariant.control} aria-label="search button for search input">
-              <SearchIcon />
-            </Button>
+            <Button variant={ButtonVariant.control} aria-label="search button for search input" icon={<SearchIcon />} />
           </InputGroupItem>
         </InputGroup>
       </ToolbarItem>

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -235,9 +235,12 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
         {showUtilities && (
           <TextInputGroupUtilities>
             {showClearButton && (
-              <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button and input">
-                <TimesIcon />
-              </Button>
+              <Button
+                variant="plain"
+                onClick={clearChipsAndInput}
+                aria-label="Clear button and input"
+                icon={<TimesIcon />}
+              />
             )}
           </TextInputGroupUtilities>
         )}

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -229,9 +229,12 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
         {showUtilities && (
           <TextInputGroupUtilities>
             {showClearButton && (
-              <Button variant="plain" onClick={clearChipsAndInput} aria-label="Clear button for chips and input">
-                <TimesIcon />
-              </Button>
+              <Button
+                variant="plain"
+                onClick={clearChipsAndInput}
+                aria-label="Clear button for chips and input"
+                icon={<TimesIcon />}
+              />
             )}
           </TextInputGroupUtilities>
         )}

package/src/demos/examples/Toolbar/ConsoleLogViewerToolbar.tsx

@@ -311,8 +311,11 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
         </Select>
       </ToolbarItem>
       <ToolbarItem visibility={{ default: 'hidden', '2xl': 'visible' }}>
-        <Button variant={isPaused ? 'plain' : 'link'} onClick={pauseOrStart}>
-          {isPaused ? <PlayIcon /> : <PauseIcon />}
+        <Button
+          variant={isPaused ? 'plain' : 'link'}
+          onClick={pauseOrStart}
+          icon={isPaused ? <PlayIcon /> : <PauseIcon />}
+        >
           {isPaused ? ` Resume Log` : ` Pause Log`}
         </Button>
       </ToolbarItem>
@@ -364,9 +367,12 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       </ToolbarItem>
       <ToolbarItem visibility={{ default: 'visible', '2xl': 'hidden' }}>
         <Tooltip position="top" content={<div>{isPaused ? 'Resume log' : 'Pause log'}</div>}>
-          <Button variant="plain" onClick={pauseOrStart} aria-label={isPaused ? 'Play' : 'Paused'}>
-            {isPaused ? <PlayIcon /> : <PauseIcon />}
-          </Button>
+          <Button
+            variant="plain"
+            onClick={pauseOrStart}
+            aria-label={isPaused ? 'Play' : 'Paused'}
+            icon={isPaused ? <PlayIcon /> : <PauseIcon />}
+          />
         </Tooltip>
       </ToolbarItem>
     </React.Fragment>
@@ -465,9 +471,7 @@ export const ConsoleLogViewerToolbar: React.FC = () => {
       {rightAlignedItemsMobile}
       <ToolbarItem>
         <Tooltip position="top" content={<div>Expand</div>}>
-          <Button variant="plain" aria-label="expand">
-            <ExpandIcon />
-          </Button>
+          <Button variant="plain" aria-label="expand" icon={<ExpandIcon />} />
         </Tooltip>
       </ToolbarItem>
     </React.Fragment>

package/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap

@@ -31,19 +31,23 @@ exports[`Matches snapshot 1`] = `
         data-ouia-safe="true"
         type="button"
       >
-        <svg
-          aria-hidden="true"
-          class="pf-v6-svg"
-          fill="currentColor"
-          height="1em"
-          role="img"
-          viewBox="0 0 352 512"
-          width="1em"
+        <span
+          class="pf-v6-c-button__icon pf-m-start"
         >
-          <path
-            d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-          />
-        </svg>
+          <svg
+            aria-hidden="true"
+            class="pf-v6-svg"
+            fill="currentColor"
+            height="1em"
+            role="img"
+            viewBox="0 0 352 512"
+            width="1em"
+          >
+            <path
+              d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+            />
+          </svg>
+        </span>
       </button>
     </span>
   </span>

package/src/deprecated/components/DualListSelector/DualListSelectorListItem.tsx

@@ -81,9 +81,11 @@ export const DualListSelectorListItemBase: React.FunctionComponent<DualListSelec
           <div className={css(styles.dualListSelectorDraggable)}>
             {/** TODO once keyboard accessibility is enabled, remove `component=span`
              and add `aria-label={draggableButtonAriaLabel}` */}
-            <Button variant={ButtonVariant.plain} component="span">
-              <GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />
-            </Button>
+            <Button
+              variant={ButtonVariant.plain}
+              component="span"
+              icon={<GripVerticalIcon style={{ verticalAlign: '-0.3em' }} />}
+            />
           </div>
         )}
         <span className={css(styles.dualListSelectorItem)}>