diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx
index 3006dbb4ae1..8ba101449f9 100644
--- a/public/app/features/query/components/QueryEditorRow.tsx
+++ b/public/app/features/query/components/QueryEditorRow.tsx
@@ -327,22 +327,7 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
 
   renderQueryLibraryBadge = () => {
     const { queryRef } = this.props;
-
-    if (!queryRef) {
-      return null;
-    }
-
-    return (
-      <Badge
-        key="query-library-badge"
-        color="blue"
-        icon="book"
-        text={t('query-operation.query-library.from-library', 'Editing From Query Library')}
-        tooltip={t('query-operation.query-library.editing-tooltip', 'Editing query from library ({{queryRef}})', {
-          queryRef,
-        })}
-      />
-    );
+    return <QueryLibraryBadgeWrapper queryRef={queryRef} />;
   };
 
   renderExtraActions = () => {
@@ -504,6 +489,27 @@ export class QueryEditorRow<TQuery extends DataQuery> extends PureComponent<Prop
   }
 }
 
+function QueryLibraryBadgeWrapper(props: { queryRef?: string }) {
+  const { queryLibraryEnabled } = useQueryLibraryContext();
+  const { queryRef } = props;
+
+  if (!queryLibraryEnabled || !queryRef) {
+    return null;
+  }
+
+  return (
+    <Badge
+      key="query-library-badge"
+      color="blue"
+      icon="book"
+      text={t('query-operation.query-library.from-library', 'Editing From Query Library')}
+      tooltip={t('query-operation.query-library.editing-tooltip', 'Editing query from library ({{queryRef}})', {
+        queryRef,
+      })}
+    />
+  );
+}
+
 /**
  * Get a version of the PanelData limited to the query we are looking at
  */