MUI 5 is here, but many things are the same as Material-UI 4. Button props haven’t changed much and the look-n-feel of the Button component is as slick as ever.
Whether you are using Material-UI 4 or 5, the Button code in this demo will be the same. There is a new alignment component called Stack that you will see below, but it is not material (pun intended) to the demo.
MUI 5 API docs don’t include common React events such as onClick, on Drag, and onMouseOut. These events are available to many components. Take a look at some of the events that Button supports:
I will show examples of onClick, onDrag, and onMouseOut events in Material-UI’s Button. My examples include TypeScript. A link to a Code Sandbox with full React + TypeScript code is in the Resources section.
MUI Button onClick With Props
The onClick prop is an optional Button prop that can take a React.MouseEvent object plus any additional props that you want to pass to it (i.e. a string like I did below).
It can be difficult to remember the TypeScript typing for the event prop. If you forget, you can simply hover over the onClick prop and your IDE likely will give you the typing. This is in Code Sandbox:
If you don’t need additional props beyond the even object, you can simply pass your handler function like this: onClick={handleClick}. There’s no need to create an arrow function in the JSX because you don’t need to manually pass props to handleClick. The event object is passed automatically.
To pass additional props, you need the slightly more complex syntax seen below, where an arrow function is used to pass both e and the string "clicked". Notice that the event is specified on both the left-hand and right-hand side of the function passed to onClick. On the right-hand side, the event parameter must come first.
//handler
const handleClick = (event: React.MouseEvent<HTMLElement>, text: string) => {
console.log(event.target);
console.log(text);
};
//JSX
<Button
variant="contained"
onClick={(e) => handleClick(e, "clicked")}
>
Clickable - passes prop
</Button>The onClick handler works the same way for MUI IconButtons.
MUI Button onDrag
The onDrag event typing looks very similar to onClick. A significant difference is that it requires an HTMLAnchorElement. Accordingly, we also are required to include an href prop if we want to use the onDrag prop.
//handler
const handleDrag = (event: React.DragEvent<HTMLAnchorElement>) => {
console.log(event.currentTarget);
alert("dragged");
};
//JSX
<Button
variant="contained"
href="/required"
onDrag={handleDrag}
>
Drag Event
</Button>I was unaware of this when I first attempted to include the onDrag prop. However, one of the virtues of TypeScript is that it alerts us to errors and also gives us (verbose) instructions on how to fix the issue.
I eventually deciphered this and added an href prop.
Interestingly, the onDrag event can be used on many elements without including href. I tested it against a <p> and the event type was React.DragEvent<HTMLParagraphElement> instead of HTMLAnchorElement. I was also able to add onDrag to a Button with an event type of HTMLElement, but this did not trigger the handler function properly. I believe you need to use the HTMLAnchorElement event in order to trigger expected behavior.
MUI Button onMouseOut
The Button onMouseOut event passes an event of type React.MouseEvent<HTMLElement>. Otherwise, it is similar to many other events.
One important point: onMouseOut and onMouseLeave are identical except that onMouseOut propagates up the DOM hierarchy. You likely want event propogation.
//handler
const handleMouseOut = (event: React.MouseEvent<HTMLElement>) => {
console.log(event.target);
};
//JSX
<Button
variant="contained"
onMouseOut={handleMouseOut}
>
Mouse Leave Event
</Button>Resources
Take a look at these additional useful posts:
- Here’s the Ultimate Guide to MUI Box onClick (With TypeScript)
- Here’s how to set Button width and height.
- Here’s an MUI Button with a custom variant and every prop enabled.
- Here’s how to align buttons with the Box component.
- Here’s how to add hover styling to buttons.
- Here’s how to handle Bootstrap Button onClick with TypeScript.
