Learning Material UI Buttons

In this article we're going to discuss Material UI's Button component. We'll discuss how to research the Button through Material UI's documentation. By doing so you'll become an expert in understanding the various properties and CSS rules, which you can happily apply to any Material UI component.

First, open up the Material UI's Button Component Page and the Button API so you can follow along with our investigation.

Starting on the Button Component Page, take a quick scroll down and view the available examples.

In general the examples all use the same Button component, but explore different values for the props, and mix in other components like icons and IconButtons.

Button variants - Contained Buttons

The first example renders some "Contained" Buttons, which have a filled-in background. These Buttons are actually not the default Button variant. As you will see, each Button is rendered with the prop variant="contained". The default Button variant (by not adding this prop) is actually no background filled in, also known as the Text Button.

Button API

Rather than explain every prop these Buttons can have, let's now go over to the Button API. The first half of this page is going to list out all the props that the Button can receive. We've gone through all these props and created this CodeSandbox below which shows you what these props do. Open up the sandbox yourself to see the code.

Material UI IconButtons

Let's look at a more complicated example from the Icon Buttons section on the Button component page.

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import IconButton from '@material-ui/core/IconButton';
import DeleteIcon from '@material-ui/icons/Delete';
import AlarmIcon from '@material-ui/icons/Alarm';
import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
const useStyles = makeStyles((theme) => ({
root: {
'& > *': {
margin: theme.spacing(1),
},
},
}));
export default function IconButtons() {
const classes = useStyles();
return (
<div className={classes.root}>
<IconButton aria-label="delete">
<DeleteIcon />
</IconButton>
<IconButton aria-label="delete" disabled color="primary">
<DeleteIcon />
</IconButton>
<IconButton color="secondary" aria-label="add an alarm">
<AlarmIcon />
</IconButton>
<IconButton color="primary" aria-label="add to shopping cart">
<AddShoppingCartIcon />
</IconButton>
</div>
);
}

In this example, we're rendering a group of IconButtons. IconButton is similar to a Material UI Button except it has a circular ripple designed for a single icon element. Inside the IconButton, we render various icons. The icons themselves are imported from the @material-ui/icons/[YourIconName].

IconButton props

You can see the full list of API props here. In this example we use a few props: color="secondary" aria-label="add an alarm".

The color is a fairly standard prop that refers to the color of the icon. The available options are: 'default', 'inherit', 'primary', or 'secondary'.

🛈 React School creates templates and video courses for building beautiful apps with React. Download our free Material UI template.