Type to generate UI components from text

OR

Browse thousands of MUI, Tailwind, React components that are fully customizable and responsive.

Explore Components

How to Create Stunning Buttons with Material UI Button

In the modern world of software development, buttons are one of the most common UI (User Interface) design elements, offering many customization options in terms of shape and call-to-action (CTA). They are found across all applications and websites, serving as the primary means for users to initiate various actions through a single click.

Material UI (MUI) is a versatile React library offering a ton of component infrastructures for building responsive web designs. One of its essential components is the Button.

Buttons in MUI enable users to execute actions and make decisions with just a single click. Buttons communicate actions that users can take. We typically place MUI buttons throughout the UI, in places like

  • Dialogs

  • Modal windows

  • Forms

  • Cards

  • Toolbars

In this article, we will cover the following steps:

  • We will learn what Material UI is,

  • Why it has become so popular among the developer ecosystem today,

  • We will delve deep into the Material UI Button component,

  • We will explore button variants, and customization, and demonstrate how to seamlessly integrate it into your React application.

What is Material UI?

MUI is a front-end library that you use for building React applications. It provides you with pre-built robust, customizable, and accessible React components that you can use to build your design system and develop your web applications faster.

Material UI logo

MUI was started in 2014 by Hai Nguyen and since then, it has experienced significant growth, boasting 89k+ stars on GitHub, 1.5M+ weekly downloads, with a small bundle size of 93.7kB (Minified + Gzipped).

The chart below ⬇ from NPM trends shows a comparison of the number of downloads of Material UI over the last year.

NPM trends of MUI

If you use MUI for your project, consider using Purecode.ai to access over 10000+ AI-generated ready-made templates and components to speed up your development process.

Purecode logo

What is a Material UI Button?

Material UI offers many component categories such as Layout, Navigation, Input, and Data Display. The Button component falls under the Input category and found throughout your UI. Buttons communicate actions that users with a single tap (click event).

Implementing Material UI Button Component

Now you understand what Material UI library is, its significance, and why it is a preferred choice for most developers. Let’s learn how to install React and the MUI library.

Prerequisite

Before creating MUI tabs, you need to have the following:

  • NPM machine installation.

  • Basic knowledge of JavaScript and React.

If you need help starting with React, check out the video tutorial below.

Setting up a React App

In your terminal, enter the following command to create a new React application:

npx create-react-app my-app && cd my-app

Once your app is set up, run the application by entering either of these commands in your terminal:

yarn start

Or using npm:

npm start

Your server should launch in your browser at http://localhost:3000/, as shown below:

React app

How to Install Material UI

To get set up with MUI we can install it as an NPM package or use Yarn.

npm install @material-ui/core

or

yarn add @material-ui/core

Once you successfully install the MUI library, you are all set to start using the Material UI components in your React application.

Importing Material-UI Button Component

The first step is to import the Button component. You can do this as follows:

import { Button } from "@material-ui/core";

This component will be essential for creating buttons in your application.

A Simple Example of Button

// index.js

import React from "react";
import ReactDOM from "react-dom";
import Stack from "@mui/material/Stack";
import Button from "@mui/material/Button";
import { Box } from "@material-ui/core";
import "./styles.css";

