diff --git a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
index e33609d38ab..9c95a3a20a4 100644
--- a/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
+++ b/public/app/features/alerting/unified/components/rules/AlertStateTag.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import { AlertState } from '@grafana/data';
+import { Tag, Tooltip } from '@grafana/ui';
import { GrafanaAlertState, GrafanaAlertStateWithReason, PromAlertingRuleState } from 'app/types/unified-alerting-dto';
import { alertStateToReadable, alertStateToState } from '../../utils/rules';
@@ -12,9 +13,18 @@ interface Props {
muted?: boolean;
}
-export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md', muted = false }: Props) => (
-
- {alertStateToReadable(state)} {isPaused ? ' (Paused)' : ''}
-
-));
+export const AlertStateTag = React.memo(({ state, isPaused = false, size = 'md', muted = false }: Props) => {
+ if (isPaused) {
+ return (
+
+
+
+ );
+ }
+ return (
+
+ {alertStateToReadable(state)}
+
+ );
+});
AlertStateTag.displayName = 'AlertStateTag';