diff --git a/CHANGELOG.md b/CHANGELOG.md
index c395cad4054f..a77ee9fae023 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -104,6 +104,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Workspace] Add permission tab to workspace create update page ([#6378](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6378))
 - [Workspace] Hide datasource and advanced settings menu in dashboard management when in workspace. ([#6455](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6455))
 - [Multiple Datasource] Modify selectable picker to remove group label and close popover after selection ([#6515](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6515))
+- [Multiple Datasource] Extract the button component for datasource picker to avoid duplicate code ([#6559](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6559))
 - [Workspace] Add workspaces filter to saved objects page. ([#6458](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6458))
 
 ### 🐛 Bug Fixes
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
index ebc28a49153f..3df5b5be920d 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/__snapshots__/data_source_aggregated_view.test.tsx.snap
@@ -5,14 +5,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -134,14 +129,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -269,14 +259,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -392,14 +377,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -521,14 +501,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -650,14 +625,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -785,14 +755,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -908,14 +873,9 @@ exports[`DataSourceAggregatedView: read active view (displayAllCompatibleDataSou
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1037,14 +997,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1129,14 +1084,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1221,14 +1171,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1313,14 +1258,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1405,14 +1345,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1497,14 +1432,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1589,14 +1519,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1681,14 +1606,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1773,14 +1693,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
@@ -1865,14 +1780,9 @@ exports[`DataSourceAggregatedView: read all view (displayAllCompatibleDataSource
   <EuiPopover
     anchorPosition="downLeft"
     button={
-      <EuiButtonEmpty
-        aria-label="dataSourceAggregatedViewMenuButton"
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        iconSide="left"
-        iconType="database"
+      <PopoverButton
+        className="dataSourceAggregatedView"
         onClick={[Function]}
-        size="s"
       />
     }
     closePopover={[Function]}
diff --git a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
index 775d5e5c3e67..16549afd480d 100644
--- a/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_aggregated_view/data_source_aggregated_view.tsx
@@ -28,6 +28,7 @@ import { DataSourceOption } from '../data_source_menu/types';
 import { DataSourceItem } from '../data_source_item';
 import { DataSourceDropDownHeader } from '../drop_down_header';
 import './data_source_aggregated_view.scss';
+import { PopoverButton } from '../popover_button/popover_button';
 
 interface DataSourceAggregatedViewProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -135,19 +136,6 @@ export class DataSourceAggregatedView extends React.Component<
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
     }
-    const button = (
-      <EuiButtonEmpty
-        className="euiHeaderLink"
-        data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
-        aria-label={i18n.translate('dataSourceAggregatedView.dataSourceOptionsButtonAriaLabel', {
-          defaultMessage: 'dataSourceAggregatedViewMenuButton',
-        })}
-        iconType="database"
-        iconSide="left"
-        size="s"
-        onClick={this.onDataSourcesClick.bind(this)}
-      />
-    );
 
     let items: DataSourceOptionDisplay[] = [];
 
@@ -196,7 +184,12 @@ export class DataSourceAggregatedView extends React.Component<
       <>
         <EuiPopover
           id={'dataSourceSViewContextMenuPopover'}
-          button={button}
+          button={
+            <PopoverButton
+              className={'dataSourceAggregatedView'}
+              onClick={this.onDataSourcesClick.bind(this)}
+            />
+          }
           isOpen={this.state.isPopoverOpen}
           closePopover={this.closePopover.bind(this)}
           panelPaddingSize="none"
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
index c705db9194b0..7ebf4e5a5f80 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
@@ -103,9 +103,9 @@ Object {
           class="euiPopover__anchor"
         >
           <button
-            aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-            data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+            aria-label="dataSourceSelectableButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+            data-test-subj="dataSourceSelectableButton"
             type="button"
           >
             <span
@@ -135,9 +135,9 @@ Object {
         class="euiPopover__anchor"
       >
         <button
-          aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+          aria-label="dataSourceSelectableButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+          data-test-subj="dataSourceSelectableButton"
           type="button"
         >
           <span
@@ -232,9 +232,9 @@ Object {
               class="euiPopover__anchor"
             >
               <button
-                aria-label="dataSourceMenuButton"
-                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-                data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+                aria-label="dataSourceSelectableButton"
+                class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+                data-test-subj="dataSourceSelectableButton"
                 type="button"
               >
                 <span
diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
index 3ec264b888ff..4dc6ce29141a 100644
--- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap
@@ -76,9 +76,9 @@ Object {
           class="euiPopover__anchor"
         >
           <button
-            aria-label="dataSourceAggregatedViewMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
-            data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+            aria-label="dataSourceAggregatedViewButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+            data-test-subj="dataSourceAggregatedViewButton"
             type="button"
           >
             <span
@@ -107,9 +107,9 @@ Object {
         class="euiPopover__anchor"
       >
         <button
-          aria-label="dataSourceAggregatedViewMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink"
-          data-test-subj="dataSourceAggregatedViewContextMenuHeaderLink"
+          aria-label="dataSourceAggregatedViewButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+          data-test-subj="dataSourceAggregatedViewButton"
           type="button"
         >
           <span
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
index 481451f3d80a..13ab09b5bfcf 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
@@ -4,20 +4,11 @@ exports[`DataSourceSelectable should filter options if configured 1`] = `
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceMenuButton"
-        className="euiHeaderLink dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-        disabled={false}
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      >
-        Local cluster
-      </EuiButtonEmpty>
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceSelectable"
+      label="Local cluster"
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   data-test-subj="dataSourceSelectableContextMenuPopover"
@@ -84,18 +75,11 @@ exports[`DataSourceSelectable should render normally with local cluster is hidde
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceMenuButton"
-        className="euiHeaderLink dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-        disabled={false}
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      />
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceSelectable"
+      label=""
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   data-test-subj="dataSourceSelectableContextMenuPopover"
@@ -146,18 +130,11 @@ exports[`DataSourceSelectable should render normally with local cluster not hidd
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceMenuButton"
-        className="euiHeaderLink dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-        disabled={false}
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      />
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceSelectable"
+      label=""
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   data-test-subj="dataSourceSelectableContextMenuPopover"
@@ -218,9 +195,9 @@ Object {
           class="euiPopover__anchor"
         >
           <button
-            aria-label="dataSourceMenuButton"
-            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-            data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+            aria-label="dataSourceSelectableButton"
+            class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+            data-test-subj="dataSourceSelectableButton"
             type="button"
           >
             <span
@@ -389,9 +366,9 @@ Object {
         class="euiPopover__anchor"
       >
         <button
-          aria-label="dataSourceMenuButton"
-          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiHeaderLink dataSourceComponentButtonTitle"
-          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
+          aria-label="dataSourceSelectableButton"
+          class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small dataSourceComponentButtonTitle"
+          data-test-subj="dataSourceSelectableButton"
           type="button"
         >
           <span
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
index 63a67964a6ad..fff531a1ae76 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -12,8 +12,6 @@ import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
 import { render } from '@testing-library/react';
 import * as utils from '../utils';
-import { EuiSelectable } from '@elastic/eui';
-import { dataSourceOptionGroupLabel } from '../utils';
 
 describe('DataSourceSelectable', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -103,7 +101,7 @@ describe('DataSourceSelectable', () => {
 
     await nextTick();
 
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     button.click();
 
     expect(container.getByTestId('dataSourceSelectableContextMenuPopover')).toBeVisible();
@@ -192,7 +190,7 @@ describe('DataSourceSelectable', () => {
     );
 
     await nextTick();
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     expect(button).toHaveTextContent('test2');
   });
 
@@ -211,7 +209,7 @@ describe('DataSourceSelectable', () => {
       />
     );
     await nextTick();
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     expect(button).toHaveTextContent('test2');
   });
 
@@ -230,7 +228,7 @@ describe('DataSourceSelectable', () => {
       />
     );
     await nextTick();
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     expect(button).toHaveTextContent('');
     expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
   });
@@ -250,7 +248,7 @@ describe('DataSourceSelectable', () => {
       />
     );
     await nextTick();
-    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    const button = await container.findByTestId('dataSourceSelectableButton');
     expect(button).toHaveTextContent('');
     expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
   });
diff --git a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
index c1aafb0b2a30..a9b9cd63d367 100644
--- a/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selectable/data_source_selectable.tsx
@@ -36,6 +36,7 @@ import './data_source_selectable.scss';
 import { DataSourceDropDownHeader } from '../drop_down_header';
 import '../button_title.scss';
 import './data_source_selectable.scss';
+import { PopoverButton } from '../popover_button/popover_button';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -237,32 +238,24 @@ export class DataSourceSelectable extends React.Component<
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
     }
-    const button = (
-      <>
-        <EuiButtonEmpty
-          className={'euiHeaderLink dataSourceComponentButtonTitle'}
-          onClick={this.onClick.bind(this)}
-          data-test-subj="dataSourceSelectableContextMenuHeaderLink"
-          aria-label={i18n.translate('dataSourceSelectable.dataSourceOptionsButtonAriaLabel', {
-            defaultMessage: 'dataSourceMenuButton',
-          })}
-          iconType="database"
-          iconSide="left"
-          size="s"
-          disabled={this.props.disabled || false}
-        >
-          {this.state.selectedOption &&
-            this.state.selectedOption.length > 0 &&
-            this.state.selectedOption[0]?.label}
-        </EuiButtonEmpty>
-      </>
-    );
+
+    const label =
+      (this.state.selectedOption &&
+        this.state.selectedOption.length > 0 &&
+        this.state.selectedOption[0]?.label) ||
+      '';
 
     return (
       <EuiPopover
         initialFocus={'.euiSelectableSearch'}
         id={'dataSourceSelectableContextMenuPopover'}
-        button={button}
+        button={
+          <PopoverButton
+            className={'dataSourceSelectable'}
+            label={label}
+            onClick={this.onClick.bind(this)}
+          />
+        }
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
         panelPaddingSize="none"
diff --git a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
index 80667bf86091..a804c48a04de 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_view/__snapshots__/data_source_view.test.tsx.snap
@@ -4,17 +4,10 @@ exports[`DataSourceView Should render successfully when provided datasource has
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceViewButton"
-        className="dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceViewButton"
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      />
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceView"
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   display="inlineBlock"
@@ -77,17 +70,10 @@ exports[`DataSourceView should call getDataSourceById when only pass id with no
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceViewButton"
-        className="dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceViewButton"
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      />
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceView"
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   display="inlineBlock"
@@ -140,19 +126,11 @@ exports[`DataSourceView should render normally with local cluster not hidden 1`]
 <EuiPopover
   anchorPosition="downLeft"
   button={
-    <React.Fragment>
-      <EuiButtonEmpty
-        aria-label="dataSourceViewButton"
-        className="dataSourceComponentButtonTitle"
-        data-test-subj="dataSourceViewButton"
-        iconSide="left"
-        iconType="database"
-        onClick={[Function]}
-        size="s"
-      >
-        test1
-      </EuiButtonEmpty>
-    </React.Fragment>
+    <PopoverButton
+      className="dataSourceView"
+      label="test1"
+      onClick={[Function]}
+    />
   }
   closePopover={[Function]}
   display="inlineBlock"
diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
index 75596b215b08..8f194069f55d 100644
--- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx
@@ -30,6 +30,7 @@ import { DataSourceItem } from '../data_source_item';
 import { LocalCluster } from '../constants';
 import { NoDataSource } from '../no_data_source';
 import './data_source_view.scss';
+import { PopoverButton } from '../popover_button/popover_button';
 
 interface DataSourceViewProps {
   fullWidth: boolean;
@@ -156,7 +157,7 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
     if (this.state.showError) {
       return <DataSourceErrorMenu />;
     }
-    const label = this.state.selectedOption.length > 0 ? this.state.selectedOption[0].label : '';
+    const label = this.state.selectedOption.length > 0 ? this.state.selectedOption[0].label! : '';
     const options =
       this.state.selectedOption.length > 0
         ? this.state.selectedOption.map((option) => ({
@@ -166,28 +167,16 @@ export class DataSourceView extends React.Component<DataSourceViewProps, DataSou
           }))
         : [];
 
-    const button = (
-      <>
-        <EuiButtonEmpty
-          className="dataSourceComponentButtonTitle"
-          data-test-subj="dataSourceViewButton"
-          onClick={this.onClick.bind(this)}
-          aria-label={i18n.translate('dataSourceView.dataSourceOptionsViewAriaLabel', {
-            defaultMessage: 'dataSourceViewButton',
-          })}
-          iconType="database"
-          iconSide="left"
-          size="s"
-        >
-          {label}
-        </EuiButtonEmpty>
-      </>
-    );
-
     return (
       <EuiPopover
         id={'dataSourceViewPopover'}
-        button={button}
+        button={
+          <PopoverButton
+            className={'dataSourceView'}
+            label={label}
+            onClick={this.onClick.bind(this)}
+          />
+        }
         isOpen={this.state.isPopoverOpen}
         closePopover={this.closePopover.bind(this)}
         panelPaddingSize="none"
diff --git a/src/plugins/data_source_management/public/components/popover_button/popover_button.test.tsx b/src/plugins/data_source_management/public/components/popover_button/popover_button.test.tsx
new file mode 100644
index 000000000000..7622ef7f47a3
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/popover_button/popover_button.test.tsx
@@ -0,0 +1,29 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import { PopoverButton } from './popover_button';
+
+describe('Test on PopoverButton', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+  it('renders without crashing', () => {
+    shallow(<PopoverButton className="random" label="button-name" onClick={jest.fn()} />);
+  });
+
+  it('renders the label correctly', () => {
+    const label = 'Test Label';
+    const component = mount(<PopoverButton className="random" label={label} onClick={jest.fn()} />);
+    expect(component.find('EuiButtonEmpty').text()).toBe(label);
+  });
+
+  it('calls onClick when button is clicked', () => {
+    const component = mount(<PopoverButton className="random" onClick={jest.fn()} />);
+    component.find('.dataSourceComponentButtonTitle').first().simulate('click');
+    expect(component.find('EuiButtonEmpty').text()).toBe('');
+  });
+});
diff --git a/src/plugins/data_source_management/public/components/popover_button/popover_button.tsx b/src/plugins/data_source_management/public/components/popover_button/popover_button.tsx
new file mode 100644
index 000000000000..a15f81e2e7e1
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/popover_button/popover_button.tsx
@@ -0,0 +1,33 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from 'react';
+import { EuiButtonEmpty } from '@elastic/eui';
+import { i18n } from '@osd/i18n';
+
+interface PopoverButtonProps {
+  className: string;
+  label?: string;
+  onClick: () => void;
+}
+
+export const PopoverButton: React.FC<PopoverButtonProps> = ({ className, label, onClick }) => {
+  return (
+    <>
+      <EuiButtonEmpty
+        className={`dataSourceComponentButtonTitle`}
+        data-test-subj={`${className}Button`}
+        onClick={onClick}
+        aria-label={i18n.translate(`${className}.dataSourceOptionsViewAriaLabel`, {
+          defaultMessage: `${className}Button`,
+        })}
+        iconType="database"
+        iconSide="left"
+        size="s"
+      >
+        {label ? label : null}
+      </EuiButtonEmpty>
+    </>
+  );
+};