diff --git a/public/app/features/alerting/unified/initAlerting.tsx b/public/app/features/alerting/unified/initAlerting.tsx
index b00d24d6457..92e593e4361 100644
--- a/public/app/features/alerting/unified/initAlerting.tsx
+++ b/public/app/features/alerting/unified/initAlerting.tsx
@@ -14,15 +14,17 @@ const AlertRulesToolbarButton = React.lazy(
 
 export function initAlerting() {
   const grafanaRulesPermissions = getRulesPermissions(GRAFANA_RULES_SOURCE_NAME);
+  const alertingEnabled = config.unifiedAlertingEnabled;
 
   if (contextSrv.hasPermission(grafanaRulesPermissions.read)) {
     addCustomRightAction({
-      show: () => config.unifiedAlertingEnabled,
-      component: ({ dashboard }) => (
-        <React.Suspense fallback={null} key="alert-rules-button">
-          {dashboard && <AlertRulesToolbarButton dashboardUid={dashboard.uid} />}
-        </React.Suspense>
-      ),
+      show: () => alertingEnabled,
+      component: ({ dashboard }) =>
+        alertingEnabled ? (
+          <React.Suspense fallback={null} key="alert-rules-button">
+            {dashboard && <AlertRulesToolbarButton dashboardUid={dashboard.uid} />}
+          </React.Suspense>
+        ) : null,
       index: -2,
     });
   }