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

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -226,9 +226,12 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
           </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
-            <TimesIcon aria-hidden />
-          </Button>
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<TimesIcon aria-hidden />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -219,9 +219,12 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
           aria-controls="select-multi-typeahead-checkbox-listbox"
         />
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
-            <TimesIcon aria-hidden />
-          </Button>
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<TimesIcon aria-hidden />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -239,9 +239,12 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
           </LabelGroup>
         </TextInputGroupMain>
         <TextInputGroupUtilities {...(selected.length === 0 ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
-            <TimesIcon aria-hidden />
-          </Button>
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<TimesIcon aria-hidden />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -223,9 +223,12 @@ export const SelectTypeahead: React.FunctionComponent = () => {
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
-            <TimesIcon aria-hidden />
-          </Button>
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<TimesIcon aria-hidden />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -230,9 +230,12 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
         />
 
         <TextInputGroupUtilities {...(!inputValue ? { style: { display: 'none' } } : {})}>
-          <Button variant="plain" onClick={onClearButtonClick} aria-label="Clear input value">
-            <TimesIcon aria-hidden />
-          </Button>
+          <Button
+            variant="plain"
+            onClick={onClearButtonClick}
+            aria-label="Clear input value"
+            icon={<TimesIcon aria-hidden />}
+          />
         </TextInputGroupUtilities>
       </TextInputGroup>
     </MenuToggle>

package/src/components/Slider/examples/SliderActions.tsx

@@ -54,9 +54,12 @@ export const SliderActions: React.FunctionComponent = () => {
   };
 
   const buildAction = (isDisabled: boolean) => (
-    <Button variant="plain" aria-label={isDisabled ? 'Lock' : 'Unlock'} onClick={() => setIsDisabled(!isDisabled)}>
-      {isDisabled ? <LockIcon /> : <LockOpenIcon />}
-    </Button>
+    <Button
+      variant="plain"
+      aria-label={isDisabled ? 'Lock' : 'Unlock'}
+      onClick={() => setIsDisabled(!isDisabled)}
+      icon={isDisabled ? <LockIcon /> : <LockOpenIcon />}
+    />
   );
 
   return (
@@ -65,16 +68,8 @@ export const SliderActions: React.FunctionComponent = () => {
       <Slider
         value={value1}
         onChange={onChange1}
-        startActions={
-          <Button variant="plain" aria-label="Minus" onClick={onMinusClick}>
-            <MinusIcon />
-          </Button>
-        }
-        endActions={
-          <Button variant="plain" aria-label="Plus" onClick={onPlusClick}>
-            <PlusIcon />
-          </Button>
-        }
+        startActions={<Button variant="plain" aria-label="Minus" onClick={onMinusClick} icon={<MinusIcon />} />}
+        endActions={<Button variant="plain" aria-label="Plus" onClick={onPlusClick} icon={<PlusIcon />} />}
       />
       <br />
       <br />

package/src/components/Tabs/Tabs.tsx

@@ -545,9 +545,8 @@ class Tabs extends React.Component<TabsProps, TabsState> {
                 aria-hidden={disableBackScrollButton}
                 ref={this.leftScrollButtonRef}
                 variant="plain"
-              >
-                <AngleLeftIcon />
-              </Button>
+                icon={<AngleLeftIcon />}
+              />
             </div>
           )}
           <ul className={css(styles.tabsList)} ref={this.tabList} onScroll={this.handleScrollButtons} role="tablist">
@@ -562,16 +561,18 @@ class Tabs extends React.Component<TabsProps, TabsState> {
                 isDisabled={disableForwardScrollButton}
                 aria-hidden={disableForwardScrollButton}
                 variant="plain"
-              >
-                <AngleRightIcon />
-              </Button>
+                icon={<AngleRightIcon />}
+              />
             </div>
           )}
           {onAdd !== undefined && (
             <span className={css(styles.tabsAdd)}>
-              <Button variant="plain" aria-label={addButtonAriaLabel || 'Add tab'} onClick={onAdd}>
-                <PlusIcon />
-              </Button>
+              <Button
+                variant="plain"
+                aria-label={addButtonAriaLabel || 'Add tab'}
+                onClick={onAdd}
+                icon={<PlusIcon />}
+              />
             </span>
           )}
         </Component>

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

@@ -35,9 +35,13 @@ exports[`renders tab action 1`] = `
         type="button"
       >
         <span
-          class="pf-v6-c-tabs__item-action-icon"
+          class="pf-v6-c-button__text"
         >
-          test
+          <span
+            class="pf-v6-c-tabs__item-action-icon"
+          >
+            test
+          </span>
         </span>
       </button>
     </span>

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/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 (