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

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

@@ -0,0 +1,932 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useState, useLayoutEffect, useRef } from 'react';
+import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+const pageData = {
+  "id": "Toolbar",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/toolbar/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Toolbar/examples/Toolbar.md",
+  "relPath": "packages/react-core/src/components/Toolbar/examples/Toolbar.md",
+  "propComponents": [
+    {
+      "name": "Toolbar",
+      "description": "",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered as rows in the data toolbar"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of the data toolbar"
+        },
+        {
+          "name": "clearAllFilters",
+          "type": "() => void",
+          "description": "Optional callback for clearing all filters in the toolbar"
+        },
+        {
+          "name": "clearFiltersButtonText",
+          "type": "string",
+          "description": "Text to display in the clear all filters button"
+        },
+        {
+          "name": "collapseListedFiltersBreakpoint",
+          "type": "'all' | 'md' | 'lg' | 'xl' | '2xl'",
+          "description": "The breakpoint at which the listed filters in label groups are collapsed down to a summary"
+        },
+        {
+          "name": "colorVariant",
+          "type": "ToolbarColorVariant | 'default' | 'no-background' | 'primary' | 'secondary'",
+          "description": "Background color variant of the toolbar"
+        },
+        {
+          "name": "customLabelGroupContent",
+          "type": "React.ReactNode",
+          "description": "Custom content appended to the filter generated label group. To maintain spacing and styling, each node should be wrapped in a ToolbarItem or ToolbarGroup. This property will remove the default \"Clear all filters\" button."
+        },
+        {
+          "name": "hasNoPadding",
+          "type": "boolean",
+          "description": "Flag indicating the toolbar padding is removed"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "Id of the data toolbar"
+        },
+        {
+          "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": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if a data toolbar toggle group's expandable content is expanded"
+        },
+        {
+          "name": "isFullHeight",
+          "type": "boolean",
+          "description": "Flag indicating the toolbar height should expand to the full height of the container"
+        },
+        {
+          "name": "isStatic",
+          "type": "boolean",
+          "description": "Flag indicating the toolbar is static"
+        },
+        {
+          "name": "isSticky",
+          "type": "boolean",
+          "description": "Flag indicating the toolbar should stick to the top of its container. This property applies both the sticky position and styling."
+        },
+        {
+          "name": "isStickyBase",
+          "type": "boolean",
+          "description": "Flag indicating the toolbar should have sticky positioning to the top of its container",
+          "beta": true
+        },
+        {
+          "name": "isStickyStuck",
+          "type": "boolean",
+          "description": "Flag indicating the toolbar should have stuck styling, when the toolbar is not at the top of the scroll container",
+          "beta": true
+        },
+        {
+          "name": "isVertical",
+          "type": "boolean",
+          "description": "Flag indicating the toolbar has a vertical orientation",
+          "beta": true
+        },
+        {
+          "name": "numberOfFiltersText",
+          "type": "(numberOfFilters: number) => string",
+          "description": "Text to display in the total number of applied filters ToolbarFilter"
+        },
+        {
+          "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": "toggleIsExpanded",
+          "type": "() => void",
+          "description": "A callback for setting the isExpanded flag"
+        }
+      ]
+    },
+    {
+      "name": "ToolbarContent",
+      "description": "",
+      "props": [
+        {
+          "name": "alignItems",
+          "type": "'start' | 'center' | 'baseline' | 'default'",
+          "description": "Vertical alignment of children"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered as children of the content row"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of the data toolbar content row"
+        },
+        {
+          "name": "clearAllFilters",
+          "type": "() => void",
+          "description": "Optional callback for clearing all filters in the toolbar"
+        },
+        {
+          "name": "clearFiltersButtonText",
+          "type": "string",
+          "description": "Text to display in the clear all filters button"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if a data toolbar toggle group's expandable content is expanded",
+          "defaultValue": "false"
+        },
+        {
+          "name": "rowWrap",
+          "type": "{\n  default?: 'wrap' | 'nowrap';\n  sm?: 'wrap' | 'nowrap';\n  md?: 'wrap' | 'nowrap';\n  lg?: 'wrap' | 'nowrap';\n  xl?: 'wrap' | 'nowrap';\n  '2xl'?: 'wrap' | 'nowrap';\n}",
+          "description": "Value to set for content wrapping at various breakpoints"
+        },
+        {
+          "name": "showClearFiltersButton",
+          "type": "boolean",
+          "description": "Flag indicating that the clear all filters button should be visible",
+          "defaultValue": "false"
+        },
+        {
+          "name": "toolbarId",
+          "type": "string",
+          "description": "Id of the parent Toolbar component"
+        },
+        {
+          "name": "visibility",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various width breakpoints."
+        },
+        {
+          "name": "visibilityAtHeight",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various height breakpoints."
+        }
+      ]
+    },
+    {
+      "name": "ToolbarGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "align",
+          "type": "{\n  default?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  md?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  lg?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  xl?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';\n}",
+          "description": "Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis"
+        },
+        {
+          "name": "alignItems",
+          "type": "'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'",
+          "description": "Vertical alignment of children"
+        },
+        {
+          "name": "alignSelf",
+          "type": "'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'",
+          "description": "Vertical alignment"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered inside the data toolbar group"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of the data toolbar group"
+        },
+        {
+          "name": "columnGap",
+          "type": "{\n  default?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  md?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  lg?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  xl?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  '2xl'?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n}",
+          "description": "Sets only the column gap at various breakpoints."
+        },
+        {
+          "name": "gap",
+          "type": "{\n  default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n}",
+          "description": "Sets both the column and row gap at various breakpoints."
+        },
+        {
+          "name": "isOverflowContainer",
+          "type": "boolean",
+          "description": "Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation."
+        },
+        {
+          "name": "rowGap",
+          "type": "{\n  default?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  md?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  lg?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  xl?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  '2xl'?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n}",
+          "description": "Sets only the row gap at various breakpoints."
+        },
+        {
+          "name": "rowWrap",
+          "type": "{\n  default?: 'wrap' | 'nowrap';\n  sm?: 'wrap' | 'nowrap';\n  md?: 'wrap' | 'nowrap';\n  lg?: 'wrap' | 'nowrap';\n  xl?: 'wrap' | 'nowrap';\n  '2xl'?: 'wrap' | 'nowrap';\n}",
+          "description": "Value to set for row wrapping at various breakpoints"
+        },
+        {
+          "name": "variant",
+          "type": "| ToolbarGroupVariant\n| 'filter-group'\n| 'action-group'\n| 'action-group-inline'\n| 'action-group-plain'\n| 'label-group'",
+          "description": "A type modifier which modifies spacing specifically depending on the type of group"
+        },
+        {
+          "name": "visibility",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various width breakpoints."
+        },
+        {
+          "name": "visibilityAtHeight",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various height breakpoints."
+        }
+      ]
+    },
+    {
+      "name": "ToolbarItem",
+      "description": "",
+      "props": [
+        {
+          "name": "align",
+          "type": "{\n  default?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  md?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  lg?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  xl?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';\n}",
+          "description": "Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis"
+        },
+        {
+          "name": "alignItems",
+          "type": "'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'",
+          "description": "Vertical alignment of children"
+        },
+        {
+          "name": "alignSelf",
+          "type": "'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'",
+          "description": "Vertical alignment"
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered inside the data toolbar item"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of the data toolbar item"
+        },
+        {
+          "name": "columnGap",
+          "type": "{\n  default?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  md?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  lg?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  xl?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  '2xl'?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n}",
+          "description": "Sets only the column gap at various breakpoints."
+        },
+        {
+          "name": "gap",
+          "type": "{\n  default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n}",
+          "description": "Sets both the column and row gap at various breakpoints."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "id for this data toolbar item"
+        },
+        {
+          "name": "isAllExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if the expand-all variant is expanded or not"
+        },
+        {
+          "name": "isOverflowContainer",
+          "type": "boolean",
+          "description": "Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation."
+        },
+        {
+          "name": "rowGap",
+          "type": "{\n  default?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  md?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  lg?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  xl?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  '2xl'?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n}",
+          "description": "Sets only the row gap at various breakpoints."
+        },
+        {
+          "name": "rowWrap",
+          "type": "{\n  default?: 'wrap' | 'nowrap';\n  sm?: 'wrap' | 'nowrap';\n  md?: 'wrap' | 'nowrap';\n  lg?: 'wrap' | 'nowrap';\n  xl?: 'wrap' | 'nowrap';\n  '2xl'?: 'wrap' | 'nowrap';\n}",
+          "description": "Value to set for row wrapping at various breakpoints"
+        },
+        {
+          "name": "variant",
+          "type": "ToolbarItemVariant | 'pagination' | 'label' | 'label-group' | 'separator' | 'expand-all'",
+          "description": "A type modifier which modifies spacing specifically depending on the type of item"
+        },
+        {
+          "name": "visibility",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various width breakpoints."
+        },
+        {
+          "name": "visibilityAtHeight",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various height breakpoints."
+        }
+      ]
+    },
+    {
+      "name": "ToolbarToggleGroup",
+      "description": "",
+      "props": [
+        {
+          "name": "align",
+          "type": "{\n  default?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  md?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  lg?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  xl?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';\n}",
+          "description": "Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis"
+        },
+        {
+          "name": "alignItems",
+          "type": "'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'",
+          "description": "Vertical alignment of children"
+        },
+        {
+          "name": "alignSelf",
+          "type": "'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'",
+          "description": "Vertical alignment"
+        },
+        {
+          "name": "breakpoint",
+          "type": "'md' | 'lg' | 'xl' | '2xl'",
+          "description": "Controls when filters are shown and when the toggle button is hidden.",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered inside the data toolbar group"
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of the data toolbar group"
+        },
+        {
+          "name": "clearAllFilters",
+          "type": "() => void",
+          "description": "Optional callback for clearing all filters in the toolbar toggle group"
+        },
+        {
+          "name": "clearFiltersButtonText",
+          "type": "string",
+          "description": "Text to display in the clear all filters button of the toolbar toggle group"
+        },
+        {
+          "name": "columnGap",
+          "type": "{\n  default?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  md?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  lg?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  xl?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  '2xl'?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n}",
+          "description": "Sets only the column gap at various breakpoints."
+        },
+        {
+          "name": "gap",
+          "type": "{\n  default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n}",
+          "description": "Sets both the column and row gap at various breakpoints."
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating when toggle group is expanded for non-managed toolbar toggle groups."
+        },
+        {
+          "name": "isOverflowContainer",
+          "type": "boolean",
+          "description": "Flag that modifies the toolbar group to hide overflow and respond to available space. Used for horizontal navigation."
+        },
+        {
+          "name": "labelContainerRef",
+          "type": "React.RefObject<any>",
+          "description": "Reference to a label container group for filters inside the toolbar toggle group"
+        },
+        {
+          "name": "onToggle",
+          "type": "(event: React.MouseEvent) => void",
+          "description": "Callback for toggle group click event for non-managed toolbar toggle groups."
+        },
+        {
+          "name": "rowGap",
+          "type": "{\n  default?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  md?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  lg?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  xl?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  '2xl'?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n}",
+          "description": "Sets only the row gap at various breakpoints."
+        },
+        {
+          "name": "rowWrap",
+          "type": "{\n  default?: 'wrap' | 'nowrap';\n  sm?: 'wrap' | 'nowrap';\n  md?: 'wrap' | 'nowrap';\n  lg?: 'wrap' | 'nowrap';\n  xl?: 'wrap' | 'nowrap';\n  '2xl'?: 'wrap' | 'nowrap';\n}",
+          "description": "Value to set for row wrapping at various breakpoints"
+        },
+        {
+          "name": "showClearFiltersButton",
+          "type": "boolean",
+          "description": "Flag indicating that the clear all filters button should be visible in the toolbar toggle group"
+        },
+        {
+          "name": "toggleIcon",
+          "type": "React.ReactNode",
+          "description": "An icon to be rendered when the toggle group has collapsed down",
+          "required": true
+        },
+        {
+          "name": "variant",
+          "type": "| ToolbarGroupVariant\n| 'filter-group'\n| 'action-group'\n| 'action-group-inline'\n| 'action-group-plain'\n| 'label-group'",
+          "description": "A type modifier which modifies spacing specifically depending on the type of group"
+        },
+        {
+          "name": "visibility",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various width breakpoints."
+        },
+        {
+          "name": "visibilityAtHeight",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various height breakpoints."
+        }
+      ]
+    },
+    {
+      "name": "ToolbarFilter",
+      "description": "",
+      "props": [
+        {
+          "name": "align",
+          "type": "{\n  default?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  md?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  lg?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  xl?: 'alignEnd' | 'alignStart' | 'alignCenter';\n  '2xl'?: 'alignEnd' | 'alignStart' | 'alignCenter';\n}",
+          "description": "Applies to a child of a flex layout, and aligns that child (and any adjacent children on the other side of it) to one side of the main axis"
+        },
+        {
+          "name": "alignItems",
+          "type": "'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'",
+          "description": "Vertical alignment of children"
+        },
+        {
+          "name": "alignSelf",
+          "type": "'start' | 'center' | 'baseline' | 'default' | 'end' | 'stretch'",
+          "description": "Vertical alignment"
+        },
+        {
+          "name": "categoryName",
+          "type": "string | ToolbarLabelGroup",
+          "description": "Unique category name to be used as a label for the label group",
+          "required": true
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content to be rendered inside the data toolbar item",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Classes applied to root element of the data toolbar item"
+        },
+        {
+          "name": "columnGap",
+          "type": "{\n  default?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  md?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  lg?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  xl?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n  '2xl'?:\n    | 'columnGapNone'\n    | 'columnGapXs'\n    | 'columnGapSm'\n    | 'columnGapMd'\n    | 'columnGapLg'\n    | 'columnGapXl'\n    | 'columnGap_2xl'\n    | 'columnGap_3xl'\n    | 'columnGap_4xl';\n}",
+          "description": "Sets only the column gap at various breakpoints."
+        },
+        {
+          "name": "deleteLabel",
+          "type": "(category: string | ToolbarLabelGroup, label: ToolbarLabel | string) => void",
+          "description": "Callback passed by consumer used to delete a label from the labels[]"
+        },
+        {
+          "name": "deleteLabelGroup",
+          "type": "(category: string | ToolbarLabelGroup) => void",
+          "description": "Callback passed by consumer used to close the entire label group"
+        },
+        {
+          "name": "expandableLabelContainerRef",
+          "type": "React.RefObject<HTMLDivElement | null>",
+          "description": "Reference to a label container created with a custom expandable content group, for non-managed multiple toolbar toggle groups."
+        },
+        {
+          "name": "gap",
+          "type": "{\n  default?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  md?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  lg?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  xl?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n  '2xl'?: 'gapNone' | 'gapXs' | 'gapSm' | 'gapMd' | 'gapLg' | 'gapXl' | 'gap_2xl' | 'gap_3xl' | 'gap_4xl';\n}",
+          "description": "Sets both the column and row gap at various breakpoints."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "id for this data toolbar item"
+        },
+        {
+          "name": "isAllExpanded",
+          "type": "boolean",
+          "description": "Flag indicating if the expand-all variant is expanded or not"
+        },
+        {
+          "name": "isExpanded",
+          "type": "boolean",
+          "description": "Flag indicating when toolbar toggle group is expanded for non-managed toolbar toggle groups."
+        },
+        {
+          "name": "isOverflowContainer",
+          "type": "boolean",
+          "description": "Flag that modifies the toolbar item to hide overflow and respond to available space. Used for horizontal navigation."
+        },
+        {
+          "name": "labelGroupCollapsedText",
+          "type": "string",
+          "description": "Customizable template string for the label group. Use variable \"${remaining}\" for the overflow label count."
+        },
+        {
+          "name": "labelGroupExpandedText",
+          "type": "string",
+          "description": "Customizable \"Show Less\" text string for the label group"
+        },
+        {
+          "name": "labels",
+          "type": "(string | ToolbarLabel)[]",
+          "description": "An array of strings to be displayed as labels in the expandable content",
+          "defaultValue": "[]"
+        },
+        {
+          "name": "rowGap",
+          "type": "{\n  default?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  md?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  lg?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  xl?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n  '2xl'?:\n    | 'rowGapNone'\n    | 'rowGapXs'\n    | 'rowGapSm'\n    | 'rowGapMd'\n    | 'rowGapLg'\n    | 'rowGapXl'\n    | 'rowGap_2xl'\n    | 'rowGap_3xl'\n    | 'rowGap_4xl';\n}",
+          "description": "Sets only the row gap at various breakpoints."
+        },
+        {
+          "name": "rowWrap",
+          "type": "{\n  default?: 'wrap' | 'nowrap';\n  sm?: 'wrap' | 'nowrap';\n  md?: 'wrap' | 'nowrap';\n  lg?: 'wrap' | 'nowrap';\n  xl?: 'wrap' | 'nowrap';\n  '2xl'?: 'wrap' | 'nowrap';\n}",
+          "description": "Value to set for row wrapping at various breakpoints"
+        },
+        {
+          "name": "showToolbarItem",
+          "type": "boolean",
+          "description": "Flag to show the toolbar item",
+          "defaultValue": "true"
+        },
+        {
+          "name": "variant",
+          "type": "ToolbarItemVariant | 'pagination' | 'label' | 'label-group' | 'separator' | 'expand-all'",
+          "description": "A type modifier which modifies spacing specifically depending on the type of item"
+        },
+        {
+          "name": "visibility",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various width breakpoints."
+        },
+        {
+          "name": "visibilityAtHeight",
+          "type": "{\n  default?: 'hidden' | 'visible';\n  md?: 'hidden' | 'visible';\n  lg?: 'hidden' | 'visible';\n  xl?: 'hidden' | 'visible';\n  '2xl'?: 'hidden' | 'visible';\n}",
+          "description": "Visibility at various height breakpoints."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-toolbar"
+  ],
+  "examples": [
+    "Toolbar items",
+    "With adjusted inset",
+    "Vertical toolbar",
+    "Sticky toolbar",
+    "Dynamic sticky toolbar",
+    "With groups of items",
+    "Background color variants",
+    "Component managed toggle groups",
+    "Consumer managed toggle groups",
+    "With filters",
+    "With custom label group content",
+    "Stacked example",
+    "Toolbar content wrapping",
+    "Toolbar group spacers",
+    "Toolbar item spacers"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useState,
+  useLayoutEffect,
+  useRef,
+  EditIcon,
+  CloneIcon,
+  SyncIcon,
+  FilterIcon,
+  SearchIcon,
+  RhUiEllipsisVerticalFillIcon
+};
+pageData.examples = {
+  'Toolbar items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';\nimport { Button, SearchInput } from '@patternfly/react-core';\n\nexport const ToolbarItems = () => {\n  const [searchValue, setSearchValue] = useState('');\n\n  const items = (\n    <Fragment>\n      <ToolbarItem>\n        <SearchInput\n          aria-label=\"Items example search input\"\n          value={searchValue}\n          onChange={(_event, value) => setSearchValue(value)}\n          onClear={() => setSearchValue('')}\n        />\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"secondary\">Action</Button>\n      </ToolbarItem>\n      <ToolbarItem variant=\"separator\" />\n      <ToolbarItem>\n        <Button variant=\"primary\">Action2</Button>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  return (\n    <Toolbar id=\"toolbar-items-example\">\n      <ToolbarContent>{items}</ToolbarContent>\n    </Toolbar>\n  );\n};\n","title":"Toolbar items","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A toolbar can contain multiple toolbar items, like filters and buttons.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/toolbar#examples-with-toggle-groups-and-filters","className":""}}>
+          {`examples with toggle groups and filters`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+    </Example>,
+  'With adjusted inset': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';\nimport { Button } from '@patternfly/react-core';\n\nexport const ToolbarInsets: React.FunctionComponent = () => {\n  const items = (\n    <Fragment>\n      <ToolbarGroup variant=\"action-group\">\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarItem variant=\"separator\"></ToolbarItem>\n      <ToolbarGroup variant=\"action-group\">\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"primary\">Action</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarItem variant=\"separator\"></ToolbarItem>\n      <ToolbarGroup variant=\"action-group\">\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  return (\n    <Toolbar\n      id=\"toolbar-insets\"\n      inset={{\n        default: 'insetNone',\n        md: 'insetSm',\n        xl: 'inset2xl',\n        '2xl': 'insetLg'\n      }}\n    >\n      <ToolbarContent>{items}</ToolbarContent>\n    </Toolbar>\n  );\n};\n","title":"With adjusted inset","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To adjust a toolbar’s inset, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`inset`}
+        </code>
+        {` property. You can set the inset value at multiple breakpoints, including "default", "md", "lg, "xl", and "2xl". Inset values include “insetNone”, “insetSm”, “insetMd”, “insetLg”, “insetXl”, and “inset2xl”.`}
+      </p>
+    </Example>,
+  'Vertical toolbar': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Toolbar, ToolbarContent, ToolbarGroup, ToolbarItem } from '@patternfly/react-core';\n\nexport const ToolbarVertical: React.FunctionComponent = () => (\n  <Toolbar id=\"toolbar-vertical\" isVertical>\n    <ToolbarContent>\n      <ToolbarGroup variant=\"action-group-plain\">\n        <ToolbarItem>Item 1</ToolbarItem>\n        <ToolbarItem>Item 2</ToolbarItem>\n        <ToolbarItem>Item 3</ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarGroup variant=\"action-group-plain\" visibilityAtHeight={{ default: 'hidden', md: 'visible' }}>\n        <ToolbarItem>Item 4 (visible above md breakpoint)</ToolbarItem>\n        <ToolbarItem visibilityAtHeight={{ default: 'hidden', lg: 'visible' }}>\n          Item 5 (visible above lg breakpoint)\n        </ToolbarItem>\n        <ToolbarItem visibilityAtHeight={{ default: 'hidden', lg: 'visible' }}>\n          Item 6 (visible above lg breakpoint)\n        </ToolbarItem>\n      </ToolbarGroup>\n    </ToolbarContent>\n  </Toolbar>\n);\n","title":"Vertical toolbar","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A toolbar's orientation may be changed using the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isVertical`}
+        </code>
+        {` property. Responsive behavior when height is adjusted may be customized for the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`ToolbarContent`}
+        </code>
+        {`, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`ToolbarGroup`}
+        </code>
+        {`, and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`ToolbarItem`}
+        </code>
+        {` components using their respective `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`visibilityAtHeight`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'Sticky toolbar': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';\n\nexport const ToolbarSticky = () => {\n  const [isSticky, setIsSticky] = useState(true);\n  const [showEvenOnly, setShowEvenOnly] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n  const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes\n  const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;\n\n  return (\n    <Fragment>\n      <div style={{ overflowY: 'scroll', height: '200px' }}>\n        <Toolbar id=\"toolbar-sticky\" inset={{ default: 'insetNone' }} isSticky={isSticky}>\n          <ToolbarContent>\n            <ToolbarItem>\n              <SearchInput\n                aria-label=\"Sticky example search input\"\n                value={searchValue}\n                onChange={(_event, value) => setSearchValue(value)}\n                onClear={() => setSearchValue('')}\n              />\n            </ToolbarItem>\n            <ToolbarItem alignSelf=\"center\">\n              <Checkbox\n                label=\"Show only even number items\"\n                isChecked={showEvenOnly}\n                onChange={(_event, checked) => setShowEvenOnly(checked)}\n                id=\"showOnlyEvenCheckbox\"\n              />\n            </ToolbarItem>\n          </ToolbarContent>\n        </Toolbar>\n        <ul>\n          {numbers.map((number) => (\n            <li key={number}>{`item ${number}`}</li>\n          ))}\n        </ul>\n      </div>\n      <Checkbox\n        label=\"Is toolbar sticky\"\n        isChecked={isSticky}\n        onChange={(_event, checked) => setIsSticky(checked)}\n        id=\"isStickyCheckbox\"\n      />\n    </Fragment>\n  );\n};\n","title":"Sticky toolbar","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To lock a toolbar and prevent it from scrolling with other content, use a sticky toolbar.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`In the following example, toggle the "is toolbar sticky" checkbox to see the difference between a sticky and non-sticky toolbar.`}
+      </p>
+    </Example>,
+  'Dynamic sticky toolbar': props => 
+    <Example {...pageData} {...props} {...{"code":"import { useLayoutEffect, useState, useRef } from 'react';\nimport { Toolbar, ToolbarItem, ToolbarContent, SearchInput, Checkbox } from '@patternfly/react-core';\n\nconst useIsStuckFromScrollParent = ({\n  shouldTrack,\n  scrollParentRef\n}: {\n  /** Indicates whether to track the scroll top position of the scroll parent element */\n  shouldTrack: boolean;\n  /** Reference to the scroll parent element */\n  scrollParentRef: React.RefObject<any>;\n}): boolean => {\n  const [isStuck, setIsStuck] = useState(false);\n\n  useLayoutEffect(() => {\n    if (!shouldTrack) {\n      setIsStuck(false);\n      return;\n    }\n\n    const scrollElement = scrollParentRef.current;\n    if (!scrollElement) {\n      setIsStuck(false);\n      return;\n    }\n\n    const syncFromScroll = () => {\n      setIsStuck(scrollElement.scrollTop > 0);\n    };\n    syncFromScroll();\n    scrollElement.addEventListener('scroll', syncFromScroll, { passive: true });\n    return () => scrollElement.removeEventListener('scroll', syncFromScroll);\n  }, [shouldTrack, scrollParentRef]);\n\n  return isStuck;\n};\n\nexport const ToolbarDynamicSticky = () => {\n  const scrollParentRef = useRef<HTMLDivElement>(null);\n  const isStickyStuck = useIsStuckFromScrollParent({ shouldTrack: true, scrollParentRef });\n  const [showEvenOnly, setShowEvenOnly] = useState(true);\n  const [searchValue, setSearchValue] = useState('');\n  const array = Array.from(Array(30), (_, x) => x); // create array of numbers from 1-30 for demo purposes\n  const numbers = showEvenOnly ? array.filter((number) => number % 2 === 0) : array;\n\n  return (\n    <div id=\"dynamic-sticky-scroll-parent\" ref={scrollParentRef} style={{ overflowY: 'scroll', height: '200px' }}>\n      <Toolbar id=\"toolbar-dynamic-sticky\" inset={{ default: 'insetNone' }} isStickyBase isStickyStuck={isStickyStuck}>\n        <ToolbarContent>\n          <ToolbarItem>\n            <SearchInput\n              aria-label=\"Sticky example search input\"\n              value={searchValue}\n              onChange={(_event, value) => setSearchValue(value)}\n              onClear={() => setSearchValue('')}\n            />\n          </ToolbarItem>\n          <ToolbarItem alignSelf=\"center\">\n            <Checkbox\n              label=\"Show only even number items\"\n              isChecked={showEvenOnly}\n              onChange={(_event, checked) => setShowEvenOnly(checked)}\n              id=\"showOnlyEvenCheckbox\"\n            />\n          </ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n      <ul>\n        {numbers.map((number) => (\n          <li key={number}>{`item ${number}`}</li>\n        ))}\n      </ul>\n    </div>\n  );\n};\n","title":"Dynamic sticky toolbar","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A toolbar may alternatively be made sticky with two properties: `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyBase`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyStuck`}
+        </code>
+        {` - which allows separate control of the sticky position and sticky styling respectively. In this example, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isStickyStuck`}
+        </code>
+        {` is only applied when the sticky element is not at the top of the scroll parent container.`}
+      </p>
+    </Example>,
+  'With groups of items': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  MenuToggle,\n  MenuToggleElement,\n  Toolbar,\n  ToolbarContent,\n  ToolbarGroup,\n  ToolbarItem,\n  Select,\n  SelectList,\n  SelectOption\n} from '@patternfly/react-core';\nimport EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';\nimport CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';\nimport SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';\n\nexport const ToolbarGroups: React.FunctionComponent = () => {\n  const firstOptions = ['A', 'B', 'C'];\n  const secondOptions = ['1', '2', '3'];\n  const thirdOptions = ['I', 'II', 'III'];\n\n  const [firstIsExpanded, setFirstIsExpanded] = useState(false);\n  const [firstSelected, setFirstSelected] = useState('');\n  const [secondIsExpanded, setSecondIsExpanded] = useState(false);\n  const [secondSelected, setSecondSelected] = useState('');\n  const [thirdIsExpanded, setThirdIsExpanded] = useState(false);\n  const [thirdSelected, setThirdSelected] = useState('');\n\n  const onToggle = (filterName: string) => {\n    switch (filterName) {\n      case 'first':\n        setFirstIsExpanded(!firstIsExpanded);\n        break;\n      case 'second':\n        setSecondIsExpanded(!secondIsExpanded);\n        break;\n      case 'third':\n        setThirdIsExpanded(!thirdIsExpanded);\n        break;\n    }\n  };\n\n  const onFirstSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {\n    setFirstSelected(selection);\n    setFirstIsExpanded(false);\n  };\n\n  const onSecondSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {\n    setSecondSelected(selection);\n    setSecondIsExpanded(false);\n  };\n\n  const onThirdSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {\n    setThirdSelected(selection);\n    setThirdIsExpanded(false);\n  };\n\n  const filterGroupItems = (\n    <Fragment>\n      <ToolbarItem>\n        <Select\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              onClick={() => onToggle('first')}\n              isExpanded={firstIsExpanded}\n              style={\n                {\n                  width: '88px'\n                } as React.CSSProperties\n              }\n            >\n              {firstSelected || 'First'}\n            </MenuToggle>\n          )}\n          onSelect={onFirstSelect}\n          onOpenChange={(isOpen) => setFirstIsExpanded(isOpen)}\n          selected={firstSelected}\n          isOpen={firstIsExpanded}\n        >\n          <SelectList>\n            {firstOptions.map((option, index) => (\n              <SelectOption key={index} value={option}>\n                {option}\n              </SelectOption>\n            ))}\n          </SelectList>\n        </Select>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Select\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              onClick={() => onToggle('second')}\n              isExpanded={secondIsExpanded}\n              style={\n                {\n                  width: '120px'\n                } as React.CSSProperties\n              }\n            >\n              {secondSelected || 'Second'}\n            </MenuToggle>\n          )}\n          onSelect={onSecondSelect}\n          selected={secondSelected}\n          onOpenChange={(isOpen) => setSecondIsExpanded(isOpen)}\n          isOpen={secondIsExpanded}\n        >\n          <SelectList>\n            {secondOptions.map((option, index) => (\n              <SelectOption key={index} value={option}>\n                {option}\n              </SelectOption>\n            ))}\n          </SelectList>\n        </Select>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Select\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              onClick={() => onToggle('third')}\n              isExpanded={thirdIsExpanded}\n              style={\n                {\n                  width: '96px'\n                } as React.CSSProperties\n              }\n            >\n              {thirdSelected || 'Third'}\n            </MenuToggle>\n          )}\n          onSelect={onThirdSelect}\n          selected={thirdSelected}\n          onOpenChange={(isOpen) => setThirdIsExpanded(isOpen)}\n          isOpen={thirdIsExpanded}\n        >\n          <SelectList>\n            {thirdOptions.map((option, index) => (\n              <SelectOption key={index} value={option}>\n                {option}\n              </SelectOption>\n            ))}\n          </SelectList>\n        </Select>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const iconButtonGroupItems = (\n    <Fragment>\n      <ToolbarItem>\n        <Button variant=\"plain\" aria-label=\"edit\" icon={<EditIcon />} />\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"plain\" aria-label=\"clone\" icon={<CloneIcon />} />\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"plain\" aria-label=\"sync\" icon={<SyncIcon />} />\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const buttonGroupItems = (\n    <Fragment>\n      <ToolbarItem>\n        <Button variant=\"primary\">Action</Button>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"secondary\">Secondary</Button>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"tertiary\">Tertiary</Button>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const items = (\n    <Fragment>\n      <ToolbarGroup variant=\"filter-group\">{filterGroupItems}</ToolbarGroup>\n      <ToolbarGroup variant=\"action-group-plain\">{iconButtonGroupItems}</ToolbarGroup>\n      <ToolbarGroup variant=\"action-group\">{buttonGroupItems}</ToolbarGroup>\n    </Fragment>\n  );\n\n  return (\n    <Toolbar id=\"toolbar-group-types\">\n      <ToolbarContent>{items}</ToolbarContent>\n    </Toolbar>\n  );\n};\n","title":"With groups of items","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can group similar items together to create desired associations and to enable items to respond to changes in viewport width together.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note: This example does not demonstrate responsive toolbar behavior. Responsive toolbars are shown in the `}
+        
+        <PatternflyThemeLink {...{"to":"/components/toolbar#examples-with-toggle-groups-and-filters","className":""}}>
+          {`examples with toggle groups and filters`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+    </Example>,
+  'Background color variants': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Toolbar, ToolbarItem, ToolbarContent, Button, SearchInput } from '@patternfly/react-core';\n\nexport const ToolbarColorVariant: React.FunctionComponent = () => (\n  <Fragment>\n    No background\n    <Toolbar id=\"toolbar-color-variant-no-background\" colorVariant={'no-background'}>\n      <ToolbarContent>\n        <ToolbarItem>\n          <SearchInput aria-label=\"No backtround variant example search input\" />\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\" />\n        <ToolbarItem>\n          <Button variant=\"primary\">Action</Button>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n    Primary background\n    <Toolbar id=\"toolbar-color-variant-primary\" colorVariant={'primary'}>\n      <ToolbarContent>\n        <ToolbarItem>\n          <SearchInput aria-label=\"Primary background variant example search input\" />\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\" />\n        <ToolbarItem>\n          <Button variant=\"primary\">Action</Button>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n    Secondary background\n    <Toolbar id=\"toolbar-color-variant-secondary\" colorVariant={'secondary'}>\n      <ToolbarContent>\n        <ToolbarItem>\n          <SearchInput aria-label=\"Secondary background variant example search input\" />\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Action</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\" />\n        <ToolbarItem>\n          <Button variant=\"primary\">Action</Button>\n        </ToolbarItem>\n      </ToolbarContent>\n    </Toolbar>\n  </Fragment>\n);\n","title":"Background color variants","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To change the background color of a toolbar, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`colorVariant`}
+        </code>
+        {` property on the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Toolbar>`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Component managed toggle groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  MenuToggle,\n  MenuToggleElement,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  SearchInput,\n  Select,\n  SelectList,\n  SelectOption\n} from '@patternfly/react-core';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\n\nexport const ToolbarComponentManagedToggleGroup: React.FunctionComponent = () => {\n  const [inputValue, setInputValue] = useState('');\n  const [statusIsExpanded, setStatusIsExpanded] = useState(false);\n  const [statusSelected, setStatusSelected] = useState('');\n  const [riskIsExpanded, setRiskIsExpanded] = useState(false);\n  const [riskSelected, setRiskSelected] = useState('');\n\n  const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];\n  const riskOptions = ['Risk', 'Low', 'Medium', 'High'];\n\n  const onInputChange = (newValue: string) => {\n    setInputValue(newValue);\n  };\n\n  const onStatusToggle = () => {\n    setStatusIsExpanded(!statusIsExpanded);\n  };\n\n  const onStatusSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {\n    setStatusSelected(selection);\n    setStatusIsExpanded(false);\n  };\n\n  const onRiskToggle = () => {\n    setRiskIsExpanded(!riskIsExpanded);\n  };\n\n  const onRiskSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {\n    setRiskSelected(selection);\n    setRiskIsExpanded(false);\n  };\n\n  const toggleGroupItems = (\n    <Fragment>\n      <ToolbarItem>\n        <SearchInput\n          aria-label=\"Component toggle groups example search input\"\n          onChange={(_event, value) => onInputChange(value)}\n          value={inputValue}\n          onClear={() => {\n            onInputChange('');\n          }}\n        />\n      </ToolbarItem>\n      <ToolbarGroup variant=\"filter-group\">\n        <ToolbarItem>\n          <Select\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => onStatusToggle()}\n                isExpanded={statusIsExpanded}\n                style={\n                  {\n                    width: '150px'\n                  } as React.CSSProperties\n                }\n              >\n                {statusSelected || 'Status'}\n              </MenuToggle>\n            )}\n            onSelect={onStatusSelect}\n            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}\n            selected={statusSelected}\n            isOpen={statusIsExpanded}\n          >\n            <SelectList>\n              {statusOptions.map((option, index) => (\n                <SelectOption key={index} value={option}>\n                  {option}\n                </SelectOption>\n              ))}\n            </SelectList>\n          </Select>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Select\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => onRiskToggle()}\n                isExpanded={riskIsExpanded}\n                style={\n                  {\n                    width: '120px'\n                  } as React.CSSProperties\n                }\n              >\n                {riskSelected || 'Risk'}\n              </MenuToggle>\n            )}\n            onSelect={onRiskSelect}\n            selected={riskSelected}\n            isOpen={riskIsExpanded}\n            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}\n          >\n            <SelectList>\n              {riskOptions.map((option, index) => (\n                <SelectOption key={index} value={option}>\n                  {option}\n                </SelectOption>\n              ))}\n            </SelectList>\n          </Select>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const items = (\n    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n      {toggleGroupItems}\n    </ToolbarToggleGroup>\n  );\n\n  return (\n    <Toolbar id=\"toolbar-component-managed-toggle-groups\" className=\"pf-m-toggle-group-container\">\n      <ToolbarContent>{items}</ToolbarContent>\n    </Toolbar>\n  );\n};\n","title":"Component managed toggle groups","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`A toggle group allows you to collapse a set of items into an overlay panel at a certain breakpoint. For example, when a toggle group contains filter controls, its contents will collapse into an overlay panel when the toolbar adapts to a change in the viewport size. The contents can be toggled by selecting the filter icon in the overlay panel.`}
+      </p>
+    </Example>,
+  'Consumer managed toggle groups': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  MenuToggle,\n  MenuToggleElement,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  SearchInput,\n  Select,\n  SelectList,\n  SelectOption\n} from '@patternfly/react-core';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\n\nexport const ToolbarConsumerManagedToggleGroup: React.FunctionComponent = () => {\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [inputValue, setInputValue] = useState('');\n  const [statusIsExpanded, setStatusIsExpanded] = useState(false);\n  const [statusSelected, setStatusSelected] = useState('');\n  const [riskIsExpanded, setRiskIsExpanded] = useState(false);\n  const [riskSelected, setRiskSelected] = useState('');\n\n  const toggleIsExpanded = () => {\n    setIsExpanded(!isExpanded);\n  };\n\n  const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];\n  const riskOptions = ['Risk', 'Low', 'Medium', 'High'];\n\n  const onInputChange = (newValue: string) => {\n    setInputValue(newValue);\n  };\n\n  const onStatusToggle = () => {\n    setStatusIsExpanded(!statusIsExpanded);\n  };\n\n  const onStatusSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {\n    setStatusSelected(selection);\n    setStatusIsExpanded(false);\n  };\n\n  const onRiskToggle = () => {\n    setRiskIsExpanded(!riskIsExpanded);\n  };\n\n  const onRiskSelect = (_event: React.MouseEvent<Element, MouseEvent> | undefined, selection: string) => {\n    setRiskSelected(selection);\n    setRiskIsExpanded(false);\n  };\n\n  const toggleGroupItems = (\n    <Fragment>\n      <ToolbarItem>\n        <SearchInput\n          aria-label=\"Consumer toggle groups example search input\"\n          onChange={(_event, value) => onInputChange(value)}\n          value={inputValue}\n          onClear={() => {\n            onInputChange('');\n          }}\n        />\n      </ToolbarItem>\n      <ToolbarGroup variant=\"filter-group\">\n        <ToolbarItem>\n          <Select\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => onStatusToggle()}\n                isExpanded={statusIsExpanded}\n                style={\n                  {\n                    width: '150px'\n                  } as React.CSSProperties\n                }\n              >\n                {statusSelected || 'Status'}\n              </MenuToggle>\n            )}\n            onSelect={onStatusSelect}\n            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}\n            selected={statusSelected}\n            isOpen={statusIsExpanded}\n          >\n            <SelectList>\n              {statusOptions.map((option, index) => (\n                <SelectOption key={index} value={option}>\n                  {option}\n                </SelectOption>\n              ))}\n            </SelectList>\n          </Select>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Select\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => onRiskToggle()}\n                isExpanded={riskIsExpanded}\n                style={\n                  {\n                    width: '120px'\n                  } as React.CSSProperties\n                }\n              >\n                {riskSelected || 'Risk'}\n              </MenuToggle>\n            )}\n            onSelect={onRiskSelect}\n            selected={riskSelected}\n            isOpen={riskIsExpanded}\n            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}\n          >\n            <SelectList>\n              {riskOptions.map((option, index) => (\n                <SelectOption key={index} value={option}>\n                  {option}\n                </SelectOption>\n              ))}\n            </SelectList>\n          </Select>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const items = (\n    <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n      {toggleGroupItems}\n    </ToolbarToggleGroup>\n  );\n\n  return (\n    <Toolbar\n      id=\"toolbar-consumer-managed-toggle-groups\"\n      isExpanded={isExpanded}\n      className=\"pf-m-toggle-group-container\"\n      toggleIsExpanded={toggleIsExpanded}\n    >\n      <ToolbarContent>{items}</ToolbarContent>\n    </Toolbar>\n  );\n};\n","title":"Consumer managed toggle groups","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To manually create the expanded state of the toggle group for smaller screen widths:`}
+      </p>
+      
+      <ol {...{"className":"pf-v6-c-content--ol pf-m-editorial ws-ol "}}>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Add a `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`toggleIsExpanded`}
+          </code>
+          {` callback to the toolbar`}
+        </li>
+        
+
+        
+        <li {...{"className":"pf-v6-c-content--li pf-m-editorial ws-li "}}>
+          {`Pass a boolean into the `}
+          
+          <code {...{"className":"ws-code "}}>
+            {`isExpanded`}
+          </code>
+          {` property of the toolbar`}
+        </li>
+        
+
+      </ol>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Note: The toggle group is aware of the consumer provided breakpoint, the expandable content is not. If the expandable content is expanded and the screen width surpasses that of the breakpoint, the expandable content is not aware of that and will remain open. Be sure to consider and handle this in your implementation.`}
+      </p>
+    </Example>,
+  'With filters': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarFilter,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  Badge,\n  MenuToggle,\n  MenuToggleElement,\n  SearchInput,\n  Select,\n  SelectList,\n  SelectOption\n} from '@patternfly/react-core';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';\nimport CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';\nimport SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const ToolbarWithFilters: React.FunctionComponent = () => {\n  const [inputValue, setInputValue] = useState('');\n  const [isStatusExpanded, setIsStatusExpanded] = useState(false);\n  const [isRiskExpanded, setIsRiskExpanded] = useState(false);\n  const [filters, setFilters] = useState({\n    risk: ['Low'],\n    status: ['New', 'Pending']\n  });\n  const [isKebabOpen, setIsKebabOpen] = useState(false);\n\n  const onInputChange = (newValue: string) => {\n    setInputValue(newValue);\n  };\n\n  const onSelect = (type: string, event: React.MouseEvent | React.ChangeEvent, selection: string) => {\n    const checked = (event.target as HTMLInputElement).checked;\n    setFilters((prev) => {\n      const prevSelections = prev[type];\n      return {\n        ...prev,\n        [type]: checked ? [...prevSelections, selection] : prevSelections.filter((value) => value !== selection)\n      };\n    });\n  };\n\n  const onStatusSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string) => {\n    onSelect('status', event, selection);\n  };\n\n  const onRiskSelect = (event: React.MouseEvent | React.ChangeEvent, selection: string) => {\n    onSelect('risk', event, selection);\n  };\n\n  const onDelete = (type: string, id: string) => {\n    if (type === 'Risk') {\n      setFilters({ risk: filters.risk.filter((fil: string) => fil !== id), status: filters.status });\n    } else if (type === 'Status') {\n      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) => fil !== id) });\n    } else {\n      setFilters({ risk: [], status: [] });\n    }\n  };\n\n  const onDeleteGroup = (type: string) => {\n    if (type === 'Risk') {\n      setFilters({ risk: [], status: filters.status });\n    } else if (type === 'Status') {\n      setFilters({ risk: filters.risk, status: [] });\n    }\n  };\n\n  const onStatusToggle = () => {\n    setIsStatusExpanded(!isStatusExpanded);\n  };\n\n  const onRiskToggle = () => {\n    setIsRiskExpanded(!isRiskExpanded);\n  };\n\n  const onKebabToggle = () => {\n    setIsKebabOpen(!isKebabOpen);\n  };\n\n  const statusMenuItems = (\n    <SelectList>\n      <SelectOption hasCheckbox key=\"statusNew\" value=\"New\" isSelected={filters.status.includes('New')}>\n        New\n      </SelectOption>\n      <SelectOption hasCheckbox key=\"statusPending\" value=\"Pending\" isSelected={filters.status.includes('Pending')}>\n        Pending\n      </SelectOption>\n      <SelectOption hasCheckbox key=\"statusRunning\" value=\"Running\" isSelected={filters.status.includes('Running')}>\n        Running\n      </SelectOption>\n      <SelectOption\n        hasCheckbox\n        key=\"statusCancelled\"\n        value=\"Cancelled\"\n        isSelected={filters.status.includes('Cancelled')}\n      >\n        Cancelled\n      </SelectOption>\n    </SelectList>\n  );\n\n  const riskMenuItems = (\n    <SelectList>\n      <SelectOption hasCheckbox key=\"riskLow\" value=\"Low\" isSelected={filters.risk.includes('Low')}>\n        Low\n      </SelectOption>\n      <SelectOption hasCheckbox key=\"riskMedium\" value=\"Medium\" isSelected={filters.risk.includes('Medium')}>\n        Medium\n      </SelectOption>\n      <SelectOption hasCheckbox key=\"riskHigh\" value=\"High\" isSelected={filters.risk.includes('High')}>\n        High\n      </SelectOption>\n    </SelectList>\n  );\n\n  const toggleGroupItems = (\n    <Fragment>\n      <ToolbarItem>\n        <SearchInput\n          aria-label=\"With filters example search input\"\n          onChange={(_event, value) => onInputChange(value)}\n          value={inputValue}\n          onClear={() => {\n            onInputChange('');\n          }}\n        />\n      </ToolbarItem>\n      <ToolbarGroup variant=\"filter-group\">\n        <ToolbarFilter\n          labels={filters.status}\n          deleteLabel={(category, label) => onDelete(category as string, label as string)}\n          deleteLabelGroup={(category) => onDeleteGroup(category as string)}\n          categoryName=\"Status\"\n        >\n          <Select\n            aria-label=\"Status\"\n            role=\"menu\"\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={onStatusToggle}\n                isExpanded={isStatusExpanded}\n                style={\n                  {\n                    width: '140px'\n                  } as React.CSSProperties\n                }\n              >\n                Status\n                {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}\n              </MenuToggle>\n            )}\n            onSelect={onStatusSelect}\n            selected={filters.status}\n            isOpen={isStatusExpanded}\n            onOpenChange={(isOpen) => setIsStatusExpanded(isOpen)}\n          >\n            {statusMenuItems}\n          </Select>\n        </ToolbarFilter>\n        <ToolbarFilter\n          labels={filters.risk}\n          deleteLabel={(category, label) => onDelete(category as string, label as string)}\n          categoryName=\"Risk\"\n        >\n          <Select\n            aria-label=\"Risk\"\n            role=\"menu\"\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={onRiskToggle}\n                isExpanded={isRiskExpanded}\n                style={\n                  {\n                    width: '140px'\n                  } as React.CSSProperties\n                }\n              >\n                Risk\n                {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}\n              </MenuToggle>\n            )}\n            onSelect={onRiskSelect}\n            selected={filters.risk}\n            isOpen={isRiskExpanded}\n            onOpenChange={(isOpen) => setIsRiskExpanded(isOpen)}\n          >\n            {riskMenuItems}\n          </Select>\n        </ToolbarFilter>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const toolbarItems = (\n    <Fragment>\n      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n        {toggleGroupItems}\n      </ToolbarToggleGroup>\n      <ToolbarGroup variant=\"action-group-plain\">\n        <ToolbarItem>\n          <Button variant=\"plain\" aria-label=\"edit\" icon={<EditIcon />} />\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"plain\" aria-label=\"clone\" icon={<CloneIcon />} />\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"plain\" aria-label=\"sync\" icon={<SyncIcon />} />\n        </ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarItem>\n        <Dropdown\n          popperProps={{ position: 'right' }}\n          isOpen={isKebabOpen}\n          onOpenChange={(isOpen: boolean) => setIsKebabOpen(isOpen)}\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              isExpanded={isKebabOpen}\n              onClick={onKebabToggle}\n              variant=\"plain\"\n              aria-label=\"Toolbar with filters example kebab toggle\"\n              icon={<RhUiEllipsisVerticalFillIcon />}\n            />\n          )}\n        >\n          <DropdownList>\n            <DropdownItem>Action</DropdownItem>\n            <DropdownItem\n              to=\"#default-link2\"\n              // Prevent the default onClick functionality for example purposes\n              onClick={(ev: any) => ev.preventDefault()}\n            >\n              Link\n            </DropdownItem>\n            <DropdownItem isDisabled>Disabled Action</DropdownItem>\n            <DropdownItem isDisabled to=\"#default-link4\">\n              Disabled Link\n            </DropdownItem>\n          </DropdownList>\n        </Dropdown>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  return (\n    <Toolbar\n      id=\"toolbar-with-filter\"\n      className=\"pf-m-toggle-group-container\"\n      collapseListedFiltersBreakpoint=\"xl\"\n      clearAllFilters={() => onDelete('', '')}\n    >\n      <ToolbarContent>{toolbarItems}</ToolbarContent>\n    </Toolbar>\n  );\n};\n","title":"With filters","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`You can add filters to a toolbar to let users filter the content that a toolbar manages. When a toolbar is filtered, it will expand in height to make space for a row of filter labels and a "Clear all filters" button. Upon clearing the applied filters, the toolbar will return to its default height.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ToolbarFilter>`}
+        </code>
+        {` component expects applied filters and a delete label handler to be passed in as properties. Pass in a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`deleteLabelGroup`}
+        </code>
+        {` property to close the entire label group. Once close, the rendering of labels will be handled responsively by the toolbar.`}
+      </p>
+    </Example>,
+  'With custom label group content': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Toolbar,\n  ToolbarItem,\n  ToolbarContent,\n  ToolbarFilter,\n  ToolbarToggleGroup,\n  ToolbarGroup,\n  Badge,\n  Button,\n  MenuToggle,\n  MenuToggleElement,\n  Select,\n  SelectList,\n  SelectOption\n} from '@patternfly/react-core';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';\nimport CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';\nimport SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';\n\nexport const ToolbarCustomLabelGroupContent: React.FunctionComponent = () => {\n  const [statusIsExpanded, setStatusIsExpanded] = useState<boolean>(false);\n  const [riskIsExpanded, setRiskIsExpanded] = useState<boolean>(false);\n  const [filters, setFilters] = useState({\n    risk: ['Low'],\n    status: ['New', 'Pending']\n  });\n\n  const onDelete = (type: string, id: string) => {\n    if (type === 'Risk') {\n      setFilters({ risk: filters.risk.filter((fil: string) => fil !== id), status: filters.status });\n    } else if (type === 'Status') {\n      setFilters({ risk: filters.risk, status: filters.status.filter((fil: string) => fil !== id) });\n    } else {\n      setFilters({ risk: [], status: [] });\n    }\n  };\n\n  const onDeleteGroup = (type: string) => {\n    if (type === 'Risk') {\n      setFilters({ risk: [], status: filters.status });\n    } else if (type === 'Status') {\n      setFilters({ risk: filters.risk, status: [] });\n    }\n  };\n\n  const onSelect = (type: 'Risk' | 'Status', event: React.MouseEvent | React.ChangeEvent, selection: string) => {\n    const checked = (event.target as any).checked;\n    if (type === 'Risk') {\n      setFilters({\n        risk: checked ? [...filters.risk, selection] : filters.risk.filter((fil: string) => fil !== selection),\n        status: filters.status\n      });\n    } else if (type === 'Status') {\n      setFilters({\n        risk: filters.risk,\n        status: checked ? [...filters.status, selection] : filters.status.filter((fil: string) => fil !== selection)\n      });\n    }\n  };\n\n  const statusMenuItems = (\n    <SelectList>\n      <SelectOption hasCheckbox key=\"statusNew\" value=\"New\" isSelected={filters.status.includes('New')}>\n        New\n      </SelectOption>\n      <SelectOption hasCheckbox key=\"statusPending\" value=\"Pending\" isSelected={filters.status.includes('Pending')}>\n        Pending\n      </SelectOption>\n      <SelectOption hasCheckbox key=\"statusRunning\" value=\"Running\" isSelected={filters.status.includes('Running')}>\n        Running\n      </SelectOption>\n      <SelectOption\n        hasCheckbox\n        key=\"statusCancelled\"\n        value=\"Cancelled\"\n        isSelected={filters.status.includes('Cancelled')}\n      >\n        Cancelled\n      </SelectOption>\n    </SelectList>\n  );\n\n  const riskMenuItems = (\n    <SelectList>\n      <SelectOption hasCheckbox key=\"riskLow\" value=\"Low\" isSelected={filters.risk.includes('Low')}>\n        Low\n      </SelectOption>\n      <SelectOption hasCheckbox key=\"riskMedium\" value=\"Medium\" isSelected={filters.risk.includes('Medium')}>\n        Medium\n      </SelectOption>\n      <SelectOption hasCheckbox key=\"riskHigh\" value=\"High\" isSelected={filters.risk.includes('High')}>\n        High\n      </SelectOption>\n    </SelectList>\n  );\n\n  const toggleGroupItems = (\n    <Fragment>\n      <ToolbarGroup variant=\"filter-group\">\n        <ToolbarFilter\n          labels={filters.status}\n          deleteLabel={(category, label) => onDelete(category as string, label as string)}\n          deleteLabelGroup={(category) => onDeleteGroup(category as string)}\n          categoryName=\"Status\"\n        >\n          <Select\n            aria-label=\"Status\"\n            role=\"menu\"\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => setStatusIsExpanded(!statusIsExpanded)}\n                isExpanded={statusIsExpanded}\n                style={\n                  {\n                    width: '140px'\n                  } as React.CSSProperties\n                }\n              >\n                Status\n                {filters.status.length > 0 && <Badge isRead>{filters.status.length}</Badge>}\n              </MenuToggle>\n            )}\n            onSelect={(event, selection) => onSelect('Status', event, selection as string)}\n            selected={filters.status}\n            isOpen={statusIsExpanded}\n            onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}\n          >\n            {statusMenuItems}\n          </Select>\n        </ToolbarFilter>\n        <ToolbarFilter\n          labels={filters.risk}\n          deleteLabel={(category, label) => onDelete(category as string, label as string)}\n          deleteLabelGroup={(category) => onDeleteGroup(category as string)}\n          categoryName=\"Risk\"\n        >\n          <Select\n            aria-label=\"Risk\"\n            role=\"menu\"\n            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n              <MenuToggle\n                ref={toggleRef}\n                onClick={() => setRiskIsExpanded(!riskIsExpanded)}\n                isExpanded={riskIsExpanded}\n                style={\n                  {\n                    width: '140px'\n                  } as React.CSSProperties\n                }\n              >\n                Risk\n                {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}\n              </MenuToggle>\n            )}\n            onSelect={(event, selection) => onSelect('Risk', event, selection as string)}\n            selected={filters.risk}\n            isOpen={riskIsExpanded}\n            onOpenChange={(isOpen) => setRiskIsExpanded(isOpen)}\n          >\n            {riskMenuItems}\n          </Select>\n        </ToolbarFilter>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const toolbarItems = (\n    <Fragment>\n      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint=\"xl\">\n        {toggleGroupItems}\n      </ToolbarToggleGroup>\n      <ToolbarGroup variant=\"action-group-plain\">\n        <ToolbarItem>\n          <Button variant=\"plain\" aria-label=\"edit\" icon={<EditIcon />} />\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"plain\" aria-label=\"clone\" icon={<CloneIcon />} />\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"plain\" aria-label=\"sync\" icon={<SyncIcon />} />\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const customLabelGroupContent = (\n    <Fragment>\n      <ToolbarItem>\n        <Button variant=\"link\" onClick={() => {}} isInline>\n          Save filters\n        </Button>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"link\" onClick={() => onDelete('', '')} isInline>\n          Clear all filters\n        </Button>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  return (\n    <Toolbar\n      id=\"toolbar-with-custom-label-group\"\n      className=\"pf-m-toggle-group-container\"\n      collapseListedFiltersBreakpoint=\"xl\"\n      customLabelGroupContent={customLabelGroupContent}\n    >\n      <ToolbarContent>{toolbarItems}</ToolbarContent>\n    </Toolbar>\n  );\n};\n","title":"With custom label group content","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To customize the label groups generated by toolbar filters, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`customLabelGroupContent`}
+        </code>
+        {` property on the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Toolbar>`}
+        </code>
+        {`. This property will remove the default `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`clear all filters`}
+        </code>
+        {` button.`}
+      </p>
+    </Example>,
+  'Stacked example': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  ButtonVariant,\n  Select,\n  SelectList,\n  SelectOption,\n  Pagination,\n  Dropdown,\n  DropdownItem,\n  DropdownList,\n  Divider,\n  MenuToggle,\n  MenuToggleCheckbox,\n  MenuToggleElement,\n  OverflowMenu,\n  OverflowMenuContent,\n  OverflowMenuControl,\n  OverflowMenuGroup,\n  OverflowMenuItem,\n  Toolbar,\n  ToolbarContent,\n  ToolbarToggleGroup,\n  ToolbarItem\n} from '@patternfly/react-core';\nimport FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';\nimport RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';\n\nexport const ToolbarStacked: React.FunctionComponent = () => {\n  // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned\n  // pagination - right aligned\n  const resourceOptions = ['All resources', 'Deployment', 'Pod'];\n  const statusOptions = ['New', 'Pending', 'Running', 'Cancelled'];\n\n  const [kebabIsOpen, setKebabIsOpen] = useState(false);\n  const [resourceIsExpanded, setResourceIsExpanded] = useState(false);\n  const [resourceSelected, setResourceSelected] = useState('');\n  const [statusIsExpanded, setStatusIsExpanded] = useState(false);\n  const [statusSelected, setStatusSelected] = useState('');\n  const [isSplitButtonDropdownOpen, setIsSplitButtonDropdownOpen] = useState(false);\n  const [page, setPage] = useState(1);\n  const [perPage, setPerPage] = useState(20);\n\n  const onKebabToggle = () => {\n    setKebabIsOpen(!kebabIsOpen);\n  };\n\n  const onResourceToggle = () => {\n    setResourceIsExpanded(!resourceIsExpanded);\n  };\n\n  const onResourceSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string) => {\n    setResourceSelected(selection);\n    setResourceIsExpanded(false);\n  };\n\n  const onResourceSelectDropdown = () => {\n    setResourceIsExpanded(false);\n  };\n\n  const onStatusToggle = () => {\n    setStatusIsExpanded(!statusIsExpanded);\n  };\n\n  const onStatusSelect = (_event: React.ChangeEvent | React.MouseEvent, selection: string) => {\n    setStatusSelected(selection);\n    setStatusIsExpanded(false);\n  };\n\n  const onSetPage = (_event: React.MouseEvent | React.KeyboardEvent | MouseEvent, pageNumber: number) => {\n    setPage(pageNumber);\n  };\n\n  const onPerPageSelect = (\n    _event: React.MouseEvent | React.KeyboardEvent | MouseEvent,\n    perPage: number,\n    page: number\n  ) => {\n    setPage(page);\n    setPerPage(perPage);\n  };\n\n  const onSplitButtonToggle = () => {\n    setIsSplitButtonDropdownOpen(!isSplitButtonDropdownOpen);\n  };\n\n  const onSplitButtonSelect = () => {\n    setIsSplitButtonDropdownOpen(!isSplitButtonDropdownOpen);\n  };\n\n  const dropdownItems = (\n    <>\n      <DropdownItem>Action</DropdownItem>\n      <DropdownItem\n        to=\"#default-link2\"\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev: any) => ev.preventDefault()}\n      >\n        Link\n      </DropdownItem>\n      <DropdownItem isDisabled>Disabled Action</DropdownItem>\n      <DropdownItem isDisabled to=\"#default-link4\">\n        Disabled Link\n      </DropdownItem>\n    </>\n  );\n  const splitButtonDropdownItems = (\n    <>\n      <DropdownItem value={0} key=\"action\">\n        Action\n      </DropdownItem>\n      <DropdownItem\n        value={1}\n        key=\"link\"\n        to=\"#default-link2\"\n        // Prevent the default onClick functionality for example purposes\n        onClick={(ev: any) => ev.preventDefault()}\n      >\n        Link\n      </DropdownItem>\n      <DropdownItem value={2} isDisabled key=\"disabled action\">\n        Disabled Action\n      </DropdownItem>\n      <DropdownItem value={3} isDisabled key=\"disabled link\" to=\"#default-link4\">\n        Disabled Link\n      </DropdownItem>\n    </>\n  );\n\n  const toggleGroupItems = (\n    <Fragment>\n      <ToolbarItem variant=\"label\" id=\"stacked-example-resource-select\">\n        Resource\n      </ToolbarItem>\n      <ToolbarItem>\n        <Select\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              onClick={() => onResourceToggle()}\n              isExpanded={resourceIsExpanded}\n              style={\n                {\n                  width: '150px'\n                } as React.CSSProperties\n              }\n            >\n              {resourceSelected || 'Resource'}\n            </MenuToggle>\n          )}\n          onSelect={onResourceSelect}\n          selected={resourceSelected}\n          onOpenChange={(isOpen) => setResourceIsExpanded(isOpen)}\n          isOpen={resourceIsExpanded}\n          aria-labelledby=\"stacked-example-resource-select\"\n        >\n          <SelectList>\n            {resourceOptions.map((option, index) => (\n              <SelectOption key={index} value={option}>\n                {option}\n              </SelectOption>\n            ))}\n          </SelectList>\n        </Select>\n      </ToolbarItem>\n      <ToolbarItem variant=\"label\" id=\"stacked-example-status-select\">\n        Status\n      </ToolbarItem>\n      <ToolbarItem>\n        <Select\n          toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n            <MenuToggle\n              ref={toggleRef}\n              onClick={() => onStatusToggle()}\n              isExpanded={statusIsExpanded}\n              style={\n                {\n                  width: '150px'\n                } as React.CSSProperties\n              }\n            >\n              {statusSelected || 'Status'}\n            </MenuToggle>\n          )}\n          onSelect={onStatusSelect}\n          onOpenChange={(isOpen) => setStatusIsExpanded(isOpen)}\n          selected={statusSelected}\n          isOpen={statusIsExpanded}\n        >\n          <SelectList>\n            {statusOptions.map((option, index) => (\n              <SelectOption key={index} value={option}>\n                {option}\n              </SelectOption>\n            ))}\n          </SelectList>\n        </Select>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  const firstRowItems = (\n    <Fragment>\n      <Toolbar>\n        <ToolbarContent>\n          <ToolbarToggleGroup variant=\"label-group\" toggleIcon={<FilterIcon />} breakpoint=\"lg\">\n            {toggleGroupItems}\n          </ToolbarToggleGroup>\n          <ToolbarItem>\n            <OverflowMenu breakpoint=\"xl\">\n              <OverflowMenuContent>\n                <OverflowMenuGroup groupType=\"button\">\n                  <OverflowMenuItem>\n                    <Button variant={ButtonVariant.primary}>Primary</Button>\n                  </OverflowMenuItem>\n                  <OverflowMenuItem>\n                    <Button variant={ButtonVariant.secondary}>Secondary</Button>\n                  </OverflowMenuItem>\n                </OverflowMenuGroup>\n              </OverflowMenuContent>\n              <OverflowMenuControl hasAdditionalOptions>\n                <Dropdown\n                  onSelect={onResourceSelectDropdown}\n                  onOpenChange={(isOpen: boolean) => setKebabIsOpen(isOpen)}\n                  toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                    <MenuToggle\n                      ref={toggleRef}\n                      aria-label=\"Kebab overflow menu\"\n                      variant=\"plain\"\n                      onClick={onKebabToggle}\n                      isExpanded={kebabIsOpen}\n                      icon={<RhUiEllipsisVerticalFillIcon />}\n                    />\n                  )}\n                  isOpen={kebabIsOpen}\n                >\n                  <DropdownList>{dropdownItems}</DropdownList>\n                </Dropdown>\n              </OverflowMenuControl>\n            </OverflowMenu>\n          </ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    </Fragment>\n  );\n\n  const secondRowItems = (\n    <Fragment>\n      <Toolbar>\n        <ToolbarContent>\n          <ToolbarItem>\n            <Dropdown\n              onSelect={onSplitButtonSelect}\n              isOpen={isSplitButtonDropdownOpen}\n              onOpenChange={(isOpen: boolean) => setIsSplitButtonDropdownOpen(isOpen)}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  ref={toggleRef}\n                  isExpanded={isSplitButtonDropdownOpen}\n                  onClick={onSplitButtonToggle}\n                  aria-label=\"Toolbar stacked example split toggle\"\n                  splitButtonItems={[\n                    <MenuToggleCheckbox\n                      key=\"toolbar-stacked-split-button-checkbox-1\"\n                      id=\"toolbar-stacked-split-button-checkbox-1\"\n                      aria-label=\"Select all\"\n                    />\n                  ]}\n                />\n              )}\n            >\n              <DropdownList>{splitButtonDropdownItems}</DropdownList>\n            </Dropdown>\n          </ToolbarItem>\n          <ToolbarItem variant=\"pagination\" align={{ default: 'alignEnd' }}>\n            <Pagination\n              itemCount={37}\n              perPage={perPage}\n              page={page}\n              onSetPage={onSetPage}\n              widgetId=\"pagination-options-menu-top\"\n              onPerPageSelect={onPerPageSelect}\n            />\n          </ToolbarItem>\n        </ToolbarContent>\n      </Toolbar>\n    </Fragment>\n  );\n\n  return (\n    <Fragment>\n      {firstRowItems}\n      <Divider />\n      {secondRowItems}\n    </Fragment>\n  );\n};\n","title":"Stacked example","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When all of a toolbar's required elements cannot fit in a single line, you can split toolbar items into multiple rows.`}
+      </p>
+    </Example>,
+  'Toolbar content wrapping': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Toolbar, ToolbarItem, ToolbarContent } from '@patternfly/react-core';\nimport { Button, SearchInput } from '@patternfly/react-core';\n\nexport const ToolbarItems = () => {\n  const [searchValue, setSearchValue] = useState('');\n\n  const items = (\n    <Fragment>\n      <ToolbarItem>\n        <SearchInput\n          aria-label=\"Items example search input\"\n          value={searchValue}\n          onChange={(_event, value) => setSearchValue(value)}\n          onClear={() => setSearchValue('')}\n        />\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"secondary\">Action</Button>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"secondary\">Action</Button>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"secondary\">Action</Button>\n      </ToolbarItem>\n      <ToolbarItem>\n        <Button variant=\"secondary\">Action</Button>\n      </ToolbarItem>\n      <ToolbarItem variant=\"separator\" />\n      <ToolbarItem>\n        <Button variant=\"primary\">Action</Button>\n      </ToolbarItem>\n    </Fragment>\n  );\n\n  return (\n    <Toolbar id=\"toolbar-items-example\">\n      <ToolbarContent rowWrap={{ default: 'nowrap' }}>{items}</ToolbarContent>\n    </Toolbar>\n  );\n};\n","title":"Toolbar content wrapping","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The toolbar content section will wrap by default, but you can set the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`rowRap`}
+        </code>
+        {` property to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`noWrap`}
+        </code>
+        {` to make it not wrap.`}
+      </p>
+    </Example>,
+  'Toolbar group spacers': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';\nimport { Button } from '@patternfly/react-core';\n\nexport const ToolbarGroupSpacers: React.FunctionComponent = () => {\n  const groupGapItems = (\n    <Fragment>\n      <ToolbarGroup>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Default Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Default Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarItem variant=\"separator\"></ToolbarItem>\n      <ToolbarGroup gap={{ default: 'gapNone' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarItem variant=\"separator\"></ToolbarItem>\n      <ToolbarGroup gap={{ default: 'gapSm' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarItem variant=\"separator\"></ToolbarItem>\n      <ToolbarGroup gap={{ default: 'gapXl' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const groupColumnGapItems = (\n    <Fragment>\n      <ToolbarGroup columnGap={{ default: 'columnGapNone' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Column Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Column Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarItem variant=\"separator\"></ToolbarItem>\n      <ToolbarGroup columnGap={{ default: 'columnGapSm' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Column Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Column Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarItem variant=\"separator\"></ToolbarItem>\n      <ToolbarGroup columnGap={{ default: 'columnGapXl' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Column Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Column Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const groupRowGapItems = (\n    <Fragment>\n      <ToolbarGroup rowGap={{ default: 'rowGapNone' }} rowWrap={{ default: 'wrap' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\"></ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarGroup rowGap={{ default: 'rowGapSm' }} rowWrap={{ default: 'wrap' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\"></ToolbarItem>\n      </ToolbarGroup>\n      <ToolbarGroup rowGap={{ default: 'rowGapXl' }} rowWrap={{ default: 'wrap' }}>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  return (\n    <>\n      Using gap\n      <br />\n      <br />\n      <Toolbar id=\"toolbar-spacers\">\n        <ToolbarContent>{groupGapItems}</ToolbarContent>\n      </Toolbar>\n      Using column gap\n      <br />\n      <br />\n      <Toolbar id=\"toolbar-spacers\">\n        <ToolbarContent>{groupColumnGapItems}</ToolbarContent>\n      </Toolbar>\n      Using row gap\n      <br />\n      <br />\n      <Toolbar id=\"toolbar-spacers\">\n        <ToolbarContent>{groupRowGapItems}</ToolbarContent>\n      </Toolbar>\n      <br />\n    </>\n  );\n};\n","title":"Toolbar group spacers","lang":"ts","className":""}}>
+      
+    </Example>,
+  'Toolbar item spacers': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment } from 'react';\nimport { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';\nimport { Button } from '@patternfly/react-core';\n\nexport const ToolbarItemSpacers: React.FunctionComponent = () => {\n  const itemGapItems = (\n    <Fragment>\n      <ToolbarGroup rowWrap={{ default: 'wrap' }}>\n        <ToolbarItem gap={{ default: 'gapNone' }}>\n          <Button variant=\"secondary\">No Gap</Button>\n          <Button variant=\"secondary\">No Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\"></ToolbarItem>\n        <ToolbarItem gap={{ default: 'gapSm' }}>\n          <Button variant=\"secondary\">Small Gap</Button>\n          <Button variant=\"secondary\">Small Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\"></ToolbarItem>\n        <ToolbarItem gap={{ default: 'gapXl' }}>\n          <Button variant=\"secondary\">Extra Large Gap</Button>\n          <Button variant=\"secondary\">Extra Large Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const itemColumnGapItems = (\n    <Fragment>\n      <ToolbarGroup rowWrap={{ default: 'wrap' }}>\n        <ToolbarItem columnGap={{ default: 'columnGapNone' }}>\n          <Button variant=\"secondary\">No Column Gap</Button>\n          <Button variant=\"secondary\">No Column Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\"></ToolbarItem>\n        <ToolbarItem columnGap={{ default: 'columnGapSm' }}>\n          <Button variant=\"secondary\">Small Column Gap</Button>\n          <Button variant=\"secondary\">Small Column Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\"></ToolbarItem>\n        <ToolbarItem columnGap={{ default: 'columnGapXl' }}>\n          <Button variant=\"secondary\">Extra Large Column Gap</Button>\n          <Button variant=\"secondary\">Extra Large Column Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  const itemRowGapItems = (\n    <Fragment>\n      <ToolbarGroup>\n        <ToolbarItem rowGap={{ default: 'rowGapNone' }} rowWrap={{ default: 'wrap' }}>\n          <Button variant=\"secondary\">No Row Gap</Button>\n          <Button variant=\"secondary\">No Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\"></ToolbarItem>\n        <ToolbarItem rowGap={{ default: 'rowGapSm' }} rowWrap={{ default: 'wrap' }}>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n          <Button variant=\"secondary\">Small Row Gap</Button>\n        </ToolbarItem>\n        <ToolbarItem variant=\"separator\"></ToolbarItem>\n        <ToolbarItem rowGap={{ default: 'rowGapXl' }} rowWrap={{ default: 'wrap' }}>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n          <Button variant=\"secondary\">Extra Large Row Gap</Button>\n        </ToolbarItem>\n      </ToolbarGroup>\n    </Fragment>\n  );\n\n  return (\n    <>\n      Using gap\n      <br />\n      <br />\n      <Toolbar id=\"toolbar-spacers\">\n        <ToolbarContent>{itemGapItems}</ToolbarContent>\n      </Toolbar>\n      Using column gap\n      <br />\n      <br />\n      <Toolbar id=\"toolbar-spacers\">\n        <ToolbarContent>{itemColumnGapItems}</ToolbarContent>\n      </Toolbar>\n      Using row gap\n      <br />\n      <br />\n      <Toolbar id=\"toolbar-spacers\">\n        <ToolbarContent>{itemRowGapItems}</ToolbarContent>\n      </Toolbar>\n    </>\n  );\n};\n","title":"Toolbar item spacers","lang":"ts","className":""}}>
+      
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Toolbar items"])}
+    {React.createElement(pageData.examples["With adjusted inset"])}
+    {React.createElement(pageData.examples["Vertical toolbar"])}
+    {React.createElement(pageData.examples["Sticky toolbar"])}
+    {React.createElement(pageData.examples["Dynamic sticky toolbar"])}
+    {React.createElement(pageData.examples["With groups of items"])}
+    {React.createElement(pageData.examples["Background color variants"])}
+    <AutoLinkHeader {...{"id":"examples-with-toggle-groups-and-filters","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples with toggle groups and filters`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`The following examples use toggle groups to allow for more responsive and complex toolbars with multiple items and groups of items. To visualize responsive toolbar behavior in the following examples, resize the browser to a smaller screen width.`}
+    </p>
+    {React.createElement(pageData.examples["Component managed toggle groups"])}
+    {React.createElement(pageData.examples["Consumer managed toggle groups"])}
+    {React.createElement(pageData.examples["With filters"])}
+    {React.createElement(pageData.examples["With custom label group content"])}
+    {React.createElement(pageData.examples["Stacked example"])}
+    <AutoLinkHeader {...{"id":"examples-with-spacers-and-wrapping","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples with spacers and wrapping`}
+    </AutoLinkHeader>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.`}
+    </p>
+    <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+      {`Items are spaced “16px” apart by default and can be modified by changing their or their parents' `}
+      <code {...{"className":"ws-code "}}>
+        {`gap`}
+      </code>
+      {`, `}
+      <code {...{"className":"ws-code "}}>
+        {`columnGap`}
+      </code>
+      {`, and `}
+      <code {...{"className":"ws-code "}}>
+        {`rowGap`}
+      </code>
+      {` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".`}
+    </p>
+    {React.createElement(pageData.examples["Toolbar content wrapping"])}
+    {React.createElement(pageData.examples["Toolbar group spacers"])}
+    {React.createElement(pageData.examples["Toolbar item spacers"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsToolbarReactDocs';
+Component.pageData = pageData;
+
+export default Component;