diff --git a/packages/grafana-ui/src/components/Button/Button.test.tsx b/packages/grafana-ui/src/components/Button/Button.test.tsx
index 52589d67196..b78b9aafe5d 100644
--- a/packages/grafana-ui/src/components/Button/Button.test.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.test.tsx
@@ -1,7 +1,7 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
-import { Button } from './Button';
+import { Button, LinkButton } from './Button';
const setup = (jsx: JSX.Element) => {
return {
@@ -64,3 +64,37 @@ describe('Button', () => {
expect(screen.getByRole('button', { name: 'Aria label' })).toBeInTheDocument();
});
});
+
+describe('LinkButton', () => {
+ it('should place the icon on the right when iconPlacement is "right"', () => {
+ setup(
+
+ Click me
+
+ );
+
+ const link = screen.getByRole('link');
+ const icon = screen.getByTitle('');
+ const textSpan = link.querySelector('span');
+
+ // Assert that the text span comes before the icon in the DOM
+ expect(link.childNodes[0]).toBe(textSpan);
+ expect(link.childNodes[1]).toBe(icon);
+ });
+
+ it('should place the icon on the left when iconPlacement is "left"', () => {
+ setup(
+
+ Click me
+
+ );
+
+ const link = screen.getByRole('link');
+ const icon = screen.getByTitle('');
+ const textSpan = link.querySelector('span');
+
+ // Assert that the icon comes before the text span in the DOM
+ expect(link.childNodes[0]).toBe(icon);
+ expect(link.childNodes[1]).toBe(textSpan);
+ });
+});
diff --git a/packages/grafana-ui/src/components/Button/Button.tsx b/packages/grafana-ui/src/components/Button/Button.tsx
index 9e1d1c4a1a9..d8e6e54d3fa 100644
--- a/packages/grafana-ui/src/components/Button/Button.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.tsx
@@ -142,6 +142,7 @@ export const LinkButton = React.forwardRef(
size = 'md',
fill = 'solid',
icon,
+ iconPlacement = 'left',
fullWidth,
children,
className,
@@ -174,6 +175,8 @@ export const LinkButton = React.forwardRef(
className
);
+ const iconComponent = icon && ;
+
// When using tooltip, ref is forwarded to Tooltip component instead for https://github.com/grafana/grafana/issues/65632
const button = (
(
ref={tooltip ? undefined : ref}
aria-label={ariaLabel ?? (!children && typeof tooltip === 'string' ? tooltip : undefined)}
>
-
+ {iconPlacement === 'left' && iconComponent}
{children && {children}}
+ {iconPlacement === 'right' && iconComponent}
);