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

package/patternfly-docs/generated/components/tabs/react.js

@@ -0,0 +1,1359 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { createRef, Fragment, useEffect, useRef, useState } from 'react';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
+import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
+import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
+import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
+const pageData = {
+  "id": "Tabs",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/tabs/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Tabs/examples/Tabs.md",
+  "relPath": "packages/react-core/src/components/Tabs/examples/Tabs.md",
+  "propComponents": [
+    {
+      "name": "Tabs",
+      "description": "",
+      "props": [
+        {
+          "name": "activeKey",
+          "type": "number | string",
+          "description": "The index of the active tab",
+          "defaultValue": "0"
+        },
+        {
+          "name": "addButtonAriaLabel",
+          "type": "string",
+          "description": "Aria-label for the add button"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Provides an accessible label for the tabs. Labels should be unique for each set of tabs that are present on a page. When component is set to nav, this prop should be defined to differentiate the tabs from other navigation regions on the page."
+        },
+        {
+          "name": "backScrollAriaLabel",
+          "type": "string",
+          "description": "Aria-label for the back scroll button",
+          "defaultValue": "'Scroll back'"
+        },
+        {
+          "name": "children",
+          "type": "TabsChild | TabsChild[]",
+          "description": "Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the tabs"
+        },
+        {
+          "name": "component",
+          "type": "'div' | 'nav'",
+          "description": "Determines what tag is used around the tabs. Use \"nav\" to define the tabs inside a navigation region"
+        },
+        {
+          "name": "defaultActiveKey",
+          "type": "number | string",
+          "description": "The index of the default active tab. Set this for uncontrolled Tabs"
+        },
+        {
+          "name": "defaultIsExpanded",
+          "type": "boolean",
+          "description": "Flag indicating the default expanded state for uncontrolled expand/collapse of"
+        },
+        {
+          "name": "expandable",
+          "type": "{\n  default?: 'expandable' | 'nonExpandable';\n  sm?: 'expandable' | 'nonExpandable';\n  md?: 'expandable' | 'nonExpandable';\n  lg?: 'expandable' | 'nonExpandable';\n  xl?: 'expandable' | 'nonExpandable';\n  '2xl'?: 'expandable' | 'nonExpandable';\n}",
+          "description": "Enable expandable vertical tabs at various breakpoints. (isVertical should be set to true for this to work)"
+        },
+        {
+          "name": "forwardScrollAriaLabel",
+          "type": "string",
+          "description": "Aria-label for the forward scroll button",
+          "defaultValue": "'Scroll forward'"
+        },
+        {
+          "name": "hasNoBorderBottom",
+          "type": "boolean",
+          "description": "Disables border bottom tab styling on tabs. Defaults to false. To remove the bottom border, set this prop to true.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Uniquely identifies the tabs"
+        },
+        {
+          "name": "inset",
+          "type": "{\n  default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n  '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl';\n}",
+          "description": "Insets at various breakpoints."
+        },
+        {
+          "name": "isAddButtonDisabled",
+          "type": "boolean",
+          "description": "Flag indicating that the add button is disabled when onAdd is passed in"
+        },
+        {
+          "name": "isBox",
+          "type": "boolean",
+          "description": "Enables box styling to the tab component",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag to indicate if the vertical tabs are expanded"
+        },
+        {
+          "name": "isFilled",
+          "type": "boolean",
+          "description": "Enables the filled tab list layout",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isNav",
+          "type": "boolean",
+          "description": "Enables horizontal nav tab styling",
+          "defaultValue": "false",
+          "beta": true
+        },
+        {
+          "name": "isOverflowHorizontal",
+          "type": "boolean | HorizontalOverflowObject",
+          "description": "Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab."
+        },
+        {
+          "name": "isSubtab",
+          "type": "boolean",
+          "description": "Enables subtab tab styling",
+          "defaultValue": "false"
+        },
+        {
+          "name": "isVertical",
+          "type": "boolean",
+          "description": "Enables vertical tab styling",
+          "defaultValue": "false"
+        },
+        {
+          "name": "leftScrollAriaLabel",
+          "type": "string",
+          "description": "Please use backScrollAriaLabel. Aria-label for the left scroll button",
+          "defaultValue": "'Scroll left'",
+          "deprecated": true
+        },
+        {
+          "name": "mountOnEnter",
+          "type": "boolean",
+          "description": "Waits until the first \"enter\" transition to mount tab children (add them to the DOM)",
+          "defaultValue": "false"
+        },
+        {
+          "name": "onAdd",
+          "type": "(event: React.MouseEvent<HTMLElement, MouseEvent>) => void",
+          "description": "Callback for the add button. Passing this property inserts the add button"
+        },
+        {
+          "name": "onClose",
+          "type": "(event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: TabProps['eventKey']) => void",
+          "description": "Callback to handle tab closing and adds a basic close button to all tabs. This is overridden by the tab actions property."
+        },
+        {
+          "name": "onSelect",
+          "type": "(event: React.MouseEvent<HTMLElement, MouseEvent>, eventKey: TabProps['eventKey']) => void",
+          "description": "Callback to handle tab selection",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "name": "onToggle",
+          "type": "(event: React.MouseEvent, isExpanded: boolean) => void",
+          "description": "Callback function to toggle the expandable tabs.",
+          "defaultValue": "(_event: React.MouseEvent, _isExpanded: boolean): void => undefined"
+        },
+        {
+          "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.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "rightScrollAriaLabel",
+          "type": "string",
+          "description": "Please use forwardScrollAriaLabel. Aria-label for the right scroll button",
+          "defaultValue": "'Scroll right'",
+          "deprecated": true
+        },
+        {
+          "name": "tabListAriaLabel",
+          "type": "string",
+          "description": "A readable string to create an accessible name for the tablist element. This can be used to differentiate multiple tablists on a page, and should be used for subtabs."
+        },
+        {
+          "name": "tabListAriaLabelledBy",
+          "type": "string",
+          "description": "Id of an element that provides an accessible name for the tablist. Use this when a visible label already exists on the page."
+        },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "Aria-label for the expandable toggle"
+        },
+        {
+          "name": "toggleText",
+          "type": "string",
+          "description": "Text that appears in the expandable toggle"
+        },
+        {
+          "name": "unmountOnExit",
+          "type": "boolean",
+          "description": "Unmounts tab children (removes them from the DOM) when they are no longer visible",
+          "defaultValue": "false"
+        },
+        {
+          "name": "usePageInsets",
+          "type": "boolean",
+          "description": "Flag indicates that the tabs should use page insets."
+        },
+        {
+          "name": "variant",
+          "type": "'default' | 'secondary'",
+          "description": "Tabs background color variant",
+          "defaultValue": "'default'"
+        }
+      ]
+    },
+    {
+      "name": "Tab",
+      "description": "",
+      "props": [
+        {
+          "name": "actions",
+          "type": "React.ReactNode",
+          "description": "Actions rendered beside the tab content"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "content rendered inside the Tab content area."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the Tab"
+        },
+        {
+          "name": "closeButtonAriaLabel",
+          "type": "string",
+          "description": "Aria-label for the close button added by passing the onClose property to Tabs."
+        },
+        {
+          "name": "eventKey",
+          "type": "number | string",
+          "description": "uniquely identifies the tab",
+          "required": true
+        },
+        {
+          "name": "href",
+          "type": "string",
+          "description": "URL associated with the Tab. A Tab with an href will render as an <a> instead of a <button>. A Tab inside a <Tabs component=\"nav\"> should have an href."
+        },
+        {
+          "name": "inoperableEvents",
+          "type": "string[]",
+          "description": "Events to prevent when the button is in an aria-disabled state"
+        },
+        {
+          "name": "isAriaDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and communicates that the button is disabled using the aria-disabled html attribute"
+        },
+        {
+          "name": "isCloseDisabled",
+          "type": "boolean",
+          "description": "Flag indicating the close button should be disabled"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Adds disabled styling and disables the button using the disabled html attribute"
+        },
+        {
+          "name": "isHidden",
+          "type": "boolean",
+          "description": "whether to render the tab or not"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to set the data-ouia-component-id for the tab button."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": ""
+        },
+        {
+          "name": "tabContentId",
+          "type": "string | number",
+          "description": "child id for case in which a TabContent section is defined outside of a Tabs component"
+        },
+        {
+          "name": "tabContentRef",
+          "type": "React.RefObject<any>",
+          "description": "child reference for case in which a TabContent section is defined outside of a Tabs component"
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Content rendered in the tab title. Should be <TabTitleText> and/or <TabTitleIcon> for proper styling.",
+          "required": true
+        },
+        {
+          "name": "tooltip",
+          "type": "React.ReactElement<any>",
+          "description": "Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering."
+        }
+      ]
+    },
+    {
+      "name": "TabContent",
+      "description": "",
+      "props": [
+        {
+          "name": "activeKey",
+          "type": "number | string",
+          "description": "Identifies the active Tab"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "title of controlling Tab if used outside Tabs component"
+        },
+        {
+          "name": "child",
+          "type": "React.ReactElement<any>",
+          "description": "Child to show in the content area"
+        },
+        {
+          "name": "children",
+          "type": "any",
+          "description": "content rendered inside the tab content area if used outside Tabs component"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "class of tab content area if used outside Tabs component"
+        },
+        {
+          "name": "eventKey",
+          "type": "number | string",
+          "description": "uniquely identifies the controlling Tab if used outside Tabs component"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "id passed from parent to identify the content section",
+          "required": true
+        },
+        {
+          "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."
+        }
+      ]
+    },
+    {
+      "name": "TabContentBody",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the tab content body.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the tab content body."
+        },
+        {
+          "name": "hasPadding",
+          "type": "boolean",
+          "description": "Indicates if there should be padding around the tab content body"
+        }
+      ]
+    },
+    {
+      "name": "TabTitleText",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Text to be rendered inside the tab button title.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the tab title text",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "TabTitleIcon",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Icon to be rendered inside the tab button title.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "additional classes added to the tab title icon",
+          "defaultValue": "''"
+        }
+      ]
+    },
+    {
+      "name": "HorizontalOverflowObject",
+      "description": "",
+      "props": [
+        {
+          "name": "defaultTitleText",
+          "type": "string",
+          "description": "The text which displays when an overflowing tab isn't selected"
+        },
+        {
+          "name": "popperProps",
+          "type": "HorizontalOverflowPopperProps",
+          "description": "Additional props to spread to the popper menu."
+        },
+        {
+          "name": "showTabCount",
+          "type": "boolean",
+          "description": "Flag which shows the count of overflowing tabs when enabled"
+        },
+        {
+          "name": "toggleAriaLabel",
+          "type": "string",
+          "description": "The aria label applied to the button which toggles the tab overflow menu"
+        }
+      ]
+    },
+    {
+      "name": "TabAction",
+      "description": "",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label for the tab action"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered in the tab action"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the tab action span"
+        },
+        {
+          "name": "isDisabled",
+          "type": "boolean",
+          "description": "Flag indicating if the tab action is disabled"
+        },
+        {
+          "name": "onClick",
+          "type": "(event: React.MouseEvent<HTMLElement, MouseEvent>) => void",
+          "description": "Click callback for tab action button"
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": ""
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": ""
+        }
+      ]
+    },
+    {
+      "name": "PopperOptions",
+      "description": "Properties of Popper that can be used to customize its behavior.",
+      "props": [
+        {
+          "name": "animationDuration",
+          "type": "number",
+          "description": "The duration of the CSS fade transition animation."
+        },
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | (() => HTMLElement) | 'inline'",
+          "description": "The container to append the popper to. Defaults to 'inline'."
+        },
+        {
+          "name": "direction",
+          "type": "'up' | 'down'",
+          "description": "popper direction"
+        },
+        {
+          "name": "distance",
+          "type": "number",
+          "description": "Distance of the popper to the trigger"
+        },
+        {
+          "name": "enableFlip",
+          "type": "boolean",
+          "description": "Enable to flip the popper when it reaches the boundary"
+        },
+        {
+          "name": "entryDelay",
+          "type": "number",
+          "description": "Delay in ms before the popper appears"
+        },
+        {
+          "name": "exitDelay",
+          "type": "number",
+          "description": "Delay in ms before the popper disappears"
+        },
+        {
+          "name": "flipBehavior",
+          "type": "| 'flip'\n    | (\n        | 'top'\n        | 'bottom'\n        | 'left'\n        | 'right'\n        | 'top-start'\n        | 'top-end'\n        | 'bottom-start'\n        | 'bottom-end'\n        | 'left-start'\n        | 'left-end'\n        | 'right-start'\n        | 'right-end'\n      )[]",
+          "description": "The behavior of how the popper flips when it reaches the boundary"
+        },
+        {
+          "name": "maxWidth",
+          "type": "string | 'trigger'",
+          "description": "Maximum width of the popper. If the value is \"trigger\", it will set the max width to the trigger element's width"
+        },
+        {
+          "name": "minWidth",
+          "type": "string | 'trigger'",
+          "description": "Minimum width of the popper. If the value is \"trigger\", it will set the min width to the trigger element's width"
+        },
+        {
+          "name": "offset",
+          "type": "OffsetOptions['offset']",
+          "description": "Override for the popper's offset"
+        },
+        {
+          "name": "onBlur",
+          "type": "(event?: FocusEvent) => void",
+          "description": "Callback function when trigger is blurred (focus leaves)"
+        },
+        {
+          "name": "onDocumentClick",
+          "type": "(event?: MouseEvent, triggerElement?: HTMLElement, popperElement?: HTMLElement) => void",
+          "description": "Callback function when document is clicked"
+        },
+        {
+          "name": "onDocumentKeyDown",
+          "type": "(event?: KeyboardEvent) => void",
+          "description": "Callback function when keydown event occurs on document"
+        },
+        {
+          "name": "onFocus",
+          "type": "(event?: FocusEvent) => void",
+          "description": "Callback function when trigger is focused"
+        },
+        {
+          "name": "onHidden",
+          "type": "() => void",
+          "description": "Callback when popper's hide transition has finished executing"
+        },
+        {
+          "name": "onHide",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper begins to transition out."
+        },
+        {
+          "name": "onMount",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper has been mounted to the DOM."
+        },
+        {
+          "name": "onMouseEnter",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse enters trigger"
+        },
+        {
+          "name": "onMouseLeave",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse leaves trigger"
+        },
+        {
+          "name": "onPopperClick",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when popper is clicked"
+        },
+        {
+          "name": "onPopperMouseEnter",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse enters popper content"
+        },
+        {
+          "name": "onPopperMouseLeave",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when mouse leaves popper content"
+        },
+        {
+          "name": "onShow",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper begins to transition in."
+        },
+        {
+          "name": "onShown",
+          "type": "() => void",
+          "description": "Lifecycle function invoked when the popper has fully transitioned in."
+        },
+        {
+          "name": "onTriggerClick",
+          "type": "(event?: MouseEvent) => void",
+          "description": "Callback function when trigger is clicked"
+        },
+        {
+          "name": "onTriggerEnter",
+          "type": "(event?: KeyboardEvent) => void",
+          "description": "Callback function when Enter key is used on trigger"
+        },
+        {
+          "name": "placement",
+          "type": "Placement",
+          "description": "Instead of direction and position can set the placement of the popper"
+        },
+        {
+          "name": "position",
+          "type": "'right' | 'left' | 'center' | 'start' | 'end'",
+          "description": "Horizontal position of the popper. Use the additional prop preventOverflow if seeing clipping."
+        },
+        {
+          "name": "positionModifiers",
+          "type": "{\n    top?: string;\n    right?: string;\n    bottom?: string;\n    left?: string;\n    topStart?: string;\n    topEnd?: string;\n    bottomStart?: string;\n    bottomEnd?: string;\n    leftStart?: string;\n    leftEnd?: string;\n    rightStart?: string;\n    rightEnd?: string;\n  }",
+          "description": "Map class names to positions, for example:\n{\n  top: styles.modifiers.top,\n  bottom: styles.modifiers.bottom,\n  left: styles.modifiers.left,\n  right: styles.modifiers.right\n}"
+        },
+        {
+          "name": "preventOverflow",
+          "type": "boolean",
+          "description": "Flag to prevent the popper from overflowing its container and becoming partially obscured."
+        },
+        {
+          "name": "width",
+          "type": "string | 'trigger'",
+          "description": "Custom width of the popper. If the value is \"trigger\", it will set the width to the trigger element's width"
+        },
+        {
+          "name": "zIndex",
+          "type": "number",
+          "description": "z-index of the popper element"
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-tabs"
+  ],
+  "examples": [
+    "Default tabs",
+    "Boxed secondary tabs",
+    "Vertical tabs",
+    "Vertical expandable tabs",
+    "Vertical expandable uncontrolled",
+    "Default overflow tabs",
+    "Horizontal overflow tabs",
+    "With tooltip react ref",
+    "Uncontrolled tabs",
+    "With adjusted inset",
+    "With page insets",
+    "With icons and text",
+    "Subtabs",
+    "Filled tabs with icons",
+    "Tabs linked to nav elements",
+    "Subtabs linked to nav elements",
+    "Tabs used for site navigation",
+    "With separate content",
+    "With tab content with body and padding",
+    "Children mounting on click",
+    "Unmounting invisible children",
+    "Toggled tab content",
+    "Dynamic tabs",
+    "With help action popover",
+    "With help and close actions"
+  ]
+};
+pageData.liveContext = {
+  createRef,
+  Fragment,
+  useEffect,
+  useRef,
+  useState,
+  RhUiUsersFillIcon,
+  RhUiContainerFillIcon,
+  DatabaseIcon,
+  RhUiServerStackFillIcon,
+  LaptopIcon,
+  RhUiInfrastructureFillIcon,
+  HelpIcon,
+  RhMicronsCloseIcon
+};
+pageData.examples = {
+  'Default tabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';\n\nexport const TabsDefault: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isBox, setIsBox] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) => {\n    setIsBox(checked);\n  };\n\n  const tooltip = (\n    <Tooltip content=\"Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\" />\n  );\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isBox={isBox}\n        aria-label=\"Tabs in the default example\"\n        role=\"region\"\n      >\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Default content - users\">\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>\n          Disabled\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>\n          ARIA Disabled\n        </Tab>\n        <Tab tooltip={tooltip} eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled>\n          ARIA Disabled (Tooltip)\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"isBox\"\n          isChecked={isBox}\n          onChange={(_event, checked) => toggleBox(checked)}\n          aria-label=\"show box variation checkbox\"\n          id=\"toggle-box-default\"\n          name=\"toggle-box-default\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"Default tabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tabs>`}
+        </code>
+        {` component contains multiple `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tab>`}
+        </code>
+        {` components that may be used to navigate between sets of content within a page.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can adjust a tab in the following ways:`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`To label a tab with text, pass a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`<TabTitleText>`}
+          </code>
+          {` component into the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`title`}
+          </code>
+          {` property of a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`<Tab>`}
+          </code>
+          {`.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`To disable a tab, use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isDisabled`}
+          </code>
+          {` property. Tabs using `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isDisabled`}
+          </code>
+          {` are not perceivable or operable by users navigating via assistive technologies.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`To disable a tab, but keep it perceivable to assistive technology users, use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isAriaDisabled`}
+          </code>
+          {` property. If a disabled tab has a tooltip, use this property instead of `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isDisabled`}
+          </code>
+          {`.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`To add a tooltip to an aria-disabled tab, use the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`tooltip`}
+          </code>
+          {` property.`}
+        </li>
+        
+
+      </ul>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Tabs can be styled as 'default' or 'boxed':`}
+      </p>
+      
+      <ul {...{"className":"pf-v6-c-content--ul pf-m-editorial ws-ul "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Default tabs do not have any borders and use a bottom line to distinguish between a selected tab, a hovered tab, and an inactive tab.`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Boxed tabs are outlined to emphasize the area that a tab spans. To preview boxed tabs in the following examples, select the 'isBox' checkbox, which sets the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isBox`}
+          </code>
+          {` property to true.`}
+        </li>
+        
+
+      </ul>
+    </Example>,
+  'Boxed secondary tabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';\n\nexport const TabsBoxSecondary: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isTabsBoxSecondary, setIsTabsBoxSecondary] = useState<boolean>(true);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleScheme = (checked: boolean) => {\n    setIsTabsBoxSecondary(checked);\n  };\n\n  const tooltip = (\n    <Tooltip content=\"Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\" />\n  );\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        variant={isTabsBoxSecondary ? 'secondary' : 'default'}\n        isBox\n        aria-label=\"Tabs in the box light variation example\"\n        role=\"region\"\n      >\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Box light variation content - users\">\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>\n          Disabled\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>\n          ARIA Disabled\n        </Tab>\n        <Tab eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled tooltip={tooltip}>\n          ARIA Disabled (Tooltip)\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"Tabs secondary variant\"\n          isChecked={isTabsBoxSecondary}\n          onChange={(_event, checked) => toggleScheme(checked)}\n          id=\"toggle-tabs-variant\"\n          name=\"toggle-tabs-variant\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"Boxed secondary tabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To change the background color of boxed tabs or the tab content, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Toggle the tab color by selecting the 'Tabs secondary variant' checkbox in the following example.`}
+      </p>
+    </Example>,
+  'Vertical tabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';\n\nexport const TabsVertical: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isBox, setIsBox] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) => {\n    setIsBox(checked);\n  };\n\n  const tooltip = (\n    <Tooltip content=\"Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\" />\n  );\n\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isVertical\n        isBox={isBox}\n        aria-label=\"Tabs in the vertical example\"\n        role=\"region\"\n      >\n        <Tab\n          eventKey={0}\n          title={\n            <TabTitleText aria-label=\"vertical\" role=\"region\">\n              Users\n            </TabTitleText>\n          }\n          aria-label=\"Vertical example content users\"\n        >\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>\n          Disabled\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>\n          ARIA Disabled\n        </Tab>\n        <Tab eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled tooltip={tooltip}>\n          ARIA Disabled (Tooltip)\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"isBox\"\n          isChecked={isBox}\n          onChange={(_event, checked) => toggleBox(checked)}\n          aria-label=\"show box variation checkbox with vertical\"\n          id=\"toggle-box-vertical\"\n          name=\"toggle-box-vertical\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"Vertical tabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Vertical tabs are placed on the left-hand side of a page or container and may appear in both 'default' and 'boxed' tab variations.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To style tabs vertically, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isVertical`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Vertical expandable tabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText } from '@patternfly/react-core';\n\nexport const TabsVerticalExpandable: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isExpanded, setIsExpanded] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const onToggle = (_event: React.MouseEvent, isExpanded: boolean) => {\n    setIsExpanded(isExpanded);\n  };\n\n  return (\n    <Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      isVertical\n      expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}\n      isExpanded={isExpanded}\n      onToggle={onToggle}\n      toggleText=\"Containers\"\n      aria-label=\"Tabs in the vertical expandable example\"\n      role=\"region\"\n    >\n      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Vertical expandable content users\">\n        Users\n      </Tab>\n      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n        Containers\n      </Tab>\n      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n        Database\n      </Tab>\n      <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n        Server\n      </Tab>\n      <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n        System\n      </Tab>\n      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n        Network\n      </Tab>\n    </Tabs>\n  );\n};\n","title":"Vertical expandable tabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Vertical tabs can be made expandable to save space. Users can select the caret to expand a menu and switch between tabs.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Expandable tabs can be enabled at different breakpoints. The following example passes `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}`}
+        </code>
+        {` into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tabs>`}
+        </code>
+        {` component.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To flag vertical tabs when they're expanded, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isExpanded`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Vertical expandable uncontrolled': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText } from '@patternfly/react-core';\nexport const TabsVerticalExpandableUncontrolled: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    <Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      isVertical\n      expandable={{ default: 'expandable', md: 'nonExpandable', lg: 'expandable' }}\n      defaultIsExpanded={false}\n      toggleText=\"Containers\"\n      aria-label=\"Tabs in the vertical expandable uncontrolled example\"\n      role=\"region\"\n    >\n      <Tab\n        eventKey={0}\n        title={<TabTitleText>Users</TabTitleText>}\n        aria-label=\"Vertical expandable uncontrolled content users\"\n      >\n        Users\n      </Tab>\n      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n        Containers\n      </Tab>\n      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n        Database\n      </Tab>\n      <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n        Server\n      </Tab>\n      <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n        System\n      </Tab>\n      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n        Network\n      </Tab>\n    </Tabs>\n  );\n};\n","title":"Vertical expandable uncontrolled","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To flag the default expanded state for uncontrolled tabs, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`defaultIsExpanded`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Default overflow tabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';\n\nexport const TabsDefaultOverflow: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isBox, setIsBox] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) => {\n    setIsBox(checked);\n  };\n\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isBox={isBox}\n        aria-label=\"Tabs in the default overflow example\"\n        role=\"region\"\n      >\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Default overflow content users\">\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n          Server\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n          System\n        </Tab>\n        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n          Network\n        </Tab>\n        <Tab eventKey={7} title={<TabTitleText>Tab item 7</TabTitleText>}>\n          Tab 7 section\n        </Tab>\n        <Tab eventKey={8} title={<TabTitleText>Tab item 8</TabTitleText>}>\n          Tab 8 section\n        </Tab>\n        <Tab eventKey={9} title={<TabTitleText>Tab item 9</TabTitleText>}>\n          Tab 9 section\n        </Tab>\n        <Tab eventKey={10} title={<TabTitleText>Tab item 10</TabTitleText>}>\n          Tab 10 section\n        </Tab>\n        <Tab eventKey={11} title={<TabTitleText>Tab item 11</TabTitleText>}>\n          Tab 11 section\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"isBox\"\n          isChecked={isBox}\n          onChange={(_event, checked) => toggleBox(checked)}\n          aria-label=\"show box variation checkbox on overflow\"\n          id=\"toggle-box-overflow\"\n          name=\"toggle-box-overflow\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"Default overflow tabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`By default, overflow is applied when there are too many tabs for the width of the container they are in. This overflow can be navigated by side-scrolling within the tabs section, or by selecting the left and right arrows.`}
+      </p>
+    </Example>,
+  'Horizontal overflow tabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';\n\nexport const TabsHorizontalOverflow: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [showTabCount, setShowTabCount] = useState(false);\n\n  const handleTabClick = (_event: any, tabIndex: string | number) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        aria-label=\"Tabs in the horizontal overflow example\"\n        role=\"region\"\n        isOverflowHorizontal={{ showTabCount }}\n      >\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Horizontal overflow content users\">\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n          Server\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n          System\n        </Tab>\n        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n          Network\n        </Tab>\n        <Tab eventKey={7} title={<TabTitleText>Tab item 7</TabTitleText>}>\n          Tab 7 section\n        </Tab>\n        <Tab eventKey={8} title={<TabTitleText>Tab item 8</TabTitleText>}>\n          Tab 8 section\n        </Tab>\n        <Tab eventKey={9} title={<TabTitleText>Tab item 9</TabTitleText>}>\n          Tab 9 section\n        </Tab>\n        <Tab eventKey={10} title={<TabTitleText>Tab item 10</TabTitleText>}>\n          Tab 10 section\n        </Tab>\n        <Tab eventKey={11} title={<TabTitleText>Tab item 11</TabTitleText>}>\n          Tab 11 section\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"Show overflowing tab count\"\n          isChecked={showTabCount}\n          onChange={() => setShowTabCount(!showTabCount)}\n          aria-label=\"show overflow tab count variation checkbox\"\n          id=\"toggle-show-count-overflow\"\n          name=\"toggle-show-count-overflow\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"Horizontal overflow tabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Horizontal overflow can be used instead of the default application. To navigate horizontal overflow tabs users can select the last tab, labeled “more”, to see the overflowed content.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To enable horizontal overflow, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isOverflowHorizontal`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In the following example, select the 'Show overflowing tab count' checkbox to add a count of overflow items to the final “more” tab.`}
+      </p>
+    </Example>,
+  'With tooltip react ref': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createRef, useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core';\n\nexport const TabsTooltipReactRef: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isBox, setIsBox] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) => {\n    setIsBox(checked);\n  };\n\n  const tooltipRef = createRef<HTMLElement>();\n\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isBox={isBox}\n        aria-label=\"Tabs in the example with a tooltip ref\"\n        role=\"region\"\n      >\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Tooltip ref content - users\">\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>\n          Disabled\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>\n          ARIA Disabled\n        </Tab>\n        <Tab\n          eventKey={5}\n          title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>}\n          isAriaDisabled\n          ref={tooltipRef}\n          aria-describedby=\"tooltip-ref1\"\n        >\n          ARIA Disabled (Tooltip)\n        </Tab>\n      </Tabs>\n      <Tooltip\n        id=\"tooltip-ref1\"\n        content=\"Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\"\n        triggerRef={tooltipRef}\n      />\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"isBox\"\n          isChecked={isBox}\n          onChange={(_event, checked) => toggleBox(checked)}\n          aria-label=\"show box variation checkbox\"\n          id=\"toggle-box-tooltip-ref\"\n          name=\"toggle-box-tooltip-ref\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"With tooltip react ref","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When using a React ref to link a tooltip to a tab component via the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`reference`}
+        </code>
+        {` property, you should avoid manually passing in a value of "off" to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-live`}
+        </code>
+        {` property. Doing so may cause the tooltip to become less accessible to assistive technologies.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The tooltip should also have the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`id`}
+        </code>
+        {` property passed in. The value of `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`id`}
+        </code>
+        {` should be passed into the tab's `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-describedby`}
+        </code>
+        {` property. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers.`}
+      </p>
+    </Example>,
+  'Uncontrolled tabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Tabs, Tab, TabTitleText, Tooltip } from '@patternfly/react-core';\n\nexport const TabsUncontrolled: React.FunctionComponent = () => {\n  const tooltip = (\n    <Tooltip content=\"Aria-disabled tabs are like disabled tabs, but focusable. Allows for tooltip support.\" />\n  );\n\n  return (\n    <>\n      <Tabs defaultActiveKey={0} aria-label=\"Tabs in the uncontrolled example\" role=\"region\">\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Uncontrolled ref content - users\">\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled>\n          Disabled\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled>\n          ARIA Disabled\n        </Tab>\n        <Tab eventKey={5} title={<TabTitleText>ARIA Disabled (Tooltip)</TabTitleText>} isAriaDisabled tooltip={tooltip}>\n          ARIA Disabled (Tooltip)\n        </Tab>\n      </Tabs>\n    </>\n  );\n};\n","title":"Uncontrolled tabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To allow the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tabs>`}
+        </code>
+        {` component to manage setting the active tab and displaying correct content itself, use uncontrolled tabs, as shown in the following example.`}
+      </p>
+    </Example>,
+  'With adjusted inset': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';\n\nexport const TabsInset: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isBox, setIsBox] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) => {\n    setIsBox(checked);\n  };\n\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        inset={{\n          default: 'insetNone',\n          md: 'insetSm',\n          xl: 'insetLg',\n          '2xl': 'inset2xl'\n        }}\n        isBox={isBox}\n        aria-label=\"Tabs in the inset example\"\n        role=\"region\"\n      >\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Inset example content users\">\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n          Server\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n          System\n        </Tab>\n        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n          Network\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"isBox\"\n          isChecked={isBox}\n          onChange={(_event, checked) => toggleBox(checked)}\n          aria-label=\"show box variation checkbox with inset\"\n          id=\"toggle-box-inset\"\n          name=\"toggle-box-inset\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"With adjusted inset","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To adjust the inset of tabs and visually separate them more, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`inset`}
+        </code>
+        {` property. You can set the inset to "insetNone", "insetSm", "insetMd", "insetLg", "insetXl", or "inset2xl" at "default", "sm", "md", "lg, "xl, and "2xl" breakpoints.`}
+      </p>
+    </Example>,
+  'With page insets': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';\n\nexport const TabsPageInsets: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isBox, setIsBox] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) => {\n    setIsBox(checked);\n  };\n\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        usePageInsets\n        isBox={isBox}\n        aria-label=\"Tabs in the page insets example\"\n        role=\"region\"\n      >\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Page insets example content users\">\n          Users\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n          Server\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n          System\n        </Tab>\n        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n          Network\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"isBox\"\n          isChecked={isBox}\n          onChange={(_event, checked) => toggleBox(checked)}\n          aria-label=\"show box variation checkbox with inset\"\n          id=\"toggle-box-page-inset\"\n          name=\"toggle-box-page-inset\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"With page insets","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To adjust the left padding of tabs, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`usePageInsets`}
+        </code>
+        {` property. This property aligns the tabs padding with the default padding of the page section, which makes it easier to align tabs with page section content.`}
+      </p>
+    </Example>,
+  'With icons and text': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core';\nimport RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';\nimport RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';\nimport DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';\nimport RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';\nimport LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';\nimport RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon';\n\nexport const TabsIconAndText: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    <Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      aria-label=\"Tabs in the icons and text example\"\n      role=\"region\"\n    >\n      <Tab\n        eventKey={0}\n        title={\n          <>\n            <TabTitleIcon>\n              <RhUiUsersFillIcon />\n            </TabTitleIcon>{' '}\n            <TabTitleText>Users</TabTitleText>{' '}\n          </>\n        }\n        aria-label=\"icons and text content\"\n      >\n        Users\n      </Tab>\n      <Tab\n        eventKey={1}\n        title={\n          <>\n            <TabTitleIcon>\n              <RhUiContainerFillIcon />\n            </TabTitleIcon>{' '}\n            <TabTitleText>Containers</TabTitleText>{' '}\n          </>\n        }\n      >\n        Containers\n      </Tab>\n      <Tab\n        eventKey={2}\n        title={\n          <>\n            <TabTitleIcon>\n              <DatabaseIcon />\n            </TabTitleIcon>{' '}\n            <TabTitleText>Database</TabTitleText>{' '}\n          </>\n        }\n      >\n        Database\n      </Tab>\n      <Tab\n        eventKey={3}\n        title={\n          <>\n            <TabTitleIcon>\n              <RhUiServerStackFillIcon />\n            </TabTitleIcon>{' '}\n            <TabTitleText>Server</TabTitleText>{' '}\n          </>\n        }\n      >\n        Server\n      </Tab>\n      <Tab\n        eventKey={4}\n        title={\n          <>\n            <TabTitleIcon>\n              <LaptopIcon />\n            </TabTitleIcon>{' '}\n            <TabTitleText>System</TabTitleText>{' '}\n          </>\n        }\n      >\n        System\n      </Tab>\n      <Tab\n        eventKey={6}\n        title={\n          <>\n            <TabTitleIcon>\n              <RhUiInfrastructureFillIcon />\n            </TabTitleIcon>{' '}\n            <TabTitleText>Network</TabTitleText>{' '}\n          </>\n        }\n      >\n        Network\n      </Tab>\n    </Tabs>\n  );\n};\n","title":"With icons and text","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can render different content in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`title`}
+        </code>
+        {` property of a tab to add icons and text.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add an icon to a tab, pass a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TabTitleIcon>`}
+        </code>
+        {` component that contains the icon of your choice into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`title`}
+        </code>
+        {`. To use an icon alongside styled text, keep the text in the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TabTitleText>`}
+        </code>
+        {` component.`}
+      </p>
+    </Example>,
+  'Subtabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core';\n\nexport const TabsSubtabs: React.FunctionComponent = () => {\n  const [activeTabKey1, setActiveTabKey1] = useState<string | number>(0);\n  const [activeTabKey2, setActiveTabKey2] = useState<string | number>(0);\n  const [isBox, setIsBox] = useState<boolean>(false);\n\n  // Toggle currently active primary tab\n  const handleTabClickFirst = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey1(tabIndex);\n  };\n\n  // Toggle currently active subtab\n  const handleTabClickSecond = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey2(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) => {\n    setIsBox(checked);\n  };\n\n  return (\n    <div>\n      <Tabs\n        activeKey={activeTabKey1}\n        onSelect={handleTabClickFirst}\n        isBox={isBox}\n        aria-label=\"Tabs in the tabs with subtabs example\"\n        tabListAriaLabel=\"Primary\"\n        role=\"region\"\n      >\n        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} aria-label=\"Tabs with subtabs content users\">\n          <Tabs\n            aria-label=\"subtabs for users\"\n            role=\"region\"\n            activeKey={activeTabKey2}\n            isSubtab\n            tabListAriaLabel=\"Users\"\n            onSelect={handleTabClickSecond}\n          >\n            <Tab eventKey={20} title={<TabTitleText>Subtab item 1</TabTitleText>}>\n              Subtab item 1 item section\n            </Tab>\n            <Tab eventKey={21} title={<TabTitleText>Subtab item 2</TabTitleText>}>\n              Subtab item 2 section\n            </Tab>\n            <Tab eventKey={22} title={<TabTitleText>Subtab item 3</TabTitleText>}>\n              Subtab item 3 section\n            </Tab>\n            <Tab eventKey={23} title={<TabTitleText>Subtab item 4</TabTitleText>}>\n              Subtab item 4 section\n            </Tab>\n            <Tab eventKey={24} title={<TabTitleText>Subtab item 5</TabTitleText>}>\n              Subtab item 5 section\n            </Tab>\n            <Tab eventKey={25} title={<TabTitleText>Subtab item 6</TabTitleText>}>\n              Subtab item 6 section\n            </Tab>\n            <Tab eventKey={26} title={<TabTitleText>Subtab item 7</TabTitleText>}>\n              Subtab item 7 section\n            </Tab>\n            <Tab eventKey={27} title={<TabTitleText>Subtab item 8</TabTitleText>}>\n              Subtab item 8 section\n            </Tab>\n          </Tabs>\n        </Tab>\n        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>}>\n          Containers\n        </Tab>\n        <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>}>\n          Database\n        </Tab>\n        <Tab eventKey={3} title={<TabTitleText>Server</TabTitleText>}>\n          Server\n        </Tab>\n        <Tab eventKey={4} title={<TabTitleText>System</TabTitleText>}>\n          System\n        </Tab>\n        <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>}>\n          Network\n        </Tab>\n        <Tab eventKey={7} title={<TabTitleText>Tab item 7</TabTitleText>}>\n          Tab 7 section\n        </Tab>\n        <Tab eventKey={8} title={<TabTitleText>Tab item 8</TabTitleText>}>\n          Tab 8 section\n        </Tab>\n        <Tab eventKey={9} title={<TabTitleText>Tab item 9</TabTitleText>}>\n          Tab 9 section\n        </Tab>\n        <Tab eventKey={10} title={<TabTitleText>Tab item 10</TabTitleText>}>\n          Tab 10 section\n        </Tab>\n        <Tab eventKey={11} title={<TabTitleText>Tab item 11</TabTitleText>}>\n          Tab 11 section\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"isBox\"\n          isChecked={isBox}\n          onChange={(_event, checked) => toggleBox(checked)}\n          aria-label=\"show box variation checkbox with sub tabs\"\n          id=\"toggle-box-subtab\"\n          name=\"toggle-box-subtab\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"Subtabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use subtabs within other components, like modals. Subtabs have less visually prominent styling.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To apply subtab styling to tabs, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isSubtab`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`For accessibility, give the primary tablist an accessible name (for example, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabListAriaLabel="Primary"`}
+        </code>
+        {`) and give any subtab tablist an accessible name that matches the currently selected primary tab (for example, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabListAriaLabel="Users"`}
+        </code>
+        {`).`}
+      </p>
+    </Example>,
+  'Filled tabs with icons': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core';\nimport RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';\nimport RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';\nimport DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';\n\nexport const TabsFilledWithIcons: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isBox, setIsBox] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const toggleBox = (checked: boolean) => {\n    setIsBox(checked);\n  };\n\n  return (\n    <div>\n      <Tabs\n        isFilled\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        isBox={isBox}\n        aria-label=\"Tabs in the filled with icons example\"\n        role=\"region\"\n      >\n        <Tab\n          eventKey={0}\n          title={\n            <>\n              <TabTitleIcon>\n                <RhUiUsersFillIcon />\n              </TabTitleIcon>{' '}\n              <TabTitleText>Users</TabTitleText>{' '}\n            </>\n          }\n          aria-label=\"filled tabs with icons content users\"\n        >\n          Users\n        </Tab>\n        <Tab\n          eventKey={1}\n          title={\n            <>\n              <TabTitleIcon>\n                <RhUiContainerFillIcon />\n              </TabTitleIcon>{' '}\n              <TabTitleText>Containers</TabTitleText>{' '}\n            </>\n          }\n        >\n          Containers\n        </Tab>\n        <Tab\n          eventKey={2}\n          title={\n            <>\n              <TabTitleIcon>\n                <DatabaseIcon />\n              </TabTitleIcon>{' '}\n              <TabTitleText>Database</TabTitleText>{' '}\n            </>\n          }\n        >\n          Database\n        </Tab>\n      </Tabs>\n      <div style={{ marginTop: '20px' }}>\n        <Checkbox\n          label=\"isBox\"\n          isChecked={isBox}\n          onChange={(_event, checked) => toggleBox(checked)}\n          aria-label=\"show box variation checkbox with filled icon tabs\"\n          id=\"toggle-box-filled-icon\"\n          name=\"toggle-box-filled-icon\"\n        />\n      </div>\n    </div>\n  );\n};\n","title":"Filled tabs with icons","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To allow tabs to fill the available width of the page section, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isFilled`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Tabs linked to nav elements': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';\n\nexport const TabsNav: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n  return (\n    <Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      component={TabsComponent.nav}\n      aria-label=\"Tabs in the nav element example\"\n    >\n      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href=\"#users\" aria-label=\"Nav element content users\">\n        Users\n      </Tab>\n      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href=\"#containers\">\n        Containers\n      </Tab>\n      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href=\"#database\">\n        Database\n      </Tab>\n      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href=\"#disabled\">\n        Disabled\n      </Tab>\n      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href=\"#aria-disabled\">\n        ARIA Disabled\n      </Tab>\n      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href=\"#network\">\n        Network\n      </Tab>\n    </Tabs>\n  );\n};\n","title":"Tabs linked to nav elements","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To let tabs link to nav elements, pass `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`{TabsComponent.nav}`}
+        </code>
+        {` into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`component`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Nav tabs should use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`href`}
+        </code>
+        {` property to link the tab to the URL of another page or page section. A tab with an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`href`}
+        </code>
+        {` will render as an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<a>`}
+        </code>
+        {` instead of a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<button>`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Subtabs linked to nav elements': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core';\n\nexport const TabsNavSubtab: React.FunctionComponent = () => {\n  const [activeTabKey1, setActiveTabKey1] = useState<string | number>(0);\n  const [activeTabKey2, setActiveTabKey2] = useState<string | number>(0);\n\n  // Toggle currently active primary tab\n  const handleTabClickFirst = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey1(tabIndex);\n  };\n\n  // Toggle currently active secondary tab\n  const handleTabClickSecond = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey2(tabIndex);\n  };\n\n  return (\n    <Tabs\n      activeKey={activeTabKey1}\n      onSelect={handleTabClickFirst}\n      component={TabsComponent.nav}\n      aria-label=\"Tabs in the sub tabs with nav element example\"\n      tabListAriaLabel=\"Primary\"\n    >\n      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href=\"#\" aria-label=\"Subtabs with nav content users\">\n        <Tabs\n          activeKey={activeTabKey2}\n          isSubtab\n          onSelect={handleTabClickSecond}\n          aria-label=\"Local secondary\"\n          component={TabsComponent.nav}\n          tabListAriaLabel=\"Users\"\n        >\n          <Tab eventKey={20} title={<TabTitleText>Item 1</TabTitleText>} href=\"#\">\n            Item 1 item section\n          </Tab>\n          <Tab eventKey={21} title={<TabTitleText>Item 2</TabTitleText>} href=\"#\">\n            Item 2 section\n          </Tab>\n          <Tab eventKey={22} title={<TabTitleText>Item 3</TabTitleText>} href=\"#\">\n            Item 3 section\n          </Tab>\n          <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href=\"#\">\n            Disabled\n          </Tab>\n          <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href=\"#\">\n            ARIA Disabled\n          </Tab>\n          <Tab eventKey={25} title={<TabTitleText>Item 6</TabTitleText>} href=\"#\">\n            Item 6 section\n          </Tab>\n        </Tabs>\n      </Tab>\n      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href=\"#\">\n        Containers\n      </Tab>\n      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href=\"#\">\n        Database\n      </Tab>\n      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href=\"#\">\n        Disabled\n      </Tab>\n      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href=\"#\">\n        ARIA Disabled\n      </Tab>\n      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href=\"#\">\n        Network\n      </Tab>\n    </Tabs>\n  );\n};\n","title":"Subtabs linked to nav elements","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Subtabs can also link to nav elements.`}
+      </p>
+    </Example>,
+  'Tabs used for site navigation': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText } from '@patternfly/react-core';\n\nexport const TabsSiteNav: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n  return (\n    <Tabs\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      isNav={true}\n      aria-label=\"Site navigation with nav styling example\"\n    >\n      <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href=\"#users\" aria-label=\"Nav element content users\">\n        Users\n      </Tab>\n      <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href=\"#containers\">\n        Containers\n      </Tab>\n      <Tab eventKey={2} title={<TabTitleText>Database</TabTitleText>} href=\"#database\">\n        Database\n      </Tab>\n      <Tab eventKey={3} title={<TabTitleText>Disabled</TabTitleText>} isDisabled href=\"#disabled\">\n        Disabled\n      </Tab>\n      <Tab eventKey={4} title={<TabTitleText>ARIA Disabled</TabTitleText>} isAriaDisabled href=\"#aria-disabled\">\n        ARIA Disabled\n      </Tab>\n      <Tab eventKey={6} title={<TabTitleText>Network</TabTitleText>} href=\"#network\">\n        Network\n      </Tab>\n    </Tabs>\n  );\n};\n","title":"Tabs used for site navigation","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Site navigation tabs`}
+      </p>
+    </Example>,
+  'With separate content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createRef, Fragment, useState } from 'react';\nimport { Tabs, Tab, TabTitleText, TabContent } from '@patternfly/react-core';\n\nexport const TabsSeparateContent: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const contentRef1 = createRef<HTMLElement>();\n  const contentRef2 = createRef<HTMLElement>();\n  const contentRef3 = createRef<HTMLElement>();\n\n  return (\n    <Fragment>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        aria-label=\"Tabs in the separate content example\"\n        role=\"region\"\n      >\n        <Tab\n          eventKey={0}\n          title={<TabTitleText>Tab item 1</TabTitleText>}\n          tabContentId=\"refTab1Section\"\n          tabContentRef={contentRef1}\n        />\n        <Tab\n          eventKey={1}\n          title={<TabTitleText>Tab item 2</TabTitleText>}\n          tabContentId=\"refTab2Section\"\n          tabContentRef={contentRef2}\n        />\n        <Tab\n          eventKey={2}\n          title={<TabTitleText>Tab item 3</TabTitleText>}\n          tabContentId=\"refTab3Section\"\n          tabContentRef={contentRef3}\n        />\n      </Tabs>\n      <div>\n        <TabContent\n          eventKey={0}\n          id=\"refTab1Section\"\n          ref={contentRef1}\n          aria-label=\"This is content for the first separate content tab\"\n          hidden={activeTabKey !== 0}\n        >\n          Tab 1 section\n        </TabContent>\n        <TabContent\n          eventKey={1}\n          id=\"refTab2Section\"\n          ref={contentRef2}\n          aria-label=\"This is content for the second separate content tab\"\n          hidden={activeTabKey !== 1}\n        >\n          Tab 2 section\n        </TabContent>\n        <TabContent\n          eventKey={2}\n          id=\"refTab3Section\"\n          ref={contentRef3}\n          aria-label=\"This is content for the third separate content tab\"\n          hidden={activeTabKey !== 2}\n        >\n          Tab 3 section\n        </TabContent>\n      </div>\n    </Fragment>\n  );\n};\n","title":"With separate content","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`If a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TabContent>`}
+        </code>
+        {` component is defined outside of a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tabs>`}
+        </code>
+        {` component, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabContentRef`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabContentId`}
+        </code>
+        {` properties. The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`hidden`}
+        </code>
+        {` property is used on `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`TabContent`}
+        </code>
+        {` to set the initial visible content.`}
+      </p>
+    </Example>,
+  'With tab content with body and padding': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createRef, Fragment, useState } from 'react';\nimport { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core';\n\nexport const TabContentWithBodyPadding: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const contentRef1 = createRef<HTMLElement>();\n  const contentRef2 = createRef<HTMLElement>();\n  const contentRef3 = createRef<HTMLElement>();\n\n  return (\n    <Fragment>\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        aria-label=\"Tabs in the body and padding example\"\n        role=\"region\"\n      >\n        <Tab\n          eventKey={0}\n          title={<TabTitleText>Tab item 1</TabTitleText>}\n          tabContentId=\"tab1SectionBodyPadding\"\n          tabContentRef={contentRef1}\n        />\n        <Tab\n          eventKey={1}\n          title={<TabTitleText>Tab item 2</TabTitleText>}\n          tabContentId=\"tab2SectionBodyPadding\"\n          tabContentRef={contentRef2}\n        />\n        <Tab\n          eventKey={2}\n          title={<TabTitleText>Tab item 3</TabTitleText>}\n          tabContentId=\"tab3SectionBodyPadding\"\n          tabContentRef={contentRef3}\n        />\n      </Tabs>\n      <div>\n        <TabContent eventKey={0} id=\"tab1SectionBodyPadding\" ref={contentRef1}>\n          <TabContentBody hasPadding> Tab 1 section with body and padding </TabContentBody>\n        </TabContent>\n        <TabContent eventKey={1} id=\"tab2SectionBodyPadding\" ref={contentRef2} hidden>\n          <TabContentBody hasPadding> Tab 2 section with body and padding </TabContentBody>\n        </TabContent>\n        <TabContent eventKey={2} id=\"tab3SectionBodyPadding\" ref={contentRef3} hidden>\n          <TabContentBody hasPadding> Tab 3 section with body and padding </TabContentBody>\n        </TabContent>\n      </div>\n    </Fragment>\n  );\n};\n","title":"With tab content with body and padding","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add a content body to a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TabContent>`}
+        </code>
+        {` component, pass a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TabContentBody>`}
+        </code>
+        {`. To add padding to the body section, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`hasPadding`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Children mounting on click': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText } from '@patternfly/react-core';\n\nexport const TabsChildrenMounting: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    <Tabs\n      mountOnEnter\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      aria-label=\"Tabs in the children mounting on click example\"\n      role=\"region\"\n    >\n      <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} aria-label=\"Tab 1\">\n        Tab 1 section\n      </Tab>\n      <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} aria-label=\"Tab 2\">\n        Tab 2 section\n      </Tab>\n      <Tab eventKey={2} title={<TabTitleText>Tab item 3</TabTitleText>} aria-label=\"Tab 3\">\n        Tab 3 section\n      </Tab>\n    </Tabs>\n  );\n};\n","title":"Children mounting on click","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To mount tab children (add to the DOM) when a tab is clicked, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`mountOnEnter`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note that this property does not create the tab children until the tab is clicked, so they are not preloaded into the DOM.`}
+      </p>
+    </Example>,
+  'Unmounting invisible children': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useState } from 'react';\nimport { Tabs, Tab, TabTitleText } from '@patternfly/react-core';\n\nexport const TabsUnmountingInvisibleChildren: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  return (\n    <Tabs\n      unmountOnExit\n      activeKey={activeTabKey}\n      onSelect={handleTabClick}\n      aria-label=\"Tabs in the unmounting invisible children example\"\n      role=\"region\"\n    >\n      <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} aria-label=\"Invisible children tab 1\">\n        Tab 1 section\n      </Tab>\n      <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} aria-label=\"Invisible children tab 2\">\n        Tab 2 section\n      </Tab>\n      <Tab eventKey={2} title={<TabTitleText>Tab item 3</TabTitleText>} aria-label=\"Invisible children tab 3\">\n        Tab 3 section\n      </Tab>\n    </Tabs>\n  );\n};\n","title":"Unmounting invisible children","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To unmount tab children (remove from the DOM) when they are no longer visible, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`unmountOnExit`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Toggled tab content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createRef, Fragment, useState } from 'react';\nimport { Tabs, Tab, TabContent, Button, Divider } from '@patternfly/react-core';\n\nexport const TabsToggledSeparateContent: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<string | number>(0);\n  const [isTab2Hidden, setIsTab2Hidden] = useState<boolean>(false);\n  // Toggle currently active tab\n  const handleTabClick = (\n    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,\n    tabIndex: string | number\n  ) => {\n    setActiveTabKey(tabIndex);\n  };\n\n  const contentRef1 = createRef<HTMLElement>();\n  const contentRef2 = createRef<HTMLElement>();\n  const contentRef3 = createRef<HTMLElement>();\n\n  return (\n    <Fragment>\n      <Button onClick={() => setIsTab2Hidden(!isTab2Hidden)}>{isTab2Hidden ? 'Show' : 'Hide'} tab 2</Button>\n      <Divider style={{ paddingTop: '1rem', paddingBottom: '1rem' }} />\n      <Tabs\n        activeKey={activeTabKey}\n        onSelect={handleTabClick}\n        aria-label=\"Tabs in the toggled separate content example\"\n        role=\"region\"\n      >\n        <Tab eventKey={0} title=\"Tab item 1\" tabContentId=\"tab1SectionSeparateContent\" tabContentRef={contentRef1} />\n        {!isTab2Hidden && (\n          <Tab eventKey={1} title=\"Tab item 2\" tabContentId=\"tab2SectionSeparateContent\" tabContentRef={contentRef2} />\n        )}\n        <Tab eventKey={2} title=\"Tab item 3\" tabContentId=\"tab3SectionSeparateContent\" tabContentRef={contentRef3} />\n      </Tabs>\n      <div>\n        <TabContent\n          eventKey={0}\n          id=\"tab1SectionSeparateContent\"\n          ref={contentRef1}\n          aria-label=\"This is content for the first toggled separate content tab\"\n        >\n          Tab 1 section\n        </TabContent>\n        {!isTab2Hidden && (\n          <TabContent\n            eventKey={1}\n            id=\"tab2SectionSeparateContent\"\n            ref={contentRef2}\n            aria-label=\"This is content for the second toggled separate content tab\"\n            hidden\n          >\n            Tab 2 section\n          </TabContent>\n        )}\n        <TabContent\n          eventKey={2}\n          id=\"tab3SectionSeparateContent\"\n          ref={contentRef3}\n          aria-label=\"This is content for the third toggled separate content tab\"\n          hidden\n        >\n          Tab 3 section\n        </TabContent>\n      </div>\n    </Fragment>\n  );\n};\n","title":"Toggled tab content","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You may control tabs from outside of the tabs component. For example, select the "Hide tab 2" button below to make "Tab item 2" invisible.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The tab its content should only be mounted when the tab is visible.`}
+      </p>
+    </Example>,
+  'Dynamic tabs': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useEffect, useRef, useState } from 'react';\nimport { Tabs, Tab, TabTitleText } from '@patternfly/react-core';\n\nexport const TabsDynamic: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<number>(0);\n  const [tabs, setTabs] = useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);\n  const [newTabNumber, setNewTabNumber] = useState<number>(4);\n  const tabComponentRef = useRef<any>(undefined);\n  const firstMount = useRef(true);\n\n  const onClose = (event: any, tabIndex: string | number) => {\n    const tabIndexNum = tabIndex as number;\n    let nextTabIndex = activeTabKey;\n    if (tabIndexNum < activeTabKey) {\n      // if a preceding tab is closing, keep focus on the new index of the current tab\n      nextTabIndex = activeTabKey - 1 > 0 ? activeTabKey - 1 : 0;\n    } else if (activeTabKey === tabs.length - 1) {\n      // if the closing tab is the last tab, focus the preceding tab\n      nextTabIndex = tabs.length - 2 > 0 ? tabs.length - 2 : 0;\n    }\n    setActiveTabKey(nextTabIndex);\n    setTabs(tabs.filter((tab, index) => index !== tabIndex));\n  };\n\n  const onAdd = () => {\n    setTabs([...tabs, `Terminal ${newTabNumber}`]);\n    setActiveTabKey(tabs.length);\n    setNewTabNumber(newTabNumber + 1);\n  };\n\n  useEffect(() => {\n    if (firstMount.current) {\n      firstMount.current = false;\n      return;\n    } else {\n      const first = tabComponentRef.current.tabList.current.childNodes[activeTabKey];\n      first && first.firstChild.focus();\n    }\n  }, [tabs]);\n\n  return (\n    <Tabs\n      activeKey={activeTabKey}\n      onSelect={(event: any, tabIndex: string | number) => setActiveTabKey(tabIndex as number)}\n      onClose={onClose}\n      onAdd={onAdd}\n      aria-label=\"Tabs in the addable/closeable example\"\n      addButtonAriaLabel=\"Add new tab\"\n      role=\"region\"\n      ref={tabComponentRef}\n    >\n      {tabs.map((tab, index) => (\n        <Tab\n          key={index}\n          eventKey={index}\n          aria-label={`Dynamic ${tab}`}\n          title={<TabTitleText>{tab}</TabTitleText>}\n          closeButtonAriaLabel={`Close ${tab}`}\n          isCloseDisabled={tabs.length === 1}\n        >\n          {tab}\n        </Tab>\n      ))}\n    </Tabs>\n  );\n};\n","title":"Dynamic tabs","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To enable closeable tabs, pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onClose`}
+        </code>
+        {` property to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tabs>`}
+        </code>
+        {` component. To enable a button that adds new tabs, pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onAdd`}
+        </code>
+        {` property to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tabs>`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'With help action popover': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createRef, useState } from 'react';\nimport { Tabs, Tab, TabTitleText, TabAction, Popover } from '@patternfly/react-core';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\n\nexport const TabsHelp: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<number>(0);\n\n  const tabs = ['Users', 'Containers', 'Database', 'Disabled', 'ARIA disabled', 'Help disabled'];\n\n  const helpPopover = (header: string, popoverRef: React.RefObject<any>) => (\n    <Popover\n      headerContent={<div>{header}</div>}\n      bodyContent={\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n        </div>\n      }\n      footerContent=\"Popover footer\"\n      triggerRef={popoverRef}\n    />\n  );\n\n  return (\n    <Tabs\n      activeKey={activeTabKey}\n      onSelect={(event: any, tabIndex: string | number) => setActiveTabKey(tabIndex as number)}\n      aria-label=\"Tabs in the help action example\"\n      role=\"region\"\n    >\n      {tabs.map((tab, index) => {\n        const ref = createRef<HTMLElement>();\n\n        return (\n          <Tab\n            key={index}\n            eventKey={index}\n            aria-label={`Help action content - ${tab}`}\n            title={<TabTitleText>{tab}</TabTitleText>}\n            {...(tab === 'Disabled' && { isDisabled: true })}\n            {...(tab === 'ARIA disabled' && { isAriaDisabled: true })}\n            actions={\n              <>\n                <TabAction\n                  aria-label={`Help action for ${tab}`}\n                  ref={ref}\n                  {...(tab === 'Help disabled' && { isDisabled: true })}\n                >\n                  <HelpIcon />\n                </TabAction>\n                {helpPopover(`Help popover for ${tab}`, ref)}\n              </>\n            }\n          >\n            {tab}\n          </Tab>\n        );\n      })}\n    </Tabs>\n  );\n};\n","title":"With help action popover","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You may add a help action to a tab to provide users with additional context in a popover.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To render an action beside the tab content, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`actions`}
+        </code>
+        {` property of a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Tab>`}
+        </code>
+        {`. Pass a popover and a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TabsAction>`}
+        </code>
+        {` component into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`actions`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'With help and close actions': props => 
+    <Example {...pageData} {...props} {...{"code":"import { createRef, useEffect, useRef, useState } from 'react';\nimport { Tabs, Tab, TabTitleText, Popover, TabAction } from '@patternfly/react-core';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\nimport RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';\n\nexport const TabsHelpAndClose: React.FunctionComponent = () => {\n  const [activeTabKey, setActiveTabKey] = useState<number>(0);\n  const [tabs, setTabs] = useState<string[]>(['Terminal 1', 'Terminal 2', 'Terminal 3']);\n  const tabComponentRef = useRef<any>(undefined);\n  const firstMount = useRef(true);\n\n  const onClose = (event: any, tabIndex: string | number) => {\n    const tabIndexNum = tabIndex as number;\n    let nextTabIndex = activeTabKey;\n    if (tabIndexNum < activeTabKey) {\n      // if a preceding tab is closing, keep focus on the new index of the current tab\n      nextTabIndex = activeTabKey - 1 > 0 ? activeTabKey - 1 : 0;\n    } else if (activeTabKey === tabs.length - 1) {\n      // if the closing tab is the last tab, focus the preceding tab\n      nextTabIndex = tabs.length - 2 > 0 ? tabs.length - 2 : 0;\n    }\n    setActiveTabKey(nextTabIndex);\n    setTabs(tabs.filter((tab, index) => index !== tabIndex));\n  };\n\n  const helpPopover = (header: string, popoverRef: React.RefObject<any>) => (\n    <Popover\n      headerContent={<div>{header}</div>}\n      bodyContent={\n        <div>\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.\n        </div>\n      }\n      footerContent=\"Popover footer\"\n      triggerRef={popoverRef}\n    />\n  );\n\n  useEffect(() => {\n    if (firstMount.current) {\n      firstMount.current = false;\n      return;\n    } else {\n      const first = tabComponentRef.current.tabList.current.childNodes[activeTabKey];\n      first && first.firstChild.focus();\n    }\n  }, [tabs]);\n\n  return (\n    <Tabs\n      activeKey={activeTabKey}\n      onSelect={(event: any, tabIndex: string | number) => setActiveTabKey(tabIndex as number)}\n      aria-label=\"Tabs in the help enabled and closeable example\"\n      role=\"region\"\n      ref={tabComponentRef}\n    >\n      {tabs.map((tab, index) => {\n        const ref = createRef<HTMLElement>();\n\n        return (\n          <Tab\n            key={index}\n            eventKey={index}\n            aria-label={`Help action and closable content - ${tab}`}\n            title={<TabTitleText>{tab}</TabTitleText>}\n            actions={\n              <>\n                <TabAction aria-label={`Help for ${tab}`} ref={ref}>\n                  <HelpIcon />\n                </TabAction>\n                <TabAction\n                  aria-label={`Close ${tab}`}\n                  onClick={(e) => onClose(e, index)}\n                  isDisabled={tabs.length === 1}\n                >\n                  <RhMicronsCloseIcon />\n                </TabAction>\n                {helpPopover(`Help popover for ${tab}`, ref)}\n              </>\n            }\n          >\n            {tab}\n          </Tab>\n        );\n      })}\n    </Tabs>\n  );\n};\n","title":"With help and close actions","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add multiple actions to a tab, create a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<TabAction>`}
+        </code>
+        {` component for each action.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example passes in both help popover and close actions.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Default tabs"])}
+    {React.createElement(pageData.examples["Boxed secondary tabs"])}
+    {React.createElement(pageData.examples["Vertical tabs"])}
+    {React.createElement(pageData.examples["Vertical expandable tabs"])}
+    {React.createElement(pageData.examples["Vertical expandable uncontrolled"])}
+    {React.createElement(pageData.examples["Default overflow tabs"])}
+    {React.createElement(pageData.examples["Horizontal overflow tabs"])}
+    {React.createElement(pageData.examples["With tooltip react ref"])}
+    {React.createElement(pageData.examples["Uncontrolled tabs"])}
+    {React.createElement(pageData.examples["With adjusted inset"])}
+    {React.createElement(pageData.examples["With page insets"])}
+    {React.createElement(pageData.examples["With icons and text"])}
+    {React.createElement(pageData.examples["Subtabs"])}
+    {React.createElement(pageData.examples["Filled tabs with icons"])}
+    {React.createElement(pageData.examples["Tabs linked to nav elements"])}
+    {React.createElement(pageData.examples["Subtabs linked to nav elements"])}
+    {React.createElement(pageData.examples["Tabs used for site navigation"])}
+    {React.createElement(pageData.examples["With separate content"])}
+    {React.createElement(pageData.examples["With tab content with body and padding"])}
+    {React.createElement(pageData.examples["Children mounting on click"])}
+    {React.createElement(pageData.examples["Unmounting invisible children"])}
+    {React.createElement(pageData.examples["Toggled tab content"])}
+    {React.createElement(pageData.examples["Dynamic tabs"])}
+    {React.createElement(pageData.examples["With help action popover"])}
+    {React.createElement(pageData.examples["With help and close actions"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsTabsReactDocs';
+Component.pageData = pageData;
+
+export default Component;