diff --git a/CHANGELOG.md b/CHANGELOG.md
index 1440915fa3a2..feb33fa5c9e1 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -117,6 +117,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [BUG][Multiple Datasource]Read hideLocalCluster setting from yml and set in data source selector and data source menu ([#6361](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6361))
 - [BUG][Multiple Datasource] Refactor read-only component to cover more edge cases ([#6416](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6416))
 - [BUG] Fix for checkForFunctionProperty so that order does not matter ([#6248](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6248))
+- [BUG][Multiple Datasource] Modify the button of selectable component to fix the title overflow issue ([#6465](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6465))
 - [BUG][Multiple Datasource] Validation succeed as long as status code in response is 200 ([#6399](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6399))
 
 ### 🚞 Infrastructure
diff --git a/src/plugins/data_source_management/public/components/button_title.scss b/src/plugins/data_source_management/public/components/button_title.scss
new file mode 100644
index 000000000000..66b32d4ee8b7
--- /dev/null
+++ b/src/plugins/data_source_management/public/components/button_title.scss
@@ -0,0 +1,7 @@
+.dataSourceComponentButtonTitle {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  width: auto;
+  max-width: 16ch;
+}
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 40a7edce7558..6bb45712d1f2 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
@@ -26,6 +26,7 @@ import { LocalCluster } from '../data_source_selector/data_source_selector';
 import { SavedObject } from '../../../../../core/public';
 import { DataSourceAttributes } from '../../types';
 import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';
+import '../button_title.scss';
 
 interface DataSourceSelectableProps {
   savedObjectsClient: SavedObjectsClientContract;
@@ -227,7 +228,7 @@ export class DataSourceSelectable extends React.Component<
     const button = (
       <>
         <EuiButtonEmpty
-          className="euiHeaderLink"
+          className={`euiHeaderLink dataSourceComponentButtonTitle`}
           onClick={this.onClick.bind(this)}
           data-test-subj="dataSourceSelectableContextMenuHeaderLink"
           aria-label={i18n.translate('dataSourceSelectable.dataSourceOptionsButtonAriaLabel', {