@patternfly/react-docs 7.6.0-prerelease.7 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/menus/menu-toggle/react.js

@@ -0,0 +1,747 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState } from 'react';
+import '../../../../../../react-core/src/components/MenuToggle/examples/./MenuToggle.css'
+import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+const pageData = {
+  "id": "Menu toggle",
+  "section": "components",
+  "subsection": "menus",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/menus/menu-toggle/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md",
+  "relPath": "packages/react-core/src/components/MenuToggle/examples/MenuToggle.md",
+  "propComponents": [
+    {
+      "name": "MenuToggle",
+      "description": "",
+      "props": [
+        {
+          "name": "badge",
+          "type": "BadgeProps | React.ReactNode",
+          "description": "Optional badge rendered inside the toggle, after the children content"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the toggle"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the toggle"
+        },
+        {
+          "name": "icon",
+          "type": "React.ReactNode",
+          "description": "Optional icon or image rendered inside the toggle, before the children content. It is\nrecommended to wrap most basic icons in our icon component."
+        },
+        {
+          "name": "isCircle",
+          "type": "boolean",
+          "description": "Flag indicating the toggle has circular styling. Can only be applied to plain toggles.",
+          "beta": true
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is disabled"
+        },
+        {
+          "name": "isDocked",
+          "type": "boolean",
+          "description": "Flag indicating the menu toggle is a docked variant. For use in docked navigation.",
+          "beta": true
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the toggle has expanded styling"
+        },
+        {
+          "name": "isFullHeight",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is full height"
+        },
+        {
+          "name": "isFullWidth",
+          "type": "boolean",
+          "description": "Flag indicating the toggle takes up the full width of its parent"
+        },
+        {
+          "name": "isInForm",
+          "type": "boolean",
+          "description": "Flag indicating the toggle is placed inside a form",
+          "beta": true
+        },
+        {
+          "name": "isPlaceholder",
+          "type": "boolean",
+          "description": "Flag indicating the toggle contains placeholder text"
+        },
+        {
+          "name": "isSettings",
+          "type": "boolean",
+          "description": "Flag indicating whether the toggle is a settings toggle. This will override the icon property"
+        },
+        {
+          "name": "isTextExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the docked toggle should display text. Only applies when isDocked is true.",
+          "beta": true
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id. It will always target the toggle button."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        },
+        {
+          "name": "size",
+          "type": "'default' | 'sm'",
+          "description": "Adds styling which affects the size of the menu toggle"
+        },
+        {
+          "name": "splitButtonItems",
+          "type": "React.ReactNode[]",
+          "description": "Elements to display before the toggle button. When included, renders the menu toggle as a split button."
+        },
+        {
+          "name": "status",
+          "type": "'success' | 'warning' | 'danger'",
+          "description": "Status styles of the menu toggle"
+        },
+        {
+          "name": "statusIcon",
+          "type": "React.ReactNode",
+          "description": "Overrides the status icon"
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'plain' | 'primary' | 'plainText' | 'secondary' | 'typeahead'",
+          "description": "Variant styles of the menu toggle"
+        }
+      ]
+    },
+    {
+      "name": "MenuToggleAction",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Element to be rendered inside the <button>"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the MenuToggleAction",
+          "defaultValue": "''"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id of the action button"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag to show if the action button is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onClick",
+          "type": "(event: React.MouseEvent<HTMLButtonElement>) => void",
+          "description": "A callback for when the action button is clicked",
+          "defaultValue": "() => {}"
+        }
+      ]
+    },
+    {
+      "name": "MenuToggleCheckbox",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Element to be rendered inside the <span>"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the MenuToggleCheckbox"
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean",
+          "description": "Flag to set the default checked value of the checkbox when it is uncontrolled by React state.\nTo make the checkbox controlled instead use the isChecked prop, but do not use both."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id of the checkbox",
+          "required": true
+        },
+        {
+          "name": "isChecked",
+          "type": "boolean | null",
+          "description": "Flag to show if the checkbox is checked when it is controlled by React state.\nTo make the checkbox uncontrolled instead use the defaultChecked prop, but do not use both."
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag to show if the checkbox is disabled",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isValid",
+          "type": "boolean",
+          "description": "Flag to show if the checkbox selection is valid or invalid",
+          "defaultValue": "true"
+        },
+        {
+          "name": "onChange",
+          "type": "(checked: boolean, event: React.FormEvent<HTMLInputElement>) => void",
+          "description": "A callback for when the checkbox selection changes",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-menu-toggle"
+  ],
+  "examples": [
+    "Collapsed toggle",
+    "Expanded toggle",
+    "Small toggle",
+    "Disabled toggle",
+    "With a badge",
+    "Settings toggle",
+    "Custom icons",
+    "With avatar and text",
+    "Variant styles",
+    "Plain toggle with icon",
+    "Plain circle toggle",
+    "Plain toggle with text label",
+    "Split toggle with checkbox",
+    "Split toggle with labeled checkbox",
+    "Split toggle with checkbox and toggle text",
+    "Split toggle with action",
+    "Full height toggle",
+    "Full width toggle",
+    "Toggle in a form",
+    "Typeahead toggle",
+    "Status toggle",
+    "Placeholder text in toggle"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  PlusIcon,
+  RhUiEllipsisVerticalFillIcon,
+  imgAvatar,
+  RhMicronsCloseIcon
+};
+pageData.examples = {
+  'Collapsed toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleCollapsed: React.FunctionComponent = () => <MenuToggle>Collapsed</MenuToggle>;\n","title":"Collapsed toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A toggle is collapsed until it is selected by a user.`}
+      </p>
+    </Example>,
+  'Expanded toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleExpanded: React.FunctionComponent = () => <MenuToggle isExpanded>Expanded</MenuToggle>;\n","title":"Expanded toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When a user selects a toggle, it becomes expanded and is styled with a blue underline. To flag expanded toggles, and apply expanded styling, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isExpanded`}
+        </code>
+        {` property .`}
+      </p>
+    </Example>,
+  'Small toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleSmall: React.FunctionComponent = () => <MenuToggle size=\"sm\">Small toggle</MenuToggle>;\n","title":"Small toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can pass `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`size="sm"`}
+        </code>
+        {` to a MenuToggle to style it as a small toggle, such as within a `}
+        
+        <PatternflyThemeLink {...{"to":"/components/breadcrumb","className":""}}>
+          {`breadcrumb`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+    </Example>,
+  'Disabled toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleDisabled: React.FunctionComponent = () => <MenuToggle isDisabled>Disabled</MenuToggle>;\n","title":"Disabled toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To disable the selection and expansion of a toggle, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isDisabled`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'With a badge': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggle, Badge } from '@patternfly/react-core';\n\nexport const MenuToggleBadge: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle badge={<Badge>4 selected</Badge>}>Count</MenuToggle>\n    <MenuToggle variant=\"plainText\" badge={<Badge screenReaderText=\"additional items\">4</Badge>} />\n  </Fragment>\n);\n","title":"With a badge","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To display a count of selected items in a toggle, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`badge`}
+        </code>
+        {` property. You can also pass in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant="plainText"`}
+        </code>
+        {` for a badge only toggle.`}
+      </p>
+    </Example>,
+  'Settings toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react/jsx-runtime';\nimport { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleSettings: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle isSettings>Settings</MenuToggle> <MenuToggle isSettings variant=\"plain\" aria-label=\"Settings\" />\n  </Fragment>\n);\n","title":"Settings toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To create a "settings" menu toggle that will animate on hover and focus, you can pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isSettings`}
+        </code>
+        {` property in. Doing so will override the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` property, as a specific icon is used internally for the animations.`}
+      </p>
+    </Example>,
+  'Custom icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggle } from '@patternfly/react-core';\nimport PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';\n\nexport const MenuToggleCustomIcon: React.FC = () => (\n  <Fragment>\n    <MenuToggle icon={<PlusIcon />} variant=\"primary\">\n      Icon\n    </MenuToggle>{' '}\n    <MenuToggle icon={<PlusIcon />} variant=\"secondary\">\n      Icon\n    </MenuToggle>{' '}\n    <MenuToggle icon={<PlusIcon />} variant=\"secondary\" isDisabled>\n      Icon\n    </MenuToggle>\n  </Fragment>\n);\n","title":"Custom icons","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add a recognizable icon to a menu toggle, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` property. The following example adds a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`PlusIcon`}
+        </code>
+        {` to the toggle.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`For most basic icons, it is recommended to wrap it inside our `}
+        
+        <PatternflyThemeLink {...{"to":"/components/icon","className":""}}>
+          {`icon component`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+    </Example>,
+  'With avatar and text': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggle, Avatar } from '@patternfly/react-core';\nimport imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';\n\nexport const MenuToggleAvatarText: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle icon={<Avatar src={imgAvatar} alt=\"avatar\" />}>Ned Username</MenuToggle>{' '}\n    <MenuToggle icon={<Avatar src={imgAvatar} alt=\"avatar\" />} isExpanded>\n      Ned Username\n    </MenuToggle>{' '}\n    <MenuToggle icon={<Avatar src={imgAvatar} alt=\"avatar\" />} isDisabled>\n      Ned Username\n    </MenuToggle>\n  </Fragment>\n);\n","title":"With avatar and text","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can also pass images into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` property. The following example passes in an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Avatar>`}
+        </code>
+        {` component with an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`imgAvatar`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`This can be used alongside a text label that provides more context for the image.`}
+      </p>
+    </Example>,
+  'Variant styles': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleVariantStyles: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle variant=\"primary\">Collapsed</MenuToggle>{' '}\n    <MenuToggle variant=\"primary\" isExpanded>\n      Expanded\n    </MenuToggle>{' '}\n    <MenuToggle variant=\"primary\" isDisabled>\n      Disabled\n    </MenuToggle>\n  </Fragment>\n);\n","title":"Variant styles","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Variant styling can be applied to menu toggles. In the following example, the toggle uses primary styling by passing `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant="primary"`}
+        </code>
+        {` into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {` component. Additional variant options include “default”, “plain”, “plainText”, “secondary”, and “typeahead”.`}
+      </p>
+    </Example>,
+  'Plain toggle with icon': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggle } from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const MenuTogglePlainIcon: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle icon={<RhUiEllipsisVerticalFillIcon />} variant=\"plain\" aria-label=\"plain kebab\" />{' '}\n    <MenuToggle icon={<RhUiEllipsisVerticalFillIcon />} variant=\"plain\" isExpanded aria-label=\"plain expanded kebab\" />{' '}\n    <MenuToggle icon={<RhUiEllipsisVerticalFillIcon />} variant=\"plain\" isDisabled aria-label=\"disabled plain kebab\" />\n  </Fragment>\n);\n","title":"Plain toggle with icon","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To apply plain styling to a menu toggle with an icon, pass in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant="plain"`}
+        </code>
+        {`. This will remove the default bottom border and caret. You may pass in an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`icon`}
+        </code>
+        {` to serve as the menu toggle. The following example passes in an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`RhUiEllipsisVerticalFillIcon`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`If the toggle does not have any visible text content, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-label`}
+        </code>
+        {` property to provide an accessible name.`}
+      </p>
+    </Example>,
+  'Plain circle toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggle } from '@patternfly/react-core';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const MenuTogglePlainCircle: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle isCircle icon={<RhUiEllipsisVerticalFillIcon />} variant=\"plain\" aria-label=\"plain circle kebab\" />{' '}\n    <MenuToggle\n      isCircle\n      icon={<RhUiEllipsisVerticalFillIcon />}\n      variant=\"plain\"\n      isExpanded\n      aria-label=\"plain circle expanded kebab\"\n    />{' '}\n    <MenuToggle\n      isCircle\n      icon={<RhUiEllipsisVerticalFillIcon />}\n      variant=\"plain\"\n      isDisabled\n      aria-label=\"disabled plain circle kebab\"\n    />\n  </Fragment>\n);\n","title":"Plain circle toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can also pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isCircle`}
+        </code>
+        {` property to a plain, icon-only toggle to adjust the styling to a complete circular shape, rather than a rounded square.`}
+      </p>
+    </Example>,
+  'Plain toggle with text label': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuTogglePlainTextLabel: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle variant=\"plainText\" isDisabled aria-label=\"Disabled plain menu toggle\">\n      Disabled\n    </MenuToggle>{' '}\n    <MenuToggle variant=\"plainText\" aria-label=\"Plain menu toggle\">\n      Custom text\n    </MenuToggle>{' '}\n    <MenuToggle variant=\"plainText\" isExpanded aria-label=\"Expanded plain menu toggle\">\n      Custom text (expanded)\n    </MenuToggle>\n  </Fragment>\n);\n","title":"Plain toggle with text label","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To apply plain styling to a menu toggle with a text label, pass in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant="plainText"`}
+        </code>
+        {`. Unlike the “plain” variant, “plainText” adds a caret pointing down in the toggle.`}
+      </p>
+    </Example>,
+  'Split toggle with checkbox': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleSplitButtonCheckbox: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle\n      splitButtonItems={[\n        <MenuToggleCheckbox id=\"split-button-checkbox-example\" key=\"split-checkbox\" aria-label=\"Select all\" />\n      ]}\n      aria-label=\"Menu toggle with checkbox split button\"\n    />{' '}\n    <MenuToggle\n      variant=\"primary\"\n      splitButtonItems={[\n        <MenuToggleCheckbox id=\"split-button-checkbox-example\" key=\"split-checkbox\" aria-label=\"Select all\" />\n      ]}\n      aria-label=\"Menu toggle with checkbox split button\"\n    />{' '}\n    <MenuToggle\n      variant=\"secondary\"\n      splitButtonItems={[\n        <MenuToggleCheckbox id=\"split-button-checkbox-example\" key=\"split-checkbox\" aria-label=\"Select all\" />\n      ]}\n      aria-label=\"Menu toggle with checkbox split button\"\n    />\n  </Fragment>\n);\n","title":"Split toggle with checkbox","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add a checkbox (or other action/control) to a menu toggle, use a split button.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {` can be rendered as a split button by adding a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`splitButtonItems`}
+        </code>
+        {` property. Elements to be displayed before the toggle button must be included in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`splitButtonItems`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example shows a split button with a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggleCheckbox>`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Variant styling can be applied to split button toggles to adjust their appearance for different scenarios. Both "primary" and "secondary" variants can be used with split button toggles.`}
+      </p>
+    </Example>,
+  'Split toggle with labeled checkbox': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleSplitButtonCheckboxWithText: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle\n      splitButtonItems={[\n        <MenuToggleCheckbox\n          id=\"split-button-checkbox-with-text-example\"\n          key=\"split-checkbox-with-text\"\n          aria-label=\"Select all\"\n        >\n          10 selected\n        </MenuToggleCheckbox>\n      ]}\n      aria-label=\"Menu toggle with checkbox split button and text\"\n    />{' '}\n    <MenuToggle\n      variant=\"primary\"\n      splitButtonItems={[\n        <MenuToggleCheckbox\n          id=\"split-button-checkbox-primary-example\"\n          key=\"split-checkbox-primary\"\n          aria-label=\"Select all\"\n        >\n          10 selected\n        </MenuToggleCheckbox>\n      ]}\n      aria-label=\"Primary menu toggle with checkbox split button\"\n    />{' '}\n    <MenuToggle\n      variant=\"secondary\"\n      splitButtonItems={[\n        <MenuToggleCheckbox\n          id=\"split-button-checkbox-secondary-example\"\n          key=\"split-checkbox-secondary\"\n          aria-label=\"Select all\"\n        >\n          10 selected\n        </MenuToggleCheckbox>\n      ]}\n      aria-label=\"Secondary menu toggle with checkbox split button\"\n    />\n  </Fragment>\n);\n","title":"Split toggle with labeled checkbox","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can allow users to select a toggle checkbox by clicking either the checkbox or the text label.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To link a split toggle label to the toggle's checkbox, pass both the label and the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggleCheckbox>`}
+        </code>
+        {` component to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`splitButtonItems`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Split toggle with checkbox and toggle text': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggleCheckbox, MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleSplitButtonCheckboxWithToggleText: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle\n      splitButtonItems={[\n        <MenuToggleCheckbox\n          id=\"split-button-checkbox-with-text-example\"\n          key=\"split-checkbox-with-text\"\n          aria-label=\"Select all\"\n        />\n      ]}\n      aria-label=\"Menu toggle with checkbox split button and text\"\n    >\n      10 selected\n    </MenuToggle>{' '}\n    <MenuToggle\n      variant=\"primary\"\n      splitButtonItems={[\n        <MenuToggleCheckbox\n          id=\"split-button-checkbox-primary-example\"\n          key=\"split-checkbox-primary\"\n          aria-label=\"Select all\"\n        />\n      ]}\n      aria-label=\"Primary menu toggle with checkbox split button\"\n    >\n      10 selected\n    </MenuToggle>{' '}\n    <MenuToggle\n      variant=\"secondary\"\n      splitButtonItems={[\n        <MenuToggleCheckbox\n          id=\"split-button-checkbox-secondary-example\"\n          key=\"split-checkbox-secondary\"\n          aria-label=\"Select all\"\n        />\n      ]}\n      aria-label=\"Secondary menu toggle with checkbox split button\"\n    >\n      10 selected\n    </MenuToggle>\n  </Fragment>\n);\n","title":"Split toggle with checkbox and toggle text","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To link a split toggle label to the toggle button itself, pass the label to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {` component, instead of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`splitButtonItems`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Split toggle with action': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggleAction, MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleSplitButtonAction: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle\n      splitButtonItems={[\n        <MenuToggleAction id=\"split-button-action-example-with-toggle-button\" key=\"split-action\" aria-label=\"Action\">\n          Action\n        </MenuToggleAction>\n      ]}\n      aria-label=\"Menu toggle with action split button\"\n    />{' '}\n    <MenuToggle\n      variant=\"primary\"\n      splitButtonItems={[\n        <MenuToggleAction\n          id=\"split-button-action-primary-example-with-toggle-button\"\n          key=\"split-action-primary\"\n          aria-label=\"Action\"\n        >\n          Action\n        </MenuToggleAction>\n      ]}\n      aria-label=\"Menu toggle with action split button\"\n    />{' '}\n    <MenuToggle\n      variant=\"secondary\"\n      splitButtonItems={[\n        <MenuToggleAction\n          id=\"split-button-action-secondary-example-with-toggle-button\"\n          key=\"split-action-secondary\"\n          aria-label=\"Action\"\n        >\n          Action\n        </MenuToggleAction>\n      ]}\n      aria-label=\"Menu toggle with action split button\"\n    />\n  </Fragment>\n);\n","title":"Split toggle with action","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add an action to a split button, add a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggleAction>`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`splitButtonItems`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Actions may be used with primary and secondary toggle variants.`}
+      </p>
+    </Example>,
+  'Full height toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleFullHeight: React.FunctionComponent = () => (\n  <div style={{ height: '80px' }}>\n    <MenuToggle isFullHeight aria-label=\"Full height menu toggle\">\n      Full height\n    </MenuToggle>\n  </div>\n);\n","title":"Full height toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A full height toggle fills the height of its parent. To flag a full height toggle, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isFullHeight`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In the following example, the toggle fills the size of the "80px" `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<div>`}
+        </code>
+        {` element that it is within.`}
+      </p>
+    </Example>,
+  'Full width toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleFullWidth: React.FunctionComponent = () => (\n  <MenuToggle isFullWidth aria-label=\"Full width menu toggle\">\n    Full width\n  </MenuToggle>\n);\n","title":"Full width toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A full width toggle fills the width of its parent. To flag a full width toggle, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isFullWidth`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In the following example, the toggle fills the width of its parent as the window size changes.`}
+      </p>
+    </Example>,
+  'Toggle in a form': props => 
+    <Example {...pageData} {...props} {...{"code":"import { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuToggleInForm = (): JSX.Element => (\n  <MenuToggle isInForm aria-label=\"Menu toggle in a form\">\n    In form\n  </MenuToggle>\n);\n","title":"Toggle in a form","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When a menu toggle is used inside a form, pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isInForm`}
+        </code>
+        {` property so the toggle receives form-appropriate styling.`}
+      </p>
+    </Example>,
+  'Typeahead toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport {\n  MenuToggle,\n  TextInputGroup,\n  TextInputGroupMain,\n  TextInputGroupUtilities,\n  Button\n} from '@patternfly/react-core';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const MenuToggleTypeahead: React.FunctionComponent = () => {\n  const [inputValue, setInputValue] = useState<string>('');\n\n  const onTextInputChange = (_event: React.FormEvent<HTMLInputElement>, value: string) => {\n    setInputValue(value);\n  };\n\n  return (\n    <MenuToggle variant=\"typeahead\" isFullWidth aria-label=\"Typeahead menu toggle\">\n      <TextInputGroup isPlain>\n        <TextInputGroupMain\n          value={inputValue}\n          onChange={onTextInputChange}\n          id=\"typeahead-select-input\"\n          autoComplete=\"off\"\n        />\n\n        <TextInputGroupUtilities>\n          {!!inputValue && (\n            <Button\n              variant=\"plain\"\n              onClick={() => setInputValue('')}\n              aria-label=\"Clear input value\"\n              icon={<RhMicronsCloseIcon />}\n            />\n          )}\n        </TextInputGroupUtilities>\n      </TextInputGroup>\n    </MenuToggle>\n  );\n};\n","title":"Typeahead toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To create a typeahead toggle, pass in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant="typeahead"`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {`. Then, pass a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TextInputGroup>`}
+        </code>
+        {` component as a child of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To create a multiple typeahead toggle, pass a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TextInputGroup>`}
+        </code>
+        {` component implemented like the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/text-input-group#filters","className":""}}>
+          {`text input group's filter example`}
+        </PatternflyThemeLink>
+        {` as a child of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<MenuToggle>`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Status toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { MenuToggle, HelperText, HelperTextItem } from '@patternfly/react-core';\n\nexport const MenuToggleStatus: React.FunctionComponent = () => (\n  <Fragment>\n    <MenuToggle status=\"success\">Success</MenuToggle>\n    <br />\n    <br />\n    <MenuToggle status=\"warning\">Warning</MenuToggle>\n    <HelperText>\n      <HelperTextItem variant=\"warning\">Warning text that explains the issue.</HelperTextItem>\n    </HelperText>\n    <br />\n    <br />\n    <MenuToggle status=\"danger\">Danger</MenuToggle>\n    <HelperText>\n      <HelperTextItem variant=\"error\">Danger text that explains the issue.</HelperTextItem>\n    </HelperText>\n  </Fragment>\n);\n","title":"Status toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To create a toggle with a status, pass in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`status`}
+        </code>
+        {` property to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`MenuToggle`}
+        </code>
+        {`. The default icon associated with each status may be overridden by using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`statusIcon`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When the status value is "warning" or "danger", you must include helper text that conveys what is causing the warning/error.`}
+      </p>
+    </Example>,
+  'Placeholder text in toggle': props => 
+    <Example {...pageData} {...props} {...{"code":"import { MenuToggle } from '@patternfly/react-core';\n\nexport const MenuTogglePlaceholder: React.FunctionComponent = () => (\n  <MenuToggle isPlaceholder>Placeholder text</MenuToggle>\n);\n","title":"Placeholder text in toggle","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To indicate the toggle contains placeholder text, pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isPlaceholder`}
+        </code>
+        {` property to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`MenuToggle`}
+        </code>
+        {`.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Collapsed toggle"])}
+    {React.createElement(pageData.examples["Expanded toggle"])}
+    {React.createElement(pageData.examples["Small toggle"])}
+    {React.createElement(pageData.examples["Disabled toggle"])}
+    {React.createElement(pageData.examples["With a badge"])}
+    {React.createElement(pageData.examples["Settings toggle"])}
+    {React.createElement(pageData.examples["Custom icons"])}
+    {React.createElement(pageData.examples["With avatar and text"])}
+    {React.createElement(pageData.examples["Variant styles"])}
+    {React.createElement(pageData.examples["Plain toggle with icon"])}
+    {React.createElement(pageData.examples["Plain circle toggle"])}
+    {React.createElement(pageData.examples["Plain toggle with text label"])}
+    {React.createElement(pageData.examples["Split toggle with checkbox"])}
+    {React.createElement(pageData.examples["Split toggle with labeled checkbox"])}
+    {React.createElement(pageData.examples["Split toggle with checkbox and toggle text"])}
+    {React.createElement(pageData.examples["Split toggle with action"])}
+    {React.createElement(pageData.examples["Full height toggle"])}
+    {React.createElement(pageData.examples["Full width toggle"])}
+    {React.createElement(pageData.examples["Toggle in a form"])}
+    {React.createElement(pageData.examples["Typeahead toggle"])}
+    {React.createElement(pageData.examples["Status toggle"])}
+    {React.createElement(pageData.examples["Placeholder text in toggle"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsMenusMenuToggleReactDocs';
+Component.pageData = pageData;
+
+export default Component;