Material UI button in React

Necati Özmen - Sep 8 '22 - - Dev Community

Introduction

Material UI is a dynamic React library because it provides numerous component infrastructures for responsive web design. One such essential component is the Button.

In this article, we will deeply explore the MUI Button component, its variants, and the different ways it can be used in a React application.

Steps we'll cover:

What is Material UI

Material UI is a React component library that is open source and based on Google's Material Design. It includes a comprehensive set of UI tools to assist developers in building and maintaining React applications, as well as effectively importing components into various parts of their projects. More developers have incorporated Material UI into their projects over the years because it makes the web design process much easier and faster.

The categories of components that Material UI can provide you include Layout components, Navigation components, Input components, and Data Display components. The Button is enlisted among the Input components.

Install the MUI library into your project as part of your package.json dependencies with the following command:

Use npm
npm install @mui/material @emotion/react @emotion/styled

Use yarn
npm install @mui/material @emotion/react @emotion/styled

Getting Started with the MUI Button component

The Material UI Button component provides developers with the tools that are needed to allow users perform actions and make decisions with a single tap/click. Buttons represent actions that users can take.
They are typically placed throughout your user interface in forms, navigation bars, cards, modal popups e.t.c.

The Material UI Button component typically comes in three variants:

  • Text Button(The default variant)
  • Contained Button
  • Outlined Button

Here’s an illustration of how you can apply these MUI Button variants in your React application:

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

const BasicButtons = () => {
  return (
    <div>
        <Stack spacing={2} direction="row">
            <Button variant="text">Text</Button>
            <Button variant="contained">Contained</Button>
            <Button variant="outlined">Outlined</Button>
        </Stack>
    </div>
  );
}

export default BasicButtons;
Enter fullscreen mode Exit fullscreen mode

Here’s what they look like:

Image button1

MUI Button Colors

You can use the color prop to apply a colour to Material UI buttons from the theme palette.

<Button color="secondary">Secondary color theme</Button>
<Button variant="contained" color="success">
    Success color theme
</Button>
<Button variant="outlined" color="error">
    Error color theme
</Button>
Enter fullscreen mode Exit fullscreen mode

MUI Button Sizes

You can customise the size of Material UI buttons with the size prop:

import * as React from 'react';
import Box from '@mui/material/Box';
import Button from '@mui/material/Button';

const ButtonSizes = () => {
  return (
    <Box sx={{ '& button': { m: 1 } }}>
      <div>
        <Button size="small">Small Text Button</Button>
        <Button size="medium">Medium Text Button</Button>
        <Button size="large">Large Text Button</Button>
      </div>
      <div>
        <Button variant="outlined" size="small">
          Small Outlined Button
        </Button>
        <Button variant="outlined" size="medium">
          Medium Outlined Button
        </Button>
        <Button variant="outlined" size="large">
          Large Outlined Button
        </Button>
      </div>
      <div>
        <Button variant="contained" size="small">
          Small Contained Button
        </Button>
        <Button variant="contained" size="medium">
          Medium Contained Button
        </Button>
        <Button variant="contained" size="large">
          Large Contained Button
        </Button>
      </div>
    </Box>
  );
}

export default ButtonSizes
Enter fullscreen mode Exit fullscreen mode

Here’s the result:

button size


github support banner

How to use Material UI Button Component in your React project

Text Button

Text buttons are typically used for less visible actions, such as those found in dialogs and cards. Text buttons in cards help to keep the focus on the card content.

Here’s a simple illustration of the MUI Text Button

<Button>Primary</Button>
<Button disabled>Disabled Text</Button>
<Button href="#text-buttons">Link Button</Button>
Enter fullscreen mode Exit fullscreen mode

Image test

This is the default state for the Material UI Button component so you do not necessarily have to define this particular variant prop when calling the Button component.

Contained Button

Contained Buttons are high-emphasis buttons that can be identified by their elevation and fill. They indicate the primary actions of your apps. To use a contained button, you need to set the variant contained when calling the MUI Button component.

Here’s an example:

<Button variant="contained">Contained Button</Button>
<Button variant="contained" disabled>
    Disabled Contained Button
</Button>
<Button variant="contained" href="#contained-buttons">
    Link Contained Button
</Button>
Enter fullscreen mode Exit fullscreen mode

Image contained

Outlined Button

