UI: add link button variant

packages/grafana-ui/src/components/Button/Button.story.tsx

@@ -15,7 +15,7 @@ const defaultProps = {
 
 const variants = {
   size: ['xs', 'sm', 'md', 'lg'],
-  variant: ['primary', 'secondary', 'danger', 'inverse', 'transparent'],
+  variant: ['primary', 'secondary', 'danger', 'inverse', 'transparent', 'link'],
 };
 const combinationOptions = {
   CombinationRenderer: ThemeableCombinationsRowRenderer,

packages/grafana-ui/src/components/Button/styles.ts

@@ -94,6 +94,14 @@ export const getButtonStyles = stylesFactory(({ theme, size, variant }: StyleDep
         background: transparent;
       `;
       break;
+
+    case 'link':
+      background = css`
+        ${buttonVariantStyles('', '', theme.colors.linkExternal, 'rgba(0, 0, 0, 0.1)', true)};
+        background: transparent;
+        text-decoration: underline;
+      `;
+      break;
   }
 
   return {

packages/grafana-ui/src/components/Button/types.ts

@@ -1,6 +1,6 @@
 import { GrafanaTheme } from '@grafana/data';
 
-export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'inverse' | 'transparent' | 'destructive';
+export type ButtonVariant = 'primary' | 'secondary' | 'danger' | 'inverse' | 'transparent' | 'destructive' | 'link';
 
 export type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';