Updated examples and prop descriptions

Eric Olkowski · Eric Olkowski · commit cf9e54e223ab · 2025-06-11T10:35:59.000-04:00
diff --git a/packages/react-core/src/components/Button/Button.tsx b/packages/react-core/src/components/Button/Button.tsx
@@ -96,9 +96,9 @@ export interface ButtonProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'r
   isDanger?: boolean;
   /** Flag indicating whether content the button controls is expanded or not. Required when isHamburger is true. */
   isExpanded?: boolean;
-  /** Flag indicating the button is a settings button. This will override the variant and icon properties. */
+  /** Flag indicating the button is a settings button. This will override the icon property. */
   isSettings?: boolean;
-  /** Flag indicating the button is a hamburger button. This will override the children, variant, and icon properties. */
+  /** Flag indicating the button is a hamburger button. This will override the icon property. */
   isHamburger?: boolean;
   /** Adjusts and animates the hamburger icon to indicate what will happen upon clicking the button. */
   hamburgerVariant?: 'expand' | 'collapse';
diff --git a/packages/react-core/src/components/Button/examples/ButtonHamburger.tsx b/packages/react-core/src/components/Button/examples/ButtonHamburger.tsx
@@ -1,39 +1,9 @@
-import { useState } from 'react';
 import { Button, Flex } from '@patternfly/react-core';
 
