How to use Material UI buttons

Material UI is an open-source library of styled React UI components. It helps in building attractive user interfaces using predefined reusable components. In this Answer, we'll get a hang of integrating and using Material UI buttons in the React application.

Note: Before getting started, please install Material UI in your React application.

Material UI buttons

Material UI provides us with a variety of buttons. The button types are:

import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import React from 'react';


export default class App extends React.Component {
  render() {
    return (
      <Stack direction="row" spacing={1} justifyContent="center" alignItems="center">
        <Button variant = "contained" > Default Contained </Button >
        <Button variant = "contained" disabled >
          Disabled Button
        </Button>
        <Button variant="contained" href="#">
          Add Link
        </Button>
        <Button variant = "contained" disableElevation>
          Disabled Elevation
        </Button>
        <Button variant = "contained" onClick={()=>{alert("Yay! You now know how to add onClick event on the button")}}>
          Click Me
        </Button>
      </ Stack>
    );
  }
}

Code for creating a Material UI contained button

Code explanation

Line 2: To use the Button, we import the Button component from @mui/material/Button.
Line 10: We define the Button component and set the variant attribute to contained. The variant attribute is responsible for setting the type of button.
Line 11: We use the disabled attribute to disable the button.
Line 14: We attach a link to the button using the href attribute.
Line 17: We make the button flat by removing elevation using the disableElevation attribute.
Lines 20–22: We create the button with the Click me text. We use the onClick function to execute an action once the button is clicked. When the button is clicked, a pop-up message is generated.

Note: The button text is written in between the starting <Button> and closing </Button> tags.

Outlined button

As the name of the button tells, the outlined button contains a transparent background color and an outline. It is used when the button is important but not a primary action of the application.

For example, in a form, we can make the "clear form" button an outlined button as its importance is relatively less than the "submit" button. In the following code, we will see how to create outlined buttons using Material UI.

import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import React from 'react';


export default class App extends React.Component {
  render() {
    return (
      <Stack direction="row" spacing={3} justifyContent="center" alignItems="center">
        <Button variant = "outlined" onClick={()=>{alert("Yay! You now know how to add onClick event on the button")}}> Click Me </Button >
        <Button variant = "outlined" disabled >
          Disabled Button
        </Button>
        <Button variant="outlined" href="#">
          Add Link
        </Button>
      </ Stack>
    );
  }
}

Code for creating Material UI outlined button

Code explanation

Line 10: We set the variant to be outlined which creates an outlined button. To make the button interactable, we use the onClick function that executes when the button is clicked.
Lines 11–14: We use the disabled and href attributes to disable and add a link to the button, respectively.

Text button

The text button is a simple button with no outline or background color. It is used when the button's action has a small impact, or we want to make a minimal visual impact.

For example, text buttons can represent the "edit" button in a list of items because our primary focus is to show the list of item details and not the "edit" button. In the following code, we will see how we can create text buttons using Material UI.

import Stack from '@mui/material/Stack';
import Button from '@mui/material/Button';
import React from 'react';


export default class App extends React.Component {
  render() {
    return (
      <Stack direction="row" spacing={3} justifyContent="center" alignItems="center">
        <Button variant = "text" onClick={()=>{alert("Yay! You now know how to add onClick event on the button")}}> Click Me </Button >
        <Button variant = "text" disabled >
          Disabled Button
        </Button>
        <Button variant="text" href="#">
          Add Link
        </Button>
      </ Stack>
    );
  }
}

Code for creating a Material UI text button

Code explanation

Line 10: We create the text button by setting the variant attribute to text.

Note: By default, the Material UI button is a text button therefore, we can create a text button without explicitly setting the variant attribute.

Lines 11 and 14: We use the disabled and href attributes to disable and add a link to the button, respectively.

Icon button

An icon button is used when we want to create a button without any text. It helps in creating a button that helps a user visually understand the meaning of the button.

For example, if we want to make a button that deletes an item from the list, we can create an icon button with a DeleteIcon. In the following code, we will see how to create icon buttons using Material UI.

Code explanation

Line 1: We import IconButton from @mui/material/IconButton.
Line 2: We import DeleteIcon from @mui/icons-material/Delete.
Line 11: We define the IconButton component with the color attribute set to error. The color attribute helps in setting the color of the icon defined in the IconButton.
Line 12: We define the DeleteIcon in the IconButton.

Note: We can change size of the buttons using the size attribute set to small or large.

Let's test our knowledge of Material UI buttons with a short quiz.

How to use Material UI buttons

Material UI buttons

Contained button

Code explanation

Outlined button

Code explanation

Text button

Code explanation

Icon button

Code explanation