How to use Material UI buttons

Key takeaways:
Material UI buttons offers various button types: contained, outlined, text, and icon for flexible UI design.
Variants:
Contained: Filled for primary actions.
Outlined: Transparent with an outline for secondary actions.
Text: Simple, minimal impact button.
Icon: For actions with icons, like delete.
Button sizes can be adjusted with size attribute: small, medium, and large.
Buttons support customization properties like disabled, href, color, and onClick.

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 learn how to integrate and use 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:

How to use Material UI buttons in the React project

Material UI offers a collection of pre-designed buttons that enable the creation of modern, consistent user interfaces in React applications. With customizable styles, sizes, and colors, these buttons are easy to implement and adapt to your design needs. In this Answer, we’ll explore how to use different button variants and customization options in the React project.

Material UI contained button

The contained button contains a filled background and elevation, emphasizing the button. It is primarily used at places where the button has significant importance and functionality.

For example, in a login form, we use the contained button to represent the “login” button. In the following code, we’ll see how we can create contained 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={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.

Material UI outlined button

As the name suggests, the outlined button has a transparent background 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’ll learn 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.

Material UI text button

The text button is a simple button without an 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 learn 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.

Material UI icon button

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

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 learn 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.

Material UI button sizes

We can adjust the size of the Material UI Button using the size attribute. There are three possible size options:

small: A smaller version of the button.
medium (default): The standard size.
large: A larger version of the button.

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">
        {/* Small Button */}
        <Button variant="outlined" size="small" onClick={() => { alert("You clicked the small button!") }}>
          Click Me (Small)
        </Button>

        {/* Medium Button */}
        <Button variant="outlined" size="medium" onClick={() => { alert("You clicked the medium button!") }}>
          Click Me (Medium)
        </Button>

        {/* Large Button */}
        <Button variant="outlined" size="large" onClick={() => { alert("You clicked the large button!") }}>
          Click Me (Large)
        </Button>

      </Stack>
    );
  }
}

Code for creating a Material UI icon button of different sizes

Frequently asked questions

Haven’t found what you were looking for? Contact Us

What is the minimum size for buttons in material design?

In Material Design, the minimum size for buttons is 36dp in height, with touch targets requiring a minimum height of 48dp for accessibility.

What is the difference between material UI icon button and button?

An IconButton is used for clickable icons without text, while a Button can include both text and icons, offering more flexibility for interactions.

What are the variants of button material UI?

Material UI buttons have several variants: text, outlined, and contained.

How do I add color to the mui button?

We can add color to an MUI button using the color prop, with options like primary, secondary, error, etc. Or, we can customize the button using the sx prop for more control.

What is a sx prop in Material UI?

The sx prop in Material UI is a shortcut for adding inline styles using a simplified syntax. It supports a wide range of CSS properties and responsive design features.

Free Resources

Learn in-demand tech skills in half the time

PRODUCTS

Mock Interview

New

Courses

Skill Paths

Projects

Assessments