diff --git a/.github/workflows/format.yml b/.github/workflows/format.yml
index 393b14f..908aa3c 100644
--- a/.github/workflows/format.yml
+++ b/.github/workflows/format.yml
@@ -1,28 +1,28 @@
 name: Format
 
 on:
-    push:
-        branches:
-            - main
-    pull_request:
-        branches: ['main']
+  push:
+    branches:
+      - main
+  pull_request:
+    branches: ['main']
 
 jobs:
-    format:
-        runs-on: ubuntu-latest
-        steps:
-            - uses: actions/checkout@v2
-            - uses: actions/setup-node@v2
-              with:
-                  node-version: '16'
-                  cache: npm
-            - run: npm install
+  format:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: npm
+      - run: npm install
 
-            - name: Formatting code
-              run: npm run format
+      - name: Formatting code
+        run: npm run format
 
-            - name: Commit changes
-              uses: stefanzweifel/git-auto-commit-action@v4
-              with:
-                  commit_message: '[ci]: format code'
-                  branch: ${{ github.head_ref }}
+      - name: Commit changes
+        uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: '[ci]: format code'
+          branch: ${{ github.head_ref }}
diff --git a/docs/buttons/filter-bar-button.mdx b/docs/buttons/filter-bar-button.mdx
new file mode 100644
index 0000000..b1224e7
--- /dev/null
+++ b/docs/buttons/filter-bar-button.mdx
@@ -0,0 +1,281 @@
+---
+product: dd360-ds
+title: React FilterBarButton component
+components: FilterBarButton
+---
+import { DynamicHeroIcon } from 'dd360-ds'
+
+
+<br id='top' />
+<br />
+
+<Label>Buttons</Label>
+
+# <HeaderDocCustom title="Filter Bar Button" pathUrl="buttons-filter-bar-button" />
+
+The FilterBarButton component allows you to create interactive filter buttons with a customizable popover, ideal for implementing filters and actions in web applications.
+
+<br />
+
+##### <span name="floating-nav">Imports</span>
+
+The first alternative is recommended as it can reduce the application bundle
+
+<WindowEditor codeString="import FilterBarButton from 'dd360-ds/FilterBarButton'" />
+<WindowEditor codeString="import { FilterBarButton } from 'dd360-ds'" />
+
+##### <span name="floating-nav">Usage</span>
+
+The FilterBarButton component requires at least the `label` and `valueBadge` properties. The popover will be displayed when clicking the button.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">IconLeft</span>
+
+The <TagDocs text='IconLeft' /> prop allows you to add an icon to the left side of the filter button.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    iconLeft={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  iconLeft={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">IconRight</span>
+
+The <TagDocs text='iconRight' /> prop allows you to add an icon to the right side of the filter button.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    iconRight={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  iconRight={<DynamicHeroIcon icon="ChevronDownIcon" className="w-4 h-4" />}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">TitlePopover</span>
+
+The <TagDocs text='titlePopover' /> prop allows you to customize the title displayed in the filter button's popover.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    titlePopover='Title Popover'
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  titlePopover='Title Popover'
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">ChildrenPopover</span>
+
+The <TagDocs text='childrenPopover' /> prop allows you to add custom content inside the filter button's popover.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    childrenPopover={<div className='p-6'>Children Popover</div>}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  childrenPopover={<div className='p-6'>Children Popover</div>}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">ClassNamePopover</span>
+
+The <TagDocs text='classNamePopover' /> prop allows you to apply custom CSS classes to the filter button's popover.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    classNamePopover='text-blue-300'
+    childrenPopover={<div className='p-6'>Children Popover</div>}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  classNamePopover='text-blue-300'
+  childrenPopover={<div className='p-6'>Children Popover</div>}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">SecondaryButton</span>
+
+The <TagDocs text='secondaryButton' /> prop allows you to configure a secondary button in the popover with its label and click handler.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    secondaryButton={{label:'Cancel', onClick:()=>{alert('Cancel')}}}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  secondaryButton={{label:'Cancel', onClick:()=>{alert('Cancel')}}}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">PrimaryButton</span>
+
+The <TagDocs text='primaryButton' /> prop allows you to configure a primary button in the popover with its label and click handler.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    primaryButton={{label:'Submit', onClick:()=>{alert('Submit')}}}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  primaryButton={{label:'Submit', onClick:()=>{alert('Submit')}}}
+/>
+`}/>
+
+<br />
+
+##### <span name="floating-nav">PrincipalButton</span>
+
+The <TagDocs text='principalButton' /> prop allows you to configure the behavior of the main button that triggers the popover.
+
+<Playground>
+  <FilterBarButton
+    label="Filter"
+    valueBadge={3}
+    principalButton={{onClick:()=>{alert('Active Popover')}}}
+  />
+</Playground>
+
+The following code snippet shows how to use the FilterBarButton component:
+
+<WindowEditor
+    codeString={`import { FilterBarButton } from 'dd360-ds'
+
+<FilterBarButton
+  label="Filter"
+  valueBadge={3}
+  principalButton={{ onClick:()=>{alert('Active Popover')}}}
+/>
+`}/>
+
+<br />
+
+
+##### <span name="floating-nav">API Reference</span>
+
+<CustomTableDocs
+  dataTable={[
+    { title: 'label', default: null, types: ['string'], required: true },
+    { title: 'valueBadge', default: null, types: ['number'] ,required: true},
+    { title: 'iconLeft', default: null, types: ['ReactNode'] },
+    { title: 'iconRight', default: null, types: ['ReactNode'] },
+    { title: 'titlePopover', default: 'Title', types: ['string'] },
+    { title: 'childrenPopover', default: null, types: ['ReactNode'] },
+    { title: 'classNamePopover', default: null, types: ['string'] },
+    { title: 'secondaryButton', default: null, types: ['IButtons'] },
+    { title: 'primaryButton', default: null, types: ['IButtons'] },
+    { title: 'principalButton', default: null, types: ['IButtons'] }
+  ]}
+/>
+
+Note: This documentation assumes that the user has basic knowledge of React and how to use components in React applications.
+
+<BackAndForwardController /> 
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7ac48c6..4f579a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,7 +11,7 @@
         "@algolia/autocomplete-core": "^1.8.3",
         "@docsearch/react": "^3.5.1",
         "@vercel/analytics": "^1.0.1",
-        "dd360-ds": "6.35.1",
+        "dd360-ds": "6.38.0",
         "dd360-utils": "18.1.0",
         "gray-matter": "^4.0.3",
         "i18next": "^22.4.9",
@@ -616,9 +616,10 @@
       }
     },
     "node_modules/@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==",
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/popperjs"
@@ -1525,19 +1526,19 @@
       "dev": true
     },
     "node_modules/dd360-ds": {
-      "version": "6.35.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.35.1.tgz",
-      "integrity": "sha512-tzo2gk3fLI1D44uCv3FM8KbBCGbLutdJWpKETxROPwD53EGzPJJVvAvk+ah/zpLi8fo/P9l1oI8LoqY102c4OQ==",
+      "version": "6.38.0",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.38.0.tgz",
+      "integrity": "sha512-iFnUotZAaHR+zbKwXTrpL1Gt2rmOTD4yw8OB0Rej3PZ/O5BQlAMRVU5AS/ISur5bilR2XtFxPbv0wMcc//AcVQ==",
       "license": "MIT",
       "dependencies": {
-        "@heroicons/react": "^1.0.5",
-        "@popperjs/core": "2.11.7",
-        "dd360-utils": "^1.0.12",
-        "react-circular-progressbar": "^2.1.0",
-        "react-currency-input-field": "^3.6.11"
+        "@heroicons/react": "^1.0.6",
+        "@popperjs/core": "2.11.8",
+        "dd360-utils": "^1.0.18",
+        "react-circular-progressbar": "^2.2.0",
+        "react-currency-input-field": "^3.10.0"
       },
       "engines": {
-        "node": ">=16",
+        "node": ">=20",
         "npm": ">=7"
       },
       "peerDependencies": {
@@ -5560,19 +5561,21 @@
       }
     },
     "node_modules/react-circular-progressbar": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
-      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.2.0.tgz",
+      "integrity": "sha512-cgyqEHOzB0nWMZjKfWN3MfSa1LV3OatcDjPz68lchXQUEiBD5O1WsAtoVK4/DSL0B4USR//cTdok4zCBkq8X5g==",
+      "license": "MIT",
       "peerDependencies": {
-        "react": "^0.14.0 || ^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0"
+        "react": ">=0.14.0"
       }
     },
     "node_modules/react-currency-input-field": {
-      "version": "3.6.14",
-      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.14.tgz",
-      "integrity": "sha512-pUM4oK1KkUjjcFH7t6GksbuYwGpNhX3We2l41V9PIyJjm1HVlJGbKNksr0PNXGsQZqXDIKBJxL3TAbTS4cbKgg==",
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.10.0.tgz",
+      "integrity": "sha512-GRmZogHh1e1LrmgXg/fKHSuRLYUnj/c/AumfvfuDMA0UX1mDR6u2NR0fzDemRdq4tNHNLucJeJ2OKCr3ehqyDA==",
+      "license": "MIT",
       "peerDependencies": {
-        "react": "^16.9.0 || ^17.0.0 || ^18.0.0"
+        "react": "^16.9.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/react-dom": {
@@ -7354,9 +7357,9 @@
       }
     },
     "@popperjs/core": {
-      "version": "2.11.7",
-      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz",
-      "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw=="
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="
     },
     "@rushstack/eslint-patch": {
       "version": "1.2.0",
@@ -8006,15 +8009,15 @@
       "dev": true
     },
     "dd360-ds": {
-      "version": "6.35.1",
-      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.35.1.tgz",
-      "integrity": "sha512-tzo2gk3fLI1D44uCv3FM8KbBCGbLutdJWpKETxROPwD53EGzPJJVvAvk+ah/zpLi8fo/P9l1oI8LoqY102c4OQ==",
+      "version": "6.38.0",
+      "resolved": "https://registry.npmjs.org/dd360-ds/-/dd360-ds-6.38.0.tgz",
+      "integrity": "sha512-iFnUotZAaHR+zbKwXTrpL1Gt2rmOTD4yw8OB0Rej3PZ/O5BQlAMRVU5AS/ISur5bilR2XtFxPbv0wMcc//AcVQ==",
       "requires": {
-        "@heroicons/react": "^1.0.5",
-        "@popperjs/core": "2.11.7",
-        "dd360-utils": "^1.0.12",
-        "react-circular-progressbar": "^2.1.0",
-        "react-currency-input-field": "^3.6.11"
+        "@heroicons/react": "^1.0.6",
+        "@popperjs/core": "2.11.8",
+        "dd360-utils": "^1.0.18",
+        "react-circular-progressbar": "^2.2.0",
+        "react-currency-input-field": "^3.10.0"
       },
       "dependencies": {
         "dd360-utils": {
@@ -10718,15 +10721,15 @@
       }
     },
     "react-circular-progressbar": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.1.0.tgz",
-      "integrity": "sha512-xp4THTrod4aLpGy68FX/k1Q3nzrfHUjUe5v6FsdwXBl3YVMwgeXYQKDrku7n/D6qsJA9CuunarAboC2xCiKs1g==",
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/react-circular-progressbar/-/react-circular-progressbar-2.2.0.tgz",
+      "integrity": "sha512-cgyqEHOzB0nWMZjKfWN3MfSa1LV3OatcDjPz68lchXQUEiBD5O1WsAtoVK4/DSL0B4USR//cTdok4zCBkq8X5g==",
       "requires": {}
     },
     "react-currency-input-field": {
-      "version": "3.6.14",
-      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.6.14.tgz",
-      "integrity": "sha512-pUM4oK1KkUjjcFH7t6GksbuYwGpNhX3We2l41V9PIyJjm1HVlJGbKNksr0PNXGsQZqXDIKBJxL3TAbTS4cbKgg==",
+      "version": "3.10.0",
+      "resolved": "https://registry.npmjs.org/react-currency-input-field/-/react-currency-input-field-3.10.0.tgz",
+      "integrity": "sha512-GRmZogHh1e1LrmgXg/fKHSuRLYUnj/c/AumfvfuDMA0UX1mDR6u2NR0fzDemRdq4tNHNLucJeJ2OKCr3ehqyDA==",
       "requires": {}
     },
     "react-dom": {
diff --git a/package.json b/package.json
index 99354d9..9f5a292 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
     "@algolia/autocomplete-core": "^1.8.3",
     "@docsearch/react": "^3.5.1",
     "@vercel/analytics": "^1.0.1",
-    "dd360-ds": "6.35.1",
+    "dd360-ds": "6.38.0",
     "dd360-utils": "18.1.0",
     "gray-matter": "^4.0.3",
     "i18next": "^22.4.9",
diff --git a/src/components/Layout/SideBarDocs.tsx b/src/components/Layout/SideBarDocs.tsx
index 8e97637..6e4447f 100644
--- a/src/components/Layout/SideBarDocs.tsx
+++ b/src/components/Layout/SideBarDocs.tsx
@@ -94,6 +94,10 @@ export const components: ComponentObjectProps = {
       {
         label: 'Radio Group',
         pathname: 'button-radio-group'
+      },
+      {
+        label: 'Filter Bar Button',
+        pathname: 'filter-bar-button'
       }
     ]
   },