function App() {
  return (
    <Box mt={7} ml={6}>
      <Stack spacing={2} direction="row">
        <Button variant="contained">Click Me</Button>
	{/* Contained buttons */}
      </Stack>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

This would render a simple button like in the image below ⬇

Button example

In the next heading, we will examine the different MUI button variants.

What are Material UI Button Variants?

The Material UI Button component is a crucial element in the Input category and is designed with three distinct variants to cater to a diverse range of user interactions and interface requirements.

Let’s understand the three main button variants in Material UI: Text, Contained, and Outlined. Each variant has its characteristics and use cases, which we will discuss in detail:

  • Text Button: This is the default variant, designed for simplicity and minimalism. It is typically used for less critical actions in the application.

  • Contained Button: This variant is characterized by its filled background, providing a higher visual prominence. It is generally used for primary actions that require immediate user attention and high-emphasis buttons.

  • Outlined Button: This variant features a border with a transparent background, offering a balanced emphasis. Outlined buttons are also a lower-emphasis alternative to contained buttons or a higher-emphasis alternative to text buttons. It is typically used for secondary actions in the application or less pronounced actions.

The code snippet to demonstrate this is:

import Button from '@mui/material/Button';
import Stack from "@mui/material/Stack";

<Stack spacing={2} direction="row">
  <Button color="primary" variant="text">TEXT</Button>
  <Button color="primary" variant="contained">CONTAINED</Button>
	{/* Contained buttons */}
  <Button color="primary" variant="outlined">OUTLINED</Button>
	{/* Outlined buttons */}
</Stack>
MUI button variants

Next, we will discuss how to customize these buttons.

How to Customize MUI Button Colors

Material UI provides built-in customization options for styling buttons. You can easily change button colors and text sizes with minimal code.

For instance, to change the color of a button, you can simply pass the desired color to the color prop:

The MUI button comes with 5 different color options to choose from. These are:

  • Primary

  • Secondary

  • Warning

  • Success

  • Error

1. Primary:

This color is typically used for the most important actions in the application. It is bold and stands out, drawing the user’s attention.The code example below ⬇ demonstrates this:

import Button from '@mui/material/Button';
import Stack from "@mui/material/Stack";

<Stack spacing={2} direction="row">
  <Button color="primary" variant="text">Text Primary</Button>
  <Button color="primary" variant="contained">Contained Primary</Button>
	{/* Contained buttons */}
  <Button color="primary" variant="outlined">Outlined Primary</Button>
	{/* Outlined buttons */}
</Stack>

Customize button - Primary

2. Secondary:

This color is used for secondary actions or to provide contrast with primary actions. It is less prominent than the primary color.

The code example below ⬇ demonstrates this:

import Button from '@mui/material/Button';

<>
  <Button color="secondary" variant="text">Text Secondary</Button>
  <Button color="secondary" variant="contained">Contained Secondary</Button>
	{/* Contained buttons */}
  <Button color="secondary" variant="outlined">Outlined Secondary</Button>
	{/* Outlined buttons */}
<>

Customize button - Secondary

3. Warning:

This color is used to indicate potentially harmful actions or important warnings. It is typically bright and noticeable.The code example below ⬇ demonstrates this:

import Button from '@mui/material/Button';

<>
  <Button color="warning" variant="text">Text Warning</Button>
  <Button color="warning" variant="contained">Contained Warning</Button>
	{/* Contained buttons */}
  <Button color="warning" variant="outlined">Outlined Warning</Button>
	{/* Outlined buttons */}
<>

Customize button - Warning

4. Success:

This color is used to indicate the successful completion of a task or operation. It is usually a soothing, positive color. The code example below ⬇ demonstrates this:

import Button from '@mui/material/Button';

<>
  <Button color="success" variant="text">Text Success</Button>
  <Button color="success" variant="contained">Contained Success</Button>
	{/* Contained buttons */}
  <Button color="success" variant="outlined">Outlined Success</Button>
	{/* Outlined buttons */}
<>

Customize button - Success

5. Error:

This color is used to indicate errors or failed operations. It is typically a strong, noticeable color that draws immediate attention.

The code example below ⬇ demonstrates this:

import Button from '@mui/material/Button';

<>
  <Button color="error" variant="text">Text Error</Button>
  <Button color="error" variant="contained">Contained Error</Button>
	{/* Contained buttons */}
  <Button color="error" variant="outlined">Outlined Error</Button>
	{/* Outlined buttons */}
<>

Customize button - Error

In the next heading, we will learn how to customize the button size.

How to Customize MUI Button Size

To modify the dimensions of a button in MUI, utilize the size property. This property accepts three possible values: small, medium, and large.

1. Small Button:

This refers to a button with a reduced size, ideal for interfaces where space is limited or when the button action is not the primary action. The code example below ⬇ demonstrates this:

import Button from '@mui/material/Button';

<>
  <Button size="small" color="primary" variant="text">
      Text Small
    </Button>
    <Button size="small" color="primary" variant="contained">
      Contained Small
	{/* Contained buttons */}
    </Button>
    <Button size="small" color="primary" variant="outlined">
      Outlined Small
	{/* Outlined buttons */}
  </Button>
<>

Customize button - Small button

2. Medium Button:

This is the default button size and is used in most scenarios. It provides a balance between visibility and space usage. The code example below ⬇ demonstrates this:

import Button from '@mui/material/Button';

<>
  <Button size="medium" color="primary" variant="text">
      Text Medium
    </Button>
    <Button size="medium" color="primary" variant="contained">
      contained Medium
	{/* Contained buttons */}
    </Button>
    <Button size="medium" color="primary" variant="outlined">
      Outlined Medium
	{/* Outlined buttons */}
  </Button>
<>

Customize button - Medium button

3. Large Button:

This size is used for primary actions or to draw attention to the button. It has increased visibility due to its larger size. The code example below ⬇ demonstrates this:

import Button from '@mui/material/Button';

<>
  <Button size="large" color="primary" variant="text">
      Text Large
    </Button>
    <Button size="large" color="primary" variant="contained">
      contained Large
    </Button>
    <Button size="large" color="primary" variant="outlined">
      Outlined Large
  </Button>
</>

Customize button - Large button

In addition to these, the Material UI Button supports a variety of other props for further customization and extending button features.

You can also override button styles and add custom styles using the sx prop.

import React from "react";
import ReactDOM from "react-dom";
import Button from "@mui/material/Button";
import { Box } from "@material-ui/core";
import "./styles.css";

function App() {
  return (
    <Box mt={7} ml={6}>
        <Button
          variant="contained"
          sx={{
            color: "#fff",
            backgroundColor: "#9966ff",
            fontWeight: "700"
          }}
        >
          Custom button
        </Button>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
Custom button with SX

How to Create a Reusable Button Component

In this section, we will take a look at how to create a reusable button component in React using MUI. This allows you to define a button style once and then use it throughout your application. Here’s a simple example:

const CustomButton = ({ variant, color, children }) => (
  <Button variant={variant} color={color}>
    {children}
  </Button>
);

export default CustomButton;
// usage

import CustomButton from ../components/CustomButton';

<CustomButton variant="outlined" color="primary">
  My Custom Button
{/* Outlined button component */}
</CustomButton>
My Custom Button

How to Create IconButton with MUI

An IconButton is a specific type of button that utilizes MUI Icon to denote a specific action. These types of buttons are commonly utilized in application bars and toolbars.

They are also suitable for toggle buttons that allow your user to select or deselect a single option, such as adding or removing a star from an item.

Each Material icon button also has a “theme“: Filled (default), Outlined, Rounded, Two-tone, and Sharp. To import the icon component with a theme other than the default, append the theme name to the icon name. For example @mui/icons-material/Delete icon with:

  • Filled theme (default) is exported as @mui/icons-material/Delete,

  • Outlined theme is exported as @mui/icons-material/DeleteOutlined,

  • Rounded theme is exported as @mui/icons-material/DeleteRounded,

  • Twotone theme is exported as @mui/icons-material/DeleteTwoTone,

  • Sharp theme is exported as @mui/icons-material/DeleteSharp.

Material UI Buttons

Installation of MUI icon

Run one of the following commands to install the Material SVG icon and save it to your package.json dependencies:

npm install @mui/icons-material

Upon successful installation, you need to import the icon with either of the two options like so:

import Icon from '@mui/material/Icon';
// or
import { Icon } from '@mui/material';

Then import the icon you wish to use like so:

📝 Note: The first option is preferable and recommended. Learn more from the MUI documentation.

You can include icons alongside tab labels using the icon prop or you can also use icons without labels if needed.

To incorporate an icon button into your React application, you need to import and utilize the IconButton component. Subsequently, you can select any icon from the Material UI icon library that fits your needs into your icon button component.

The code example below ⬇ demonstrates this:

import React from "react";
import ReactDOM from "react-dom";
import { Box } from "@material-ui/core";
import "./styles.css";
import IconButton from "@mui/material/IconButton";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import AlternateEmailOutlinedIcon from "@mui/icons-material/AlternateEmailOutlined";

function IconButtonDemo() {
  return (
    <Box mt={7} ml={6}>
        <IconButton aria-label="info">
          <InfoOutlinedIcon />
        </IconButton>
        <IconButton color="secondary" aria-label="home">
          <HomeOutlinedIcon />
        </IconButton>
        <IconButton color="primary" aria-label="email">
          <AlternateEmailOutlinedIcon />
        </IconButton>
    </Box>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<IconButtonDemo/>, rootElement);

IconButton examples

Using StartIcon and EndIcon Props to Add Custom Icons to Buttons

Icons are often more recognizable than plain text, making them a valuable tool for enhancing user experience in software applications. In certain scenarios, you might want to add icons to buttons to make them more intuitive. With Material UI, you can easily achieve this by assigning an icon component to the startIcon or endIcon props of a button. This will align the icon to the left or right of the button’s label, respectively.

Here’s a simple illustration:

import * as React from 'react';
import { Box } from "@material-ui/core";
import Button from "@mui/material/Button";
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
import HomeOutlinedIcon from "@mui/icons-material/HomeOutlined";
import AlternateEmailOutlinedIcon from "@mui/icons-material/AlternateEmailOutlined";

const IconLabelButtons = () => {
  return (
    <Box mt={7} ml={6}>
        <Button variant="contained" endIcon={<HomeOutlinedIcon />}>
          Home
        </Button>
        <Button variant="contained" startIcon={<InfoOutlinedIcon />}>
          About
        </Button>
         <Button variant="contained" startIcon={<AlternateEmailOutlinedIcon />}>
          Contact
        </Button>
    </Box>
  );
}
export default IconLabelButtons

Using StartIcon and EndIcon Props

There are instances where incorporating icons into buttons can significantly improve the user interface of an application. This is because icons are more recognizable and easier to understand than plain text. For instance, a delete button could be more intuitive if it’s labeled with a trash bin icon.

How to Create Loading Buttons with MUI

Loading buttons are a unique type of button that visually communicates the loading status of a particular action within your React applications, while also preventing any further user interactions. To leverage the LoadingButton component, you first need to install the Material UI lab dependency. This can be achieved by executing the following command:

npm i @mui/lab

Once the Material UI lab dependency is successfully installed, you can import the LoadingButton component and utilize it as per your application’s requirements. The LoadingButton component can be customized to suit your needs.

For instance, you can add a loading prop to indicate that the button is currently in a loading state within your application’s user interface. Additionally, you can also specify a loadingIndicator prop.

The following is a straightforward example demonstrating how to incorporate the LoadingButton component into your React application:

import * as React from 'react';
import LoadingButton from '@mui/lab/LoadingButton';
import SaveIcon from '@mui/icons-material/Save';
import Stack from '@mui/material/Stack';

const LoadingButtons = () => {
  return (
    <Stack direction="row" spacing={2}>
      <LoadingButton loading variant="outlined">
        Submit
      </LoadingButton>
      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
        Fetch data
      </LoadingButton>
      <LoadingButton
        loading
        loadingPosition="start"
        startIcon={<SaveIcon />}
        variant="outlined"
      >
        Save
      </LoadingButton>
    </Stack>
  );
}

export default LoadingButtons;
LoadingButtons

Next Steps

In this tutorial, you’ve learned how to enhance the user interface of your React applications using Material UI. You learned that buttons communicate actions that users can take and can be placed throughout your UI, in places like dialogs, modals, windows, forms, cards, and even toolbars.

You’ve discovered how to create, and customize buttons, including the addition and alignment of icons to the left or right of the button label using the startIcon and endIcon props. This knowledge will enable you to create more intuitive and visually appealing interfaces for your users.

Start practicing and happy coding 💻

We are launching our collection of 10,000+ AI-generated custom components for you to choose from for your next web project. Sign up now at Purecode.ai for you to be notified once we launch.

Quality Articles From Our Blog

If you enjoyed reading this tutorial, consider similar readings from our blog:

Emmanuel Uchenna

Emmanuel Uchenna

Emmanuel is an experienced and enthusiastic software developer and technical writer with 4+ proven years of professional experience. He focuses on full-stack web development. He is fluent in React, TypeScript, VueJS, and NodeJS and familiar with industry-standard technologies such as version control, headless CMS, and JAMstack. He is passionate about knowledge sharing.