Outlined buttons are medium-emphasis buttons that contain actions that are crucial but not the primary action in your app. Additionally, outlined buttons can be used as a higher emphasis alternative to text buttons or a lower emphasis alternative to contained buttons.

You can use Outlined MUI button by specifying the outlined prop when calling the Button component.

<Button variant="outlined">Primary Outlined Button</Button>
<Button variant="outlined" disabled>
    Disabled Outlined Button
</Button>
<Button variant="outlined" href="#outlined-buttons">
    Link Outlined Button
</Button>
Enter fullscreen mode Exit fullscreen mode

Image test2

IconButton

An Icon button is a button represented by an icon set to perform a particular action. Icon buttons are typically found in app bars and toolbars. Icons are also appropriate for toggle buttons that allow for the selection or deselection of a single option, such as adding or removing a star from an item.

To include an icon button in your React app, import and use the IconButton component. Then you can use whatever icon you want from Material UI.

Here’s a simple illustration:

import * as React from 'react';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import CameraIcon from '@mui/icons-material/Camera';
import DeleteIcon from '@mui/icons-material/Delete';
import CancelIcon from '@mui/icons-material/Cancel';
import AttachEmailIcon from '@mui/icons-material/AttachEmail';

const IconButtons = () => {
  return (
    <Stack direction="row" spacing={1}>
      <IconButton aria-label="camera">
        <CameraIcon />
      </IconButton>
      <IconButton aria-label="delete" disabled color="primary">
        <DeleteIcon />
      </IconButton>
      <IconButton color="secondary" aria-label="cancel">
        <CancelIcon />
      </IconButton>
      <IconButton color="primary" aria-label="attach email">
        <AttachEmailIcon />
      </IconButton>
    </Stack>
  );
}

export default IconButtons
Enter fullscreen mode Exit fullscreen mode

Here’s the result:

Icon description

Loading Button

Loading buttons are buttons that can display the loading status of actions in your React apps and disable interactions. To use the LoadingButton component, you have to first install the Material UI lab dependency with the following command:

npm i @mui/lab
Enter fullscreen mode Exit fullscreen mode

Now, you can import the LoadingButton component from the Material UI lab dependency and use it in whatever manner you please. You can customize your LoadingButton components by adding a loading prop which shows that the button is loading in your app’s UI. You can also set a loadingIndicator prop as well.

Here’s a simple illustration of how to use the LoadingButton component in your React app:

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;
Enter fullscreen mode Exit fullscreen mode

Here’s the result:

Image loading

Icon and Label Buttons

Since we are more likely to recognize logos than plain text, you might occasionally want to add icons to certain buttons to improve the user experience of the application. When the icon component is assigned to the startIcon or endIcon props, the icon is aligned to the label's left or right.

Here’s a simple illustration:

import * as React from 'react';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
import DeleteIcon from '@mui/icons-material/Delete';
import Stack from '@mui/material/Stack';

 const IconLabelButtons = () => {
  return (
    <Stack direction="row" spacing={2}>
      <Button variant="outlined" startIcon={<AddIcon />}>
        Add
      </Button>
      <Button variant="contained" endIcon={<DeleteIcon />}>
        Remove
      </Button>
    </Stack>
  );
}
export default IconLabelButtons
Enter fullscreen mode Exit fullscreen mode

Image label

Creating a Calculator UI with light and dark mode using React MUI Button Component

Material UI Buttons can be used for a variety of purposes in your React application. You can use them to take actions, switch directories and execute specific commands in your app. We can showcase some of their uses and function in a Calculator UI with light and dark mode toggling features.

The app will have two components:
The Navbar component
The Main component

The Navbar Component

This component simply holds the light and dark mode toggler. To achieve this, we will make use of the ToggleOn and ToggleOff icon buttons.

Here’s the code for the Navbar component:

import React from "react";
import IconButton from '@mui/material/IconButton';
import ToggleOnIcon from '@mui/icons-material/ToggleOn';
import ToggleOffIcon from '@mui/icons-material/ToggleOff';

const Navbar = () => {
  return (
    <>
    <nav>
        <p>Light</p>
        <div>
          {darkMode ? (
                <IconButton >
                <ToggleOnIcon sx={{ fontSize: 50 }} onClick={handleToggle} className={darkMode ? "toggle-light" : "toggle-dark"} />
                </IconButton>
                ) : (

                <IconButton >
                <ToggleOffIcon sx={{ fontSize: 50 }} onClick={handleToggle} className={darkMode ? "toggle-light" : "toggle-dark"} />
                </IconButton>
             )}
        </div>
        <p>Dark</p>
    </nav>
    </>
  )
}

