From d04e5b94bac192a48947d2e2339cee41135c383c Mon Sep 17 00:00:00 2001
From: Leodegario Pasakdal <leodegario.pasakdal@grafana.com>
Date: Wed, 30 Nov 2022 14:21:06 +0100
Subject: [PATCH] use appropriate elements when rendering bargauge

---
 .../src/components/BarGauge/BarGauge.tsx         | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
index 893b8b50521..ac80738dd0e 100644
--- a/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
+++ b/packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
@@ -83,19 +83,25 @@ export class BarGauge extends PureComponent<Props> {
     const { title } = this.props.value;
     const styles = getTitleStyles(this.props);
 
-    if (!title) {
+    if (onClick) {
       return (
-        <button style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>
+        <button
+          type="button"
+          style={styles.wrapper}
+          onClick={onClick}
+          className={cx(clearButtonStyles(theme), className)}
+        >
+          <div style={styles.title}>{title}</div>
           {this.renderBarAndValue()}
         </button>
       );
     }
 
     return (
-      <button style={styles.wrapper} onClick={onClick} className={cx(clearButtonStyles(theme), className)}>
-        <div style={styles.title}>{title}</div>
+      <div style={styles.wrapper} className={className}>
+        {title && <div style={styles.title}>{title}</div>}
         {this.renderBarAndValue()}
-      </button>
+      </div>
     );
   }