how do i add an onClick event over a theme icon in mantine?

[starxyn]

how do i add an onClick event handler over a theme icon in mantine?
for example, i have a code like this:
<ThemeIcon size='xs' variant='light'><IconUser></ThemeIcon>
And I want to add an onClick event handler so that when I mouse over the IconUser picture I can launch a new modal.

[rtivital]

<ThemeIcon size='xs' variant='light' onClick={() => console.log('click')}><IconUser></ThemeIcon>

[starxyn]

Thank u! How about if I need to add button Props into the theme icon like how it works by adding into ? I tried to add but it says error.

[rtivital]

https://mantine.dev/core/action-icon/

[starxyn]

? Sry dont understand

[atareversei]

It is better to use the ActionIcon component. ActionIcon
Clickable elements are better defined as buttons or links. In this case, ActionIcon renders a button which will hold your desired icon.

<ActionIcon variant="light" size="xs" onClick={() => {/*do things*/}}>
  <IconUser />
</ActionIcon>