-export const ButtonHamburger: React.FunctionComponent = () => {
-  const [isHovered, setIsHovered] = useState(false);
-  const [isExpanded, setIsExpanded] = useState(false);
-  const [hamburgerVariant, setHamburgerVariant] = useState<'expand' | 'collapse'>('expand');
-
-  const handleClick = () => {
-    setHamburgerVariant((prevVariant) => (prevVariant === 'expand' ? 'collapse' : 'expand'));
-    setIsExpanded(!isExpanded);
-  };
-
-  const onHoverFocus = () => {
-    setIsHovered(true);
-  };
-  const onLeaveBlur = () => {
-    setIsHovered(false);
-  };
-
-  return (
-    <Flex>
-      <Button isExpanded={false} aria-label="Hamburger example default icon" isHamburger />
-      <Button isExpanded={false} aria-label="Hamburger example expand icon" isHamburger hamburgerVariant="expand" />
-      <Button isExpanded={true} aria-label="Hamburger example collapse icon" isHamburger hamburgerVariant="collapse" />
-      <Button
-        isHamburger
-        aria-label="Hamburger example dynamic icon"
-        onClick={handleClick}
-        isExpanded={isExpanded}
-        onMouseOver={onHoverFocus}
-        onMouseLeave={onLeaveBlur}
-        onFocus={onHoverFocus}
-        onBlur={onLeaveBlur}
-        hamburgerVariant={isHovered ? hamburgerVariant : undefined}
-      />
-    </Flex>
-  );
-};
+export const ButtonHamburger: React.FunctionComponent = () => (
+  <Flex>
+    <Button variant="plain" isExpanded={false} aria-label="Hamburger example" isHamburger />
+    <Button variant="plain" isExpanded={false} aria-label="Hamburger example" isHamburger hamburgerVariant="expand" />
+    <Button variant="plain" isExpanded={true} aria-label="Hamburger example" isHamburger hamburgerVariant="collapse" />
+  </Flex>
+);
diff --git a/packages/react-core/src/components/Button/examples/ButtonSettings.tsx b/packages/react-core/src/components/Button/examples/ButtonSettings.tsx
@@ -2,7 +2,9 @@ import { Button, Flex } from '@patternfly/react-core';
 
 export const ButtonSettings: React.FunctionComponent = () => (
   <Flex>
-    <Button isSettings aria-label="Settings" />
-    <Button isSettings>Settings</Button>
+    <Button isSettings variant="plain" aria-label="Settings" />
+    <Button isSettings variant="control">
+      Settings
+    </Button>
   </Flex>
 );
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx b/packages/react-core/src/components/Masthead/examples/MastheadBasic.tsx
@@ -12,7 +12,7 @@ export const MastheadBasic: React.FunctionComponent = () => (
   <Masthead id="basic-example">
     <MastheadMain>
       <MastheadToggle>
-        <Button isHamburger onClick={() => {}} aria-label="Global navigation" />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadBasicMixedContent.tsx b/packages/react-core/src/components/Masthead/examples/MastheadBasicMixedContent.tsx
@@ -14,7 +14,7 @@ export const MastheadBasicMixedContent: React.FunctionComponent = () => (
   <Masthead id="basic-mixed">
     <MastheadMain>
       <MastheadToggle>
-        <Button isHamburger onClick={() => {}} aria-label="Global navigation" />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadDisplayInline.tsx b/packages/react-core/src/components/Masthead/examples/MastheadDisplayInline.tsx
@@ -12,7 +12,7 @@ export const MastheadDisplayInline: React.FunctionComponent = () => (
   <Masthead id="inline-masthead" display={{ default: 'inline' }}>
     <MastheadMain>
       <MastheadToggle>
-        <Button isHamburger onClick={() => {}} aria-label="Global navigation" />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadDisplayStack.tsx b/packages/react-core/src/components/Masthead/examples/MastheadDisplayStack.tsx
@@ -12,7 +12,7 @@ export const MastheadDisplayStack: React.FunctionComponent = () => (
   <Masthead id="stack-masthead" display={{ default: 'stack' }}>
     <MastheadMain>
       <MastheadToggle>
-        <Button isHamburger onClick={() => {}} aria-label="Global navigation" />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx b/packages/react-core/src/components/Masthead/examples/MastheadDisplayStackInlineResponsive.tsx
@@ -12,7 +12,7 @@ export const MastheadDisplayStackInlineResponsive: React.FunctionComponent = ()
   <Masthead id="stack-inline-masthead" display={{ default: 'inline', lg: 'stack', '2xl': 'inline' }}>
     <MastheadMain>
       <MastheadToggle>
-        <Button isHamburger onClick={() => {}} aria-label="Global navigation" />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadInsets.tsx b/packages/react-core/src/components/Masthead/examples/MastheadInsets.tsx
@@ -12,7 +12,7 @@ export const MastheadInsets: React.FunctionComponent = () => (
   <Masthead id="inset-masthead" inset={{ default: 'insetSm' }}>
     <MastheadMain>
       <MastheadToggle>
-        <Button isHamburger onClick={() => {}} aria-label="Global navigation" />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component="a">Logo</MastheadLogo>
diff --git a/packages/react-core/src/components/Masthead/examples/MastheadLogoCustomComponent.tsx b/packages/react-core/src/components/Masthead/examples/MastheadLogoCustomComponent.tsx
@@ -14,7 +14,7 @@ export const MastheadLogoCustomComponent: React.FunctionComponent = () => (
   <Masthead id="icon-router-link">
     <MastheadMain>
       <MastheadToggle>
-        <Button isHamburger onClick={() => {}} aria-label="Global navigation" />
+        <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
       </MastheadToggle>
       <MastheadBrand>
         <MastheadLogo component={(props) => <a {...props} href="#" />}>
diff --git a/packages/react-core/src/components/MenuToggle/MenuToggle.tsx b/packages/react-core/src/components/MenuToggle/MenuToggle.tsx
@@ -45,7 +45,7 @@ export interface MenuToggleProps
   isFullWidth?: boolean;
   /** Flag indicating the toggle contains placeholder text */
   isPlaceholder?: boolean;
-  /** Flag indicating whether the toggle is a settings toggle. */
+  /** Flag indicating whether the toggle is a settings toggle. This will override the icon property */
   isSettings?: boolean;
   /** Elements to display before the toggle button. When included, renders the menu toggle as a split button. */
   splitButtonItems?: React.ReactNode[];
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
@@ -8,7 +8,7 @@ propComponents: ['MenuToggle', 'MenuToggleAction', 'MenuToggleCheckbox']
 
 import { Fragment, useState } from 'react';
 import './MenuToggle.css'
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
@@ -73,40 +73,17 @@ import { MenuToggle, Badge } from '@patternfly/react-core';
 ### Settings toggle
 
 ```ts file="./MenuToggleSettings.tsx"
+
 ```
 
-### With icons
+### Custom icons
 
-To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `CogIcon` to the toggle.
+To add a recognizable icon to a menu toggle, use the `icon` property. The following example adds a `PlusIcon` to the toggle.
 
 For most basic icons, it is recommended to wrap it inside our [icon component](/components/icon).
 
-```ts
-import { Fragment } from 'react';
-import { MenuToggle } from '@patternfly/react-core';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+```ts file="./MenuToggleCustomIcon.tsx"
 
-<Fragment>
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="primary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-  >
-    Icon
-  </MenuToggle>{' '}
-  <MenuToggle
-    icon={<CogIcon />}
-    variant="secondary"
-    isDisabled
-  >
-    Icon
-  </MenuToggle>
-</Fragment>;
 ```
 
 ### With avatar and text
@@ -207,13 +184,13 @@ Variant styling can be applied to split button toggles to adjust their appearanc
 
 You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.
 
-To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`. 
+To link a split toggle label to the toggle's checkbox, pass both the label and the `<MenuToggleCheckbox>` component to `splitButtonItems`.
 
 ```ts file='MenuToggleSplitButtonCheckboxWithText.tsx'
 
 ```
 
-### Split toggle with checkbox and toggle text 
+### Split toggle with checkbox and toggle text
 
 To link a split toggle label to the toggle button itself, pass the label to the `<MenuToggle>` component, instead of `splitButtonItems`.
 
diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleCustomIcon.tsx
@@ -0,0 +1,17 @@
+import { Fragment } from 'react';
+import { MenuToggle } from '@patternfly/react-core';
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+
+export const MenuToggleCustomIcon: React.FC = () => (
+  <Fragment>
+    <MenuToggle icon={<PlusIcon />} variant="primary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary">
+      Icon
+    </MenuToggle>{' '}
+    <MenuToggle icon={<PlusIcon />} variant="secondary" isDisabled>
+      Icon
+    </MenuToggle>
+  </Fragment>
+);
diff --git a/packages/react-core/src/demos/DashboardHeader.tsx b/packages/react-core/src/demos/DashboardHeader.tsx
@@ -156,7 +156,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
               )}
               <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
-                  <Button aria-label="Settings" isSettings />
+                  <Button aria-label="Settings" isSettings variant="plain" />
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
@@ -192,7 +192,7 @@ 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" isSettings />
+                <Button aria-label="Settings actions" isSettings variant="plain" />
               </ToolbarItem>
               <ToolbarItem>
                 <Button aria-label="Help actions" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx b/packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
@@ -242,7 +242,7 @@ 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" isSettings />
+                <Button aria-label="Settings actions" isSettings variant="plain" />
               </ToolbarItem>
               <ToolbarItem>
                 <Button aria-label="Help actions" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx b/packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
@@ -339,7 +339,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
             >
               <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
-                  <Button aria-label={translation.kebabDropdown.settings} isSettings />
+                  <Button aria-label={translation.kebabDropdown.settings} isSettings variant="plain" />
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
@@ -193,7 +193,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx b/packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
@@ -393,7 +393,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
               <Popper trigger={toggle} triggerRef={toggleRef} popper={menu} popperRef={menuRef} isVisible={isOpen} />
             </ToolbarItem>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx b/packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
@@ -138,7 +138,7 @@ export const NavFlyout: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
@@ -117,7 +117,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx b/packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
@@ -165,7 +165,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Nav/NavManual.tsx b/packages/react-core/src/demos/examples/Nav/NavManual.tsx
@@ -132,7 +132,7 @@ export const NavManual: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx b/packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
@@ -150,7 +150,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
@@ -128,7 +128,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
@@ -128,7 +128,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx b/packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
@@ -120,7 +120,7 @@ export const PageStickySectionGroupAlternate: React.FunctionComponent = () => {
           </ToolbarItem>
           <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
             <ToolbarItem>
-              <Button aria-label="Settings" isSettings />
+              <Button aria-label="Settings" isSettings variant="plain" />
             </ToolbarItem>
             <ToolbarItem>
               <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -116,7 +116,7 @@ export class MastheadDemo extends Component<MastheadProps> {
       <Masthead id="basic">
         <MastheadMain>
           <MastheadToggle>
-            <Button isHamburger onClick={() => {}} aria-label="Global navigation" />
+            <Button variant="plain" isHamburger onClick={() => {}} aria-label="Global navigation" />
           </MastheadToggle>
           <MastheadBrand>
             <MastheadLogo>
diff --git a/packages/react-table/src/demos/DashboardHeader.tsx b/packages/react-table/src/demos/DashboardHeader.tsx
@@ -156,7 +156,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
               )}
               <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
                 <ToolbarItem>
-                  <Button aria-label="Settings" isSettings />
+                  <Button aria-label="Settings" isSettings variant="plain" />
                 </ToolbarItem>
                 <ToolbarItem>
                   <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
