diff --git a/packages/components/src/DownloadButton/DownloadButton.test.js b/packages/components/src/DownloadButton/DownloadButton.test.js
index 3fc4beaf8..c7d7cd4da 100644
--- a/packages/components/src/DownloadButton/DownloadButton.test.js
+++ b/packages/components/src/DownloadButton/DownloadButton.test.js
@@ -74,5 +74,15 @@ describe('DownloadButton component', () => {
});
expect(onSelect.mock.calls.length).toBe(0);
});
+
+ it('should allow customising the dropdown text', async () => {
+ const itemText = 'Export all items to CSV';
+ render();
+ await act(async () => {
+ userEvent.click(screen.getByRole('button', { name: 'Export' }));
+ });
+
+ expect(await screen.findByText(itemText)).toBeInTheDocument();
+ });
});
});
diff --git a/packages/components/src/DownloadButton/DownloadButton.tsx b/packages/components/src/DownloadButton/DownloadButton.tsx
index 40e66abc8..c59b04f2a 100644
--- a/packages/components/src/DownloadButton/DownloadButton.tsx
+++ b/packages/components/src/DownloadButton/DownloadButton.tsx
@@ -26,6 +26,10 @@ export interface DownloadButtonProps extends Omit = ({
onSelect = () => undefined,
isDisabled,
tooltipText = 'Export data',
+ itemTexts = {
+ csv: undefined,
+ json: undefined,
+ },
...props
}) => {
const [isOpen, setIsOpen] = useState(false);
@@ -69,19 +77,19 @@ const DownloadButton: React.FunctionComponent = ({
component="button"
onClick={(event) => onSelect(event, 'csv')}
isDisabled={isDisabled}
- aria-label="Export to CSV"
+ aria-label={itemTexts.csv || 'Export to CSV'}
>
- Export to CSV
+ {itemTexts.csv || 'Export to CSV'}
onSelect(event, 'json')}
isDisabled={isDisabled}
>
- Export to JSON
+ {itemTexts.json || 'Export to JSON'}
{extraItems}