From 20a1955026457e903f0a6e20cf83747ba244963f Mon Sep 17 00:00:00 2001
From: Tom Ratcliffe <tom.ratcliffe@grafana.com>
Date: Thu, 28 Mar 2024 15:21:56 +0000
Subject: [PATCH] Reuse StateTag for Paused state

---
 .../alerting/unified/components/rules/AlertStateTag.tsx     | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
index 9c95a3a20a4..142ec8b0e1c 100644
--- a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
+++ b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { AlertState } from '@grafana/data';
-import { Tag, Tooltip } from '@grafana/ui';
+import { Icon, Tooltip } from '@grafana/ui';
 import { GrafanaAlertState, GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
 
 import { alertStateToReadable, alertStateToState } from '../../utils/rules';
@@ -17,7 +17,9 @@ export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md',
   if (isPaused) {
     return (
       <Tooltip content={'Alert evaluation is currently paused'} placement="top">
-        <Tag icon="pause" name="Paused" colorIndex={1} />
+        <StateTag state="warning" size={size} muted={muted}>
+          <Icon name="pause" size="xs" /> Paused
+        </StateTag>
       </Tooltip>
     );
   }