diff --git a/public/app/features/alerting/unified/components/MetaText.tsx b/public/app/features/alerting/unified/components/MetaText.tsx
index 7de90ce772f..54c06a96699 100644
--- a/public/app/features/alerting/unified/components/MetaText.tsx
+++ b/public/app/features/alerting/unified/components/MetaText.tsx
@@ -1,5 +1,5 @@
 import { css, cx } from '@emotion/css';
-import { ComponentProps, HTMLAttributes } from 'react';
+import { ComponentProps, HTMLAttributes, forwardRef } from 'react';
 
 import { Icon, IconName, Stack, Text, useStyles2 } from '@grafana/ui';
 
@@ -9,31 +9,36 @@ interface Props extends HTMLAttributes<HTMLDivElement> {
   color?: ComponentProps<typeof Text>['color'];
 }
 
-const MetaText = ({ children, icon, color = 'secondary', direction = 'row', ...rest }: Props) => {
-  const styles = useStyles2(getStyles);
-  const interactive = typeof rest.onClick === 'function';
+const MetaText = forwardRef<HTMLDivElement, Props>(
+  ({ children, icon, color = 'secondary', direction = 'row', ...rest }, ref) => {
+    const styles = useStyles2(getStyles);
+    const interactive = typeof rest.onClick === 'function';
 
-  const rowDirection = direction === 'row';
-  const alignItems = rowDirection ? 'center' : 'flex-start';
-  const gap = rowDirection ? 0.5 : 0;
+    const rowDirection = direction === 'row';
+    const alignItems = rowDirection ? 'center' : 'flex-start';
+    const gap = rowDirection ? 0.5 : 0;
 
-  return (
-    <div
-      className={cx({
-        [styles.interactive]: interactive,
-      })}
-      // allow passing ARIA and data- attributes
-      {...rest}
-    >
-      <Text variant="bodySmall" color={color}>
-        <Stack direction={direction} alignItems={alignItems} gap={gap} wrap={'wrap'}>
-          {icon && <Icon size="xs" name={icon} />}
-          {children}
-        </Stack>
-      </Text>
-    </div>
-  );
-};
+    return (
+      <div
+        ref={ref}
+        className={cx({
+          [styles.interactive]: interactive,
+        })}
+        // allow passing ARIA and data- attributes
+        {...rest}
+      >
+        <Text variant="bodySmall" color={color}>
+          <Stack direction={direction} alignItems={alignItems} gap={gap} wrap={'wrap'}>
+            {icon && <Icon size="xs" name={icon} />}
+            {children}
+          </Stack>
+        </Text>
+      </div>
+    );
+  }
+);
+
+MetaText.displayName = 'MetaText';
 
 const getStyles = () => ({
   interactive: css({