diff --git a/packages/code-connect/components/Toolbar/Toolbar.figma.tsx b/packages/code-connect/components/Toolbar/Toolbar.figma.tsx
new file mode 100644
index 00000000000..afcaf5a600d
--- /dev/null
+++ b/packages/code-connect/components/Toolbar/Toolbar.figma.tsx
@@ -0,0 +1,368 @@
+import figma from '@figma/code-connect';
+import {
+  Badge,
+  Button,
+  ButtonVariant,
+  Divider,
+  Dropdown,
+  DropdownItem,
+  DropdownList,
+  MenuToggle,
+  MenuToggleCheckbox,
+  MenuToggleElement,
+  OverflowMenu,
+  OverflowMenuContent,
+  OverflowMenuControl,
+  OverflowMenuGroup,
+  OverflowMenuItem,
+  Pagination,
+  SearchInput,
+  Select,
+  SelectList,
+  SelectOption,
+  Toolbar,
+  ToolbarItem,
+  ToolbarContent,
+  ToolbarFilter,
+  ToolbarGroup
+} from '@patternfly/react-core';
+
+import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
+import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
+
+// Documentation for Toolbar can be found at https://www.patternfly.org/components/toolbar
+
+figma.connect(
+  Toolbar,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=8062-17157',
+  {
+    props: {
+      colorVariant: figma.boolean('Transparent Background', {
+        true: 'no-background',
+        false: undefined
+      }),
+      bulkSelector: figma.boolean('Bulk Selector', {
+        true: (
+          <ToolbarItem>
+            <Dropdown
+              onSelect={() => {}}
+              isOpen={false}
+              onOpenChange={() => {}}
+              toggle={(toggleRef) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  isExpanded={false}
+                  onClick={() => {}}
+                  aria-label="Toolbar stacked example split toggle"
+                  splitButtonItems={[
+                    <MenuToggleCheckbox
+                      key="toolbar-stacked-split-button-checkbox-1"
+                      id="toolbar-stacked-split-button-checkbox-1"
+                      aria-label="Select all"
+                    />
+                  ]}
+                />
+              )}
+            >
+              <DropdownList>
+                <DropdownItem value={0} key="action">
+                  Action
+                </DropdownItem>
+                <DropdownItem
+                  value={1}
+                  key="link"
+                  to="#default-link2"
+                  // Prevent the default onClick functionality for example purposes
+                  onClick={() => {}}
+                >
+                  Link
+                </DropdownItem>
+                <DropdownItem value={2} isDisabled key="disabled action">
+                  Disabled Action
+                </DropdownItem>
+                <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+                  Disabled Link
+                </DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+        ),
+        false: undefined
+      }),
+      filterGroup: figma.boolean('Filter group', {
+        true: (
+          <>
+            <ToolbarFilter
+              labels={['New', 'Pending', 'Running', 'Cancelled']}
+              deleteLabel={() => {}}
+              deleteLabelGroup={() => {}}
+              categoryName="Status"
+            >
+              <Select
+                aria-label="Status"
+                role="menu"
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    ref={toggleRef}
+                    onClick={() => {}}
+                    isExpanded={false}
+                    style={
+                      {
+                        width: '140px'
+                      } as React.CSSProperties
+                    }
+                  >
+                    Status
+                    {['New', 'Pending'].length > 0 && <Badge isRead>{['New', 'Pending'].length}</Badge>}
+                  </MenuToggle>
+                )}
+                onSelect={() => {}}
+                selected={false}
+                isOpen={false}
+                onOpenChange={() => {}}
+              >
+                <SelectList>
+                  <SelectOption hasCheckbox key="statusNew" value="New" isSelected={false}>
+                    New
+                  </SelectOption>
+                  <SelectOption hasCheckbox key="statusPending" value="Pending" isSelected={false}>
+                    Pending
+                  </SelectOption>
+                  <SelectOption hasCheckbox key="statusRunning" value="Running" isSelected={false}>
+                    Running
+                  </SelectOption>
+                  <SelectOption hasCheckbox key="statusCancelled" value="Cancelled" isSelected={false}>
+                    Cancelled
+                  </SelectOption>
+                </SelectList>
+              </Select>
+            </ToolbarFilter>
+            <ToolbarFilter labels={['Low', 'Medium', 'High']} deleteLabel={() => {}} categoryName="Risk">
+              <Select
+                aria-label="Risk Filter"
+                role="menu"
+                toggle={(toggleRef) => (
+                  <MenuToggle ref={toggleRef} onClick={() => {}} isExpanded={false}>
+                    Risk
+                  </MenuToggle>
+                )}
+                onSelect={() => {}}
+                selected={false}
+                isOpen={false}
+                onOpenChange={() => {}}
+              >
+                <SelectList>
+                  <SelectOption value="Low">Low</SelectOption>
+                  <SelectOption value="Medium">Medium</SelectOption>
+                  <SelectOption value="High">High</SelectOption>
+                </SelectList>
+              </Select>
+            </ToolbarFilter>
+          </>
+        ),
+        false: undefined
+      }),
+      searchFilter: figma.boolean('Search filter', {
+        true: (
+          <ToolbarItem>
+            <SearchInput aria-label="Search filter input" onChange={() => {}} value={''} onClear={() => {}} />
+          </ToolbarItem>
+        ),
+        false: undefined
+      }),
+      iconButtonGroup: figma.boolean('Icon button group', {
+        true: (
+          <ToolbarGroup variant="action-group-plain">
+            <ToolbarItem>
+              <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
+            </ToolbarItem>
+          </ToolbarGroup>
+        ),
+        false: undefined
+      }),
+      verticalDivider: figma.boolean('Vertical divider', {
+        true: <ToolbarItem variant="separator" />,
+        false: undefined
+      }),
+      buttonGroup: figma.boolean('Button group', {
+        true: (
+          <>
+            <ToolbarItem>
+              <Button variant="primary">Button</Button>
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button variant="secondary">Button</Button>
+            </ToolbarItem>
+          </>
+        ),
+        false: undefined
+      }),
+      linkButtons: figma.boolean('Link buttons', {
+        true: (
+          <>
+            <ToolbarItem>
+              <Button icon={<PlusCircleIcon />} variant="link">
+                Button
+              </Button>
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button variant="link">Button</Button>
+            </ToolbarItem>
+          </>
+        ),
+        false: undefined
+      }),
+      overflowMenu: figma.boolean('Overflow menu', {
+        true: (
+          <ToolbarItem>
+            <OverflowMenu breakpoint="2xl">
+              <OverflowMenuContent>
+                <OverflowMenuGroup groupType="button">
+                  <OverflowMenuItem>
+                    <Button variant={ButtonVariant.primary}>Primary</Button>
+                  </OverflowMenuItem>
+                  <OverflowMenuItem>
+                    <Button variant={ButtonVariant.secondary}>Secondary</Button>
+                  </OverflowMenuItem>
+                </OverflowMenuGroup>
+              </OverflowMenuContent>
+              <OverflowMenuControl hasAdditionalOptions>
+                <Dropdown
+                  onSelect={() => {}}
+                  onOpenChange={() => {}}
+                  toggle={(toggleRef) => (
+                    <MenuToggle
+                      ref={toggleRef}
+                      aria-label="Kebab overflow menu"
+                      variant="plain"
+                      onClick={() => {}}
+                      isExpanded={false}
+                      icon={<EllipsisVIcon />}
+                    />
+                  )}
+                  isOpen={false}
+                >
+                  <DropdownList>
+                    <DropdownItem>Action</DropdownItem>
+                    <DropdownItem
+                      to="#link"
+                      // Prevent the default onClick functionality for example purposes
+                      onClick={() => {}}
+                    >
+                      Link
+                    </DropdownItem>
+                    <DropdownItem isDisabled>Disabled Action</DropdownItem>
+                    <DropdownItem isDisabled to="#link">
+                      Disabled Link
+                    </DropdownItem>
+                  </DropdownList>
+                </Dropdown>
+              </OverflowMenuControl>
+            </OverflowMenu>
+          </ToolbarItem>
+        ),
+        false: undefined
+      }),
+      pagination: figma.boolean('Pagination', {
+        true: (
+          <ToolbarItem variant="pagination" align={{ default: 'alignEnd' }}>
+            <Pagination itemCount={523} perPage={20} page={1} onSetPage={() => {}} onPerPageSelect={() => {}} />
+          </ToolbarItem>
+        ),
+        false: undefined
+      }),
+      filterChips: figma.boolean('Filter chips', {
+        true: (
+          <>
+            <Divider />
+            <ToolbarContent>
+              <ToolbarGroup variant="filter-group">
+                <ToolbarFilter
+                  labels={['New', 'Pending']}
+                  deleteLabel={() => {}}
+                  deleteLabelGroup={() => {}}
+                  categoryName="Status"
+                >
+                  <Select
+                    aria-label="Status"
+                    role="menu"
+                    toggle={(toggleRef) => (
+                      <MenuToggle ref={toggleRef} onClick={() => {}} isExpanded={false}>
+                        Status
+                        {['New', 'Pending'].length > 0 && <Badge isRead>{['New', 'Pending'].length}</Badge>}
+                      </MenuToggle>
+                    )}
+                    onSelect={() => {}}
+                    selected={['New', 'Pending']}
+                    isOpen={false}
+                    onOpenChange={() => {}}
+                  >
+                    {statusMenuItems}
+                  </Select>
+                </ToolbarFilter>
+                <ToolbarFilter
+                  labels={filters.risk}
+                  deleteLabel={(category, label) => onDelete(category as string, label as string)}
+                  categoryName="Risk"
+                >
+                  <Select
+                    aria-label="Risk"
+                    role="menu"
+                    toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                      <MenuToggle
+                        ref={toggleRef}
+                        onClick={onRiskToggle}
+                        isExpanded={isRiskExpanded}
+                        style={
+                          {
+                            width: '140px'
+                          } as React.CSSProperties
+                        }
+                      >
+                        Risk
+                        {filters.risk.length > 0 && <Badge isRead>{filters.risk.length}</Badge>}
+                      </MenuToggle>
+                    )}
+                    onSelect={onRiskSelect}
+                    selected={filters.risk}
+                    isOpen={isRiskExpanded}
+                    onOpenChange={(isOpen) => setIsRiskExpanded(isOpen)}
+                  >
+                    {riskMenuItems}
+                  </Select>
+                </ToolbarFilter>
+              </ToolbarGroup>
+            </ToolbarContent>
+          </>
+        ),
+        false: undefined
+      })
+    },
+    example: (props) => (
+      <Toolbar colorVariant={props.colorVariant}>
+        <ToolbarContent>
+          {props.bulkSelector}
+          {props.filterGroup}
+          {props.searchFilter}
+          {props.iconButtonGroup}
+          {props.verticalDivider}
+          {props.buttonGroup}
+          {props.linkButtons}
+          {props.overflowMenu}
+          {props.pagination}
+        </ToolbarContent>
+
+        {props.filterChips}
+      </Toolbar>
+    )
+  }
+);
diff --git a/packages/code-connect/figma.config.json b/packages/code-connect/figma.config.json
index 2537e14be2b..17eb257b8a3 100644
--- a/packages/code-connect/figma.config.json
+++ b/packages/code-connect/figma.config.json
@@ -1,13 +1,10 @@
 {
   "codeConnect": {
     "parser": "react",
-    "include": [
-      "components/DatePicker/*.tsx",
-      "components/EmptyState/*.tsx",
-      "components/FileUpload/*.tsx",
-      "components/Hint/*.tsx",
-      "components/InlineEdit/*.tsx"
-    ],
+    "include": ["components/Toolbar/*.figma.tsx"],
+    "documentUrlSubstitutions": {
+      "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components": "https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/branch/9HiAevBhEc2iYY9rxZtovA/PatternFly-6--Components"
+    },
     "paths": {
       "src/components": "src/components"
     },
@@ -30,4 +27,4 @@
       }
     }
   }
-}
\ No newline at end of file
+}