How to Use the Material UI Button Component

A button is a commonly used component that adds interactivity to a UI. In this article, we’re going to learn how to easily create and customize buttons in Material UI.

Subscribe to Coding Beauty Newsletter

Gain useful insights and advance your web development knowledge with weekly tips and tutorials from Coding Beauty. Over 2,000 developers subscribe.

The Material UI Button Component

We can use the Button component from Material UI to create buttons. It has a variant prop used to display a text, contained, or outlined button.

import { Box, Button, Stack } from '@mui/material'; export default function App() { return ( <Box> <Stack spacing={2} direction="row" > <Button variant="text">Text</Button> <Button variant="contained">Contained</Button> <Button variant="outlined">Outlined</Button> </Stack> </Box> ); }

Text Button

Text buttons are suitable for actions of low significance in an app, like the closing of a dialog. Setting the variant prop to text displays a text button.

<Button>Primary</Button> <Button disabled>Disabled</Button> <Button href="#text-buttons">Link</Button>
Creating text buttons in Material UI.

Contained Button

Contained buttons indicate the primary and essential actions in our apps. Setting the variant prop to contained displays a contained button.

<Button variant="contained">Contained</Button> <Button variant="contained" disabled> Disabled </Button> <Button variant="contained" href="#contained-buttons"> Link </Button>
Creating contained buttons in Material UI.

Outlined Button

Outlined buttons indicate actions of mid-level significance. They are a lower emphasis alternative to contained buttons and a higher emphasis alternative to text buttons. Setting the variant prop to outlined displays and outlined button.

<Button variant="outlined">Primary</Button> <Button variant="outlined" disabled> Disabled </Button> <Button variant="outlined" href="#outlined-buttons"> Link </Button>
Creating outlined buttons in Material UI.

Disabled Button Elevation

We can prevent a button from being clicked by setting the disableElevation prop to true.

<Button variant="contained" disableElevation > Elevation disabled </Button>
Disabling button elevation.

Handling Button Clicks in Material UI

We can assign a listener function to the onClick prop to perform an action when the button is clicked.

In the following example, we attach a listener that increments a count by one, to display the total number of times the button has been clicked.

import { Box, Button, Typography } from '@mui/material'; import { useState } from 'react'; export default function App() { const [count, setCount] = useState(0); return ( <Box sx={{ margin: 2 }}> <Button onClick={() => { setCount(count + 1); }} variant="contained" > Click me </Button> <Typography sx={{ marginTop: 1 }}>Count: {count}</Typography> </Box> ); }
Handling button clicks in Material UI.

Material UI Button Colors

We can use the color prop to apply a color from the theme palette.

<Button color="secondary">Secondary</Button> <Button variant="contained" color="success"> Success </Button> <Button variant="outlined" color="error"> Error </Button>
Applying color to buttons.

Custom Colors

The color prop only allows values from the theme palette. To apply a color not available in the theme, we can use custom CSS and the sx prop.

import { Stack, Button } from '@mui/material'; import { green } from '@mui/material/colors'; export default function App() { return ( <Stack spacing={2} direction="row" > <Button sx={{ backgroundColor: green[500], '&:hover': { backgroundColor: green[700] }, }} variant="contained" > Primary </Button> <Button sx={{ color: green[500], borderColor: green[500], '&:hover': { color: green[500], borderColor: green[500] }, }} variant="outlined" > Secondary </Button> </Stack> ); }

Button Sizes

The size prop of the Button component allows us to create buttons of different sizes.

import { Box, Button } from '@mui/material'; export default function App() { return ( <Box> <Box sx={{ '& button': { m: 1 } }}> <div> <Button size="small">Small</Button> <Button size="medium">Medium</Button> <Button size="large">Large</Button> </div> <div> <Button variant="outlined" size="small" > Small </Button> <Button variant="outlined" size="medium" > Medium </Button> <Button variant="outlined" size="large" > Large </Button> </div> <div> <Button variant="contained" size="small" > Small </Button> <Button variant="contained" size="medium" > Medium </Button> <Button variant="contained" size="large" > Large </Button> </div> </Box> </Box> ); }
Creating buttons of different sizes in Material UI.

Icon and Label Buttons

Including an icon in a button can make clearer to the user the action the button performs. Assigning the icon component to the startIcon or endIcon prop aligns the icon to the left or right of the label respectively.

import { Button, Stack } from '@mui/material'; import { Settings as SettingsIcon, PlayArrow as PlayArrowIcon, } from '@mui/icons-material'; export default function App() { return ( <Stack spacing={2} direction="row" > <Button variant="contained" startIcon={<PlayArrowIcon />} > Play </Button> <Button variant="outlined" endIcon={<SettingsIcon />} > Settings </Button> </Stack> ); }
Creating a button with an icon and a label.

Icon Buttons in Material UI

Icon buttons can help save screen space and ease user recognition. We can use the IconButton component from Material UI to create them.

import { IconButton, Stack } from '@mui/material'; import { Settings, Delete, Info, ContentCopy } from '@mui/icons-material'; export default function App() { return ( <Stack spacing={2} direction="row" > <IconButton> <Settings /> </IconButton> <IconButton color="primary"> <Delete /> </IconButton> <IconButton color="secondary"> <Info /> </IconButton> <IconButton disabled color="primary" > <ContentCopy /> </IconButton> </Stack> ); }
Creating icon buttons in Material UI.

Icon Button Sizes

Like Button, IconButton also comes with a size prop for customizing its size.

<IconButton size="small"> <Settings fontSize="small" /> </IconButton> <IconButton size="medium"> <Settings fontSize="medium" /> </IconButton> <IconButton size="large"> <Settings fontSize="large" /> </IconButton>
Create icon button components of different sizes.

Icon Button Colors

The color prop lets us apply a color from the theme palette to an IconButton.

import { IconButton, Stack } from '@mui/material'; import { Settings as SettingsIcon } from '@mui/icons-material'; export default function App() { return ( <Stack spacing={1} direction="row" > <IconButton color="primary"> <SettingsIcon /> </IconButton> <IconButton color="secondary"> <SettingsIcon /> </IconButton> <IconButton color="success"> <SettingsIcon /> </IconButton> <IconButton color="error"> <SettingsIcon /> </IconButton> <IconButton color="warning"> <SettingsIcon /> </IconButton> </Stack> ); }
Customizing icon button colors.

Loading Buttons in Material UI

A loading button can indicate an ongoing operation and temporarily disable interaction. We can create one with the LoadingButton component.

import { Stack } from '@mui/material'; import { LoadingButton } from '@mui/lab'; import { Save as SaveIcon } from '@mui/icons-material'; export default function App() { return ( <Stack spacing={2} direction="row" > <LoadingButton loading variant="contained" > Play </LoadingButton> <LoadingButton loading loadingIndicator="Loading..." variant="outlined" > Send message </LoadingButton> <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />} variant="outlined" > Save </LoadingButton> </Stack> ); }
Creating a loading button in Material UI.

11 Amazing New JavaScript Features in ES13

This guide will bring you up to speed with all the latest features added in ECMAScript 13. These powerful new features will modernize your JavaScript with shorter and more expressive code.

11 Amazing New JavaScript Features in ES13

Sign up and receive a free copy immediately.

Leave a Comment

Your email address will not be published. Required fields are marked *