export default Navbar
Enter fullscreen mode Exit fullscreen mode

The code above showcases the use of Material UI toggle buttons to create an adequate light and dark mode toggle theme.

Here’s the result:

navbar gif

The Main Component

This component houses the Calculator’s grid system with all its buttons imported from Material UI.

Here’s the code:

import React from "react";
import Button from "@mui/material/Button";

const Main = () => {
 const buttonTexts = ['DEL', '÷', 1, 2, 3, '*', 4, 5, 6, '+', 7, 8, 9, '-', '.', 0,];

    return (
        <main>
            <div class="calculator-grid">
                <div class="output">
                    <div data-previous-operand class="previous-operand"></div>
                    <div data-current-operand class="current-operand"></div>
                </div>
                <Button class="span-two" variant="contained">
                    AC
                </Button>
                {buttonTexts.map((buttonText) => (
                    <Button variant="contained">{buttonText}</Button>
                ))}
                <Button variant="contained" class="span-two">
                    =
                </Button>
            </div>
        </main>
    );
};

export default Main;
Enter fullscreen mode Exit fullscreen mode

Here’s the result:

Image component

You can toggle light and dark mode in the App.js like this:

import './App.css';
import React, { useState } from "react";
import Navbar from './Components/Navbar';
import Main from './Components/Main';

function App() {
  const [darkMode, setDarkMode] = useState("false");

  const handleToggle = () => {
    setDarkMode(prevDarkMode => !prevDarkMode);

}

  return (
    <div className={darkMode ? "dark": "App"}>
      <Navbar handleToggle={handleToggle} darkMode={darkMode} />
      <Main />
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Here’s what our final app looks like:

final description

Conclusion

This article covered Material UI Buttons and their applications in different areas of a React application. We also explored a possible use case in a calculator user interface with light and dark mode themes. You can access the source code on my GitHub Repo.
You can also see the deployed application here.

Writer: Doro Onome


discord banner

Build your React-based CRUD applications without constraints

Modern CRUD applications are required to consume data from many different sources from custom API’s to backend services like Supabase, Hasura, Airtable and Strapi.

Check out refine, if you are interested in a backend agnostic, headless framework which can connect 15+ data sources thanks to built-in providers and community plugins.


refine blog logo

refine is an open-source React-based framework for building CRUD applications without constraints.
It can speed up your development time up to 3X without compromising freedom on styling, customization and project workflow.

refine is headless by design and it connects 30+ backend services out-of-the-box including custom REST and GraphQL API’s.

Visit refine GitHub repository for more information, demos, tutorials, and example projects.

Image
management waktu dalam perjudian slots online
Image
Fundamentals of ML, DL, and GEN AI

machinelearning, deeplearning, genai, aws
Image
Bring Your Favorite Linux Commands to Windows Command Prompt in Minutes!
Image
Why Set.has() is Faster Than Array.includes() for Finding Items

javascript, react, nextjs
Image
beberapa teknik deposit pada website slots online
Image
tipe permainan slots online sports terhebat di dunia
Image
4. Median of Two Sorted Arrays

javascript, dsa
Image
My Hacktoberfest 2024 Journey as a Maintainer with Github_Open_World 🌍

devchallenge, hacktoberfestchallenge, hacktoberfest, opensource
Image
Troubleshooting Common Issues of React Native Firebase- Cloud Messaging

firebase, reactnative, javascript
Image
The People Closest To Asbestos Class Action Lawsuit Settlement Uncover Big Secrets
Image
20 Trailblazers Leading The Way In Mesothelioma Asbestos
Image
Medle do Szpialni: Odkrywając Tajemnice Chwytów Medycznych
Image
Pilih Bandar Judi Online Terbaik untuk Main
Image
teknik tambahkan keterampilan dalam games slots online
Image
Creating a Simple Web Scraper with Python (BeautifulSoup) 🕷️📊
Image
Ten Taboos About Asbestos Mesothelioma You Should Not Share On Twitter
Image
20 Powerful Techniques for Writing Efficient and Readable Python Code

python, programming, beginners, development
Image
Easiest Way to Handle Drop Down Menus in Python Using Selenium ?

python, selenium, webdev, automation
Image
Magia Aranżacji Wnętrz: Twój Przewodnik do Estetycznego Raju
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .