diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index 32c1244bd1f..3022812352a 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -28,7 +28,7 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
You may adjust the space between toolbar items to arrange them into groups. Read our spacers documentation to learn more about using spacers.
-Items are spaced “16px” apart by default via their parents' `gap` or `columnGap` property. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
+Items are spaced “16px” apart by default and can be modified by changing their or their parents' `gap`, `columnGap`, and `rowGap` properties. You can set the property values at multiple breakpoints, including "default", "md", "lg", "xl", and "2xl".
```ts file="./ToolbarSpacers.tsx"
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
index 19c6a9fabb1..b395fb69613 100644
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
@@ -3,46 +3,264 @@ import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/
import { Button } from '@patternfly/react-core';
export const ToolbarSpacers: React.FunctionComponent = () => {
- const items = (
+ const groupGapItems = (
-
+
-
+
+
+
+
-
+
-
+
-
+
-
+
-
+
-
+
+
+
+
+
+
+
+
+
+ );
+
+ const groupColumnGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const groupRowGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const itemGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const itemColumnGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const itemRowGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
);
return (
-
- {items}
-
+ <>
+ Toolbar Group Spacing:
+
+
+
+ {groupGapItems}
+
+ Using column gap
+
+
+
+ {groupColumnGapItems}
+
+ Using row gap
+
+
+
+ {groupRowGapItems}
+
+
+ Toolbar Item Spacing:
+
+
+
+ {itemGapItems}
+
+ Using column gap
+
+
+
+ {itemColumnGapItems}
+
+ Using row gap
+
+
+
+ {itemRowGapItems}
+
+
);
};