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

To render a Button with a single Icon, check out our tutorial on the Material UI IconButton.