diff --git a/packages/grafana-ui/src/components/Segment/Segment.tsx b/packages/grafana-ui/src/components/Segment/Segment.tsx
index 750fdf47e7b..53cdfb834cf 100644
--- a/packages/grafana-ui/src/components/Segment/Segment.tsx
+++ b/packages/grafana-ui/src/components/Segment/Segment.tsx
@@ -3,6 +3,9 @@ import { cx } from 'emotion';
 import _ from 'lodash';
 import { SelectableValue } from '@grafana/data';
 import { SegmentSelect, useExpandableLabel, SegmentProps } from './';
+import { getSegmentStyles } from './styles';
+import { InlineLabel } from '../Forms/InlineLabel';
+import { useStyles } from '../../themes';
 
 export interface SegmentSyncProps<T> extends SegmentProps<T>, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
   value?: T | SelectableValue<T>;
@@ -18,19 +21,32 @@ export function Segment<T>({
   className,
   allowCustomValue,
   placeholder,
+  disabled,
   ...rest
 }: React.PropsWithChildren<SegmentSyncProps<T>>) {
   const [Label, width, expanded, setExpanded] = useExpandableLabel(false);
+  const styles = useStyles(getSegmentStyles);
 
   if (!expanded) {
     const label = _.isObject(value) ? value.label : value;
+
     return (
       <Label
+        disabled={disabled}
         Component={
           Component || (
-            <a className={cx('gf-form-label', 'query-part', !value && placeholder && 'query-placeholder', className)}>
+            <InlineLabel
+              className={cx(
+                styles.segment,
+                {
+                  [styles.queryPlaceholder]: placeholder !== undefined && !value,
+                  [styles.disabled]: disabled,
+                },
+                className
+              )}
+            >
               {label || placeholder}
-            </a>
+            </InlineLabel>
           )
         }
       />
diff --git a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
index f18611b2c9e..f7a840925ea 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentAsync.tsx
@@ -6,6 +6,9 @@ import { SelectableValue } from '@grafana/data';
 import { useExpandableLabel, SegmentProps } from '.';
 import { useAsyncFn } from 'react-use';
 import { AsyncState } from 'react-use/lib/useAsync';
+import { getSegmentStyles } from './styles';
+import { InlineLabel } from '../Forms/InlineLabel';
+import { useStyles } from '../../themes';
 
 export interface SegmentAsyncProps<T> extends SegmentProps<T>, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {
   value?: T | SelectableValue<T>;
@@ -20,22 +23,35 @@ export function SegmentAsync<T>({
   Component,
   className,
   allowCustomValue,
+  disabled,
   placeholder,
   ...rest
 }: React.PropsWithChildren<SegmentAsyncProps<T>>) {
   const [state, fetchOptions] = useAsyncFn(loadOptions, [loadOptions]);
   const [Label, width, expanded, setExpanded] = useExpandableLabel(false);
+  const styles = useStyles(getSegmentStyles);
 
   if (!expanded) {
     const label = _.isObject(value) ? value.label : value;
+
     return (
       <Label
         onClick={fetchOptions}
+        disabled={disabled}
         Component={
           Component || (
-            <a className={cx('gf-form-label', 'query-part', !value && placeholder && 'query-placeholder', className)}>
+            <InlineLabel
+              className={cx(
+                styles.segment,
+                {
+                  [styles.queryPlaceholder]: placeholder !== undefined && !value,
+                  [styles.disabled]: disabled,
+                },
+                className
+              )}
+            >
               {label || placeholder}
-            </a>
+            </InlineLabel>
           )
         }
       />
diff --git a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
index 18ec2017d52..2ecb6682a5b 100644
--- a/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
+++ b/packages/grafana-ui/src/components/Segment/SegmentInput.tsx
@@ -3,6 +3,9 @@ import { cx, css } from 'emotion';
 import useClickAway from 'react-use/lib/useClickAway';
 import { measureText } from '../../utils/measureText';
 import { useExpandableLabel, SegmentProps } from '.';
+import { getSegmentStyles } from './styles';
+import { InlineLabel } from '../Forms/InlineLabel';
+import { useStyles } from '../../themes';
 
 export interface SegmentInputProps<T> extends SegmentProps<T>, Omit<HTMLProps<HTMLInputElement>, 'value' | 'onChange'> {
   value: string | number;
@@ -18,6 +21,7 @@ export function SegmentInput<T>({
   Component,
   className,
   placeholder,
+  disabled,
   autofocus = false,
   ...rest
 }: React.PropsWithChildren<SegmentInputProps<T>>) {
@@ -25,6 +29,7 @@ export function SegmentInput<T>({
   const [value, setValue] = useState<number | string>(initialValue);
   const [inputWidth, setInputWidth] = useState<number>(measureText((initialValue || '').toString(), FONT_SIZE).width);
   const [Label, , expanded, setExpanded] = useExpandableLabel(autofocus);
+  const styles = useStyles(getSegmentStyles);
 
   useClickAway(ref, () => {
     setExpanded(false);
@@ -34,11 +39,21 @@ export function SegmentInput<T>({
   if (!expanded) {
     return (
       <Label
+        disabled={disabled}
         Component={
           Component || (
-            <a className={cx('gf-form-label', 'query-part', !value && placeholder && 'query-placeholder', className)}>
+            <InlineLabel
+              className={cx(
+                styles.segment,
+                {
+                  [styles.queryPlaceholder]: placeholder !== undefined && !value,
+                  [styles.disabled]: disabled,
+                },
+                className
+              )}
+            >
               {initialValue || placeholder}
-            </a>
+            </InlineLabel>
           )
         }
       />
diff --git a/packages/grafana-ui/src/components/Segment/styles.ts b/packages/grafana-ui/src/components/Segment/styles.ts
new file mode 100644
index 00000000000..22efd47abaf
--- /dev/null
+++ b/packages/grafana-ui/src/components/Segment/styles.ts
@@ -0,0 +1,21 @@
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
+
+export const getSegmentStyles = (theme: GrafanaTheme) => {
+  return {
+    segment: css`
+      cursor: pointer;
+      width: auto;
+    `,
+
+    queryPlaceholder: css`
+      color: ${theme.palette.gray2};
+    `,
+
+    disabled: css`
+      cursor: not-allowed;
+      opacity: 0.65;
+      box-shadow: none;
+    `,
+  };
+};
diff --git a/packages/grafana-ui/src/components/Segment/types.ts b/packages/grafana-ui/src/components/Segment/types.ts
index 4bb12aa568f..3f1ed1a5a7a 100644
--- a/packages/grafana-ui/src/components/Segment/types.ts
+++ b/packages/grafana-ui/src/components/Segment/types.ts
@@ -5,4 +5,5 @@ export interface SegmentProps<T> {
   className?: string;
   allowCustomValue?: boolean;
   placeholder?: string;
+  disabled?: boolean;
 }
diff --git a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
index fe3f963412e..07719b33123 100644
--- a/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
+++ b/packages/grafana-ui/src/components/Segment/useExpandableLabel.tsx
@@ -3,6 +3,7 @@ import React, { useState, useRef, ReactElement } from 'react';
 interface LabelProps {
   Component: ReactElement;
   onClick?: () => void;
+  disabled?: boolean;
 }
 
 export const useExpandableLabel = (
@@ -12,18 +13,22 @@ export const useExpandableLabel = (
   const [expanded, setExpanded] = useState<boolean>(initialExpanded);
   const [width, setWidth] = useState(0);
 
-  const Label: React.FC<LabelProps> = ({ Component, onClick }) => (
+  const Label: React.FC<LabelProps> = ({ Component, onClick, disabled }) => (
     <div
       ref={ref}
-      onClick={() => {
-        setExpanded(true);
-        if (ref && ref.current) {
-          setWidth(ref.current.clientWidth * 1.25);
-        }
-        if (onClick) {
-          onClick();
-        }
-      }}
+      onClick={
+        disabled
+          ? undefined
+          : () => {
+              setExpanded(true);
+              if (ref && ref.current) {
+                setWidth(ref.current.clientWidth * 1.25);
+              }
+              if (onClick) {
+                onClick();
+              }
+            }
+      }
     >
       {Component}
     </div>
diff --git a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
index c203bdf6a42..7dfd6b55f6e 100644
--- a/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
+++ b/public/app/plugins/datasource/cloudwatch/components/MetricsQueryEditor.test.tsx
@@ -107,9 +107,9 @@ describe('QueryEditor', () => {
         const props = setup();
         props.query.region = (null as unknown) as string;
         const wrapper = mount(<MetricsQueryEditor {...props} />);
-        expect(wrapper.find('.gf-form-inline').first().find('.gf-form-label.query-part').first().text()).toEqual(
-          'default'
-        );
+        expect(
+          wrapper.find('.gf-form-inline').first().find('Segment').find('InlineLabel').find('label').text()
+        ).toEqual('default');
       });
     });