Button not working

[sztibi82]

Hi All,

I am new into Grafana. I created a custom plugin on which I have a Button. The project compiles without issues, and the button appears on the panel, but no click event is handled

Please find below the source code
import React from ‘react’;
import { PanelProps } from ‘@grafana/data’;
import { SimpleOptions } from ‘types’;
import { css, cx } from ‘@emotion/css’;
import { Button, useStyles2, useTheme2 } from ‘@grafana/ui’;

interface Props extends PanelProps {}

const getStyles = () => {
return {
wrapper: css font-family: Open Sans; position: relative; ,
svg: css position: absolute; top: 0; left: 0; ,
textBox: css position: absolute; bottom: 0; left: 0; padding: 10px; ,
hover:css background-color: rgba(255, 0, 0, 1); ,
active:css background-color: rgba(255, 255, 0, 1); ,
};
};

export const SimplePanel: React.FC = ({ options, data, width, height }) => {
const theme = useTheme2();

const styles = useStyles2(getStyles);
return (
<div
className={cx(
styles.wrapper,
css width: ${width}px; height: ${height}px;
)}
>
<svg
className={styles.svg}
width={width}
height={height}
xmlns=“SVG namespace”
xmlnsXlink=“XLink namespace”
viewBox={-${width / 2} -${height / 2} ${width} ${height}}
>

<circle style={{ fill: theme.colors.primary.main }} r={100} />

  <div className={styles.textBox}>
    {options.showSeriesCount && <div>Number of series: {data.series.length}</div>}
    <div>Text option value: {options.text}</div>
  </div>
  <Button  onClick={()=>console.log("test")}>TestButton</Button>
</div>

);
};

I also changed in the defaults.ini the disable_sanitize_html = true but the problem didn’t get solved.

Please can you advice what to do next.