diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
new file mode 100644
index 00000000000..35d720e70cf
--- /dev/null
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.test.tsx
@@ -0,0 +1,18 @@
+import { render, screen } from '@testing-library/react';
+import React from 'react';
+
+import EmptyListCTA from './EmptyListCTA';
+
+describe('EmptyListCTA', () => {
+ it('should return a button element if there is no buttonLink prop', () => {
+ render();
+
+ expect(screen.getByRole('button', { name: 'button title' }));
+ });
+
+ it('should return an anchor element if there is a buttonLink prop', () => {
+ render();
+
+ expect(screen.getByRole('link', { name: 'button title' }));
+ });
+});
diff --git a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
index a8c7220fcee..9dd81f6c69d 100644
--- a/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
+++ b/public/app/core/components/EmptyListCTA/EmptyListCTA.tsx
@@ -1,7 +1,7 @@
-import React, { MouseEvent } from 'react';
import { css } from '@emotion/css';
-import { CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
import { selectors } from '@grafana/e2e-selectors';
+import { Button, CallToActionCard, Icon, IconName, LinkButton } from '@grafana/ui';
+import React, { MouseEvent } from 'react';
export interface Props {
title: string;
@@ -75,8 +75,9 @@ const EmptyListCTA: React.FunctionComponent = ({
`
: '';
+ const ButtonEl = buttonLink ? LinkButton : Button;
const ctaElement = (
- = ({
disabled={buttonDisabled}
>
{buttonTitle}
-
+
);
return ;