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';