diff --git a/packages/react-core/src/components/Toolbar/examples/Toolbar.md b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
index 99ae433ed5c..c855d8485e7 100644
--- a/packages/react-core/src/components/Toolbar/examples/Toolbar.md
+++ b/packages/react-core/src/components/Toolbar/examples/Toolbar.md
@@ -24,16 +24,6 @@ Note: This example does not demonstrate responsive toolbar behavior. Responsive
```
-### Toolbar item spacers
-
-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".
-
-```ts file="./ToolbarSpacers.tsx"
-
-```
-
### With adjusted inset
To adjust a toolbar’s inset, use the `inset` 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”.
@@ -120,3 +110,20 @@ When all of a toolbar's required elements cannot fit in a single line, you can s
```ts file="./ToolbarStacked.tsx"
```
+
+## Examples with toolbar spacers
+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 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".
+
+### Toolbar group spacers
+
+```ts file="./ToolbarGroupSpacers.tsx"
+
+```
+
+### Toolbar item spacers
+
+```ts file="./ToolbarItemSpacers.tsx"
+
+```
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx
new file mode 100644
index 00000000000..e32bc246a0f
--- /dev/null
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarGroupSpacers.tsx
@@ -0,0 +1,185 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarGroupSpacers: React.FunctionComponent = () => {
+ const groupGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const groupColumnGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const groupRowGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ return (
+ <>
+ Using gap
+
+
+
+ {groupGapItems}
+
+ Using column gap
+
+
+
+ {groupColumnGapItems}
+
+ Using row gap
+
+
+
+ {groupRowGapItems}
+
+
+
+ );
+};
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx
new file mode 100644
index 00000000000..cd711951aa3
--- /dev/null
+++ b/packages/react-core/src/components/Toolbar/examples/ToolbarItemSpacers.tsx
@@ -0,0 +1,91 @@
+import React from 'react';
+import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+
+export const ToolbarItemSpacers: React.FunctionComponent = () => {
+ const itemGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const itemColumnGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ const itemRowGapItems = (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+
+ return (
+ <>
+ Using gap
+
+
+
+ {itemGapItems}
+
+ Using column gap
+
+
+
+ {itemColumnGapItems}
+
+ Using row gap
+
+
+
+ {itemRowGapItems}
+
+
+ );
+};
diff --git a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx b/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
deleted file mode 100644
index 19c6a9fabb1..00000000000
--- a/packages/react-core/src/components/Toolbar/examples/ToolbarSpacers.tsx
+++ /dev/null
@@ -1,48 +0,0 @@
-import React from 'react';
-import { Toolbar, ToolbarItem, ToolbarGroup, ToolbarContent } from '@patternfly/react-core';
-import { Button } from '@patternfly/react-core';
-
-export const ToolbarSpacers: React.FunctionComponent = () => {
- const items = (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-
- return (
-
- {items}
-
- );
-};