From 4372350daa72fffa386f27efbea552318f79475e Mon Sep 17 00:00:00 2001
From: Alexander Zobnin <alexanderzobnin@gmail.com>
Date: Tue, 10 Dec 2019 12:24:33 +0300
Subject: [PATCH] UI: add link button variant

---
 .../grafana-ui/src/components/Button/Button.story.tsx     | 2 +-
 packages/grafana-ui/src/components/Button/styles.ts       | 8 ++++++++
 packages/grafana-ui/src/components/Button/types.ts        | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx
index b73a6419aec..3d85e0b9094 100644
--- a/packages/grafana-ui/src/components/Button/Button.story.tsx
+++ b/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,
diff --git a/packages/grafana-ui/src/components/Button/styles.ts b/packages/grafana-ui/src/components/Button/styles.ts
index bc949513fa2..6b91bfd0b36 100644
--- a/packages/grafana-ui/src/components/Button/styles.ts
+++ b/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 {
diff --git a/packages/grafana-ui/src/components/Button/types.ts b/packages/grafana-ui/src/components/Button/types.ts
index c56a9b0f5cb..a163a06e8ee 100644
--- a/packages/grafana-ui/src/components/Button/types.ts
+++ b/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';