Accepted answer

The Material-UI documentation does not list the standard React (native browser) events:

This is because it's expected that you are already aware of the available native events. For example, you can also use onWheel. It would be a long and redundant list if all the native events were included.

As kouak explains, other props (such as onClick) are passed down to a relevant child component.

Random example:

<Button color="primary" onClick={() => { console.log('onClick'); }}>


Handling clicks

All components accept an onClick handler that is applied to the root DOM element.

<Button onClick={() => { alert('clicked') }}>Click me</Button>

Note that the documentation avoids mentioning native props (there are a lot) in the API section of the components. API for Button

enter image description hereenter image description here


Just add onClick to the props you pass down into <IconButton />.

Props that are not cited in the doc are passed down into their internal <EnhancedButton /> component which will handle onClick just fine.

See here :


Remember, you can use onClick in every singe component that have a DOM renderer since it is a native React event (It doesn't have to be a button component).

Example 1:

  onClick={() => {
    alert("✔️ This works on every component!");
  Click me!

Example 2:

onClick possibilities

⬇ Play with it online ⬇

Edit onClick for every component


You can add an wrapper over the <IconButton/> to get the onClick event.


render() {
  return <div class="font-icon-wrapper" onClick={this.fontIconClick}>
    <IconButton iconClassName="muidocs-icon-custom-github" />

This should definitely work...

Related Query

More Query